01、前言

順著docker的發(fā)展，很多測(cè)試的同學(xué)也已經(jīng)在測(cè)試工作上使用docker作為環(huán)境基礎(chǔ)去進(jìn)行一些自動(dòng)化測(cè)試，這篇文章主要講述在docker中使用瀏覽器進(jìn)行自動(dòng)化測(cè)試如果可以實(shí)現(xiàn)可視化，同時(shí)可以對(duì)瀏覽器進(jìn)行相關(guān)的操作。

02、開篇

首先我們先了解什么是有頭瀏覽器和無(wú)頭瀏覽器的區(qū)別，有頭的話不用怎么說(shuō)了，就是我們平時(shí)使用的瀏覽器，能看到圖形化界面，和用戶有深度的交互，那無(wú)頭瀏覽器即headless browser，是一種沒有界面的瀏覽器。

既然是瀏覽器那么瀏覽器該有的東西它都應(yīng)該有，只是看不到界面，省去可視化，也就是說(shuō)去除了用戶交互的部分，那這樣對(duì)于瀏覽器來(lái)說(shuō)是提高了瀏覽器整體運(yùn)行的效率，提高自動(dòng)化的兼容性穩(wěn)定性，目前行業(yè)最流行的無(wú)頭瀏覽器分別是Puppeteer和PhantomJS，但后者已經(jīng)不再維護(hù)了。

如果你想學(xué)習(xí)接口自動(dòng)化測(cè)試，我這邊給你推薦一套視頻，這個(gè)視頻可以說(shuō)是B站播放全網(wǎng)第一的接口自動(dòng)化測(cè)試教程，同時(shí)在線人數(shù)到達(dá)1000人，并且還有筆記可以領(lǐng)取及各路大神技術(shù)交流：798478386??

【已更新】B站講的最詳細(xì)的Python接口自動(dòng)化測(cè)試實(shí)戰(zhàn)教程全集（實(shí)戰(zhàn)最新版）_嗶哩嗶哩_bilibili【已更新】B站講的最詳細(xì)的Python接口自動(dòng)化測(cè)試實(shí)戰(zhàn)教程全集（實(shí)戰(zhàn)最新版）共計(jì)200條視頻，包括：1.【接口自動(dòng)化】目前軟件測(cè)試的市場(chǎng)行情以及測(cè)試人員能力標(biāo)準(zhǔn)。、2.【接口自動(dòng)化】全面熟練Requests庫(kù)以及底層方法調(diào)用邏輯、3.【接口自動(dòng)化】接口自動(dòng)化實(shí)戰(zhàn)及正則和JsonPath提取器的應(yīng)用等，UP主更多精彩視頻，請(qǐng)關(guān)注UP賬號(hào)。https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337&vd_source=488d25e59e6c5b111f7a1a1a16ecbe9a?

說(shuō)到這里大家也可能已經(jīng)理解到現(xiàn)在大部分的在docker部署的瀏覽器都是無(wú)頭的，因?yàn)閐ocker本身就是不提供用戶界面的，所以一般制作瀏覽器鏡像都會(huì)優(yōu)先考慮無(wú)頭瀏覽器

但是，用過(guò)docker無(wú)頭瀏覽器的小伙伴應(yīng)該都會(huì)遇到一個(gè)問題，就是在測(cè)試瀏覽器外的交互，比如上傳文件，這類型的用例基本是不可能實(shí)現(xiàn)的，所以無(wú)頭瀏覽器docker環(huán)境作為自動(dòng)化測(cè)試的一個(gè)載體存在一定的局限性，但是有局限也就有突破的方法，接下來(lái)就是講解一下在docker里面我們是怎么使用有頭瀏覽器來(lái)做自動(dòng)化測(cè)試

從上面的一些問題我們能引出測(cè)試需求，那就是解決如何在docker上做瀏覽器測(cè)試使其達(dá)到的效果和在我們平常使用的桌面環(huán)境上深度交互的運(yùn)行效果，我們看看最后的效果

?看到這個(gè)，大家應(yīng)該也畢竟熟悉了，其實(shí)就是Docker的NoVnc的鏡像，圖形界面化docker環(huán)境，用瀏覽器直接打開就可以看到桌面，還可以直接操作，與一個(gè)普通界面操作系統(tǒng)基本無(wú)差，估計(jì)看到這里大家百度一下論壇搜一下都可以馬上去用了，直接下個(gè)novnc鏡像裝個(gè)macaca selenium什么就跑一下腳本就能運(yùn)行起來(lái)，很簡(jiǎn)單。

但是，知其然，也要知其所以然，那接下來(lái)就和大家說(shuō)一下這個(gè)能夠運(yùn)行有頭瀏覽器的docker環(huán)境的一些技術(shù)棧以及它的構(gòu)建過(guò)程

03、技術(shù)棧

對(duì)于瀏覽器的那些driver和docker本身就不多說(shuō)了，這次主要分享支持瀏覽器可以在圖形界面化的docker中運(yùn)行的技術(shù)棧，其中主要的幾個(gè)模塊和組件：Xvfb，VNC，noVNC

01Xvfb

Xvfb是X virtual framebuffer的簡(jiǎn)寫，顧名思義，它最大的作用是可以代替完整的X server的功能，簡(jiǎn)單地說(shuō)就是可以用虛擬的方式來(lái)模擬程序在有圖形界面條件下運(yùn)行的情況，大家現(xiàn)在用的大部分docker無(wú)頭瀏覽器就是用到它，Xvfb也是最重要的模塊，沒有這個(gè)模塊的支撐的話我這篇文章可以不用寫了

我們?cè)谧鲎詣?dòng)化測(cè)試的時(shí)候有一定的場(chǎng)景可以不用關(guān)注瀏覽器的整個(gè)運(yùn)行過(guò)程，大部分時(shí)候都是執(zhí)行等結(jié)果出報(bào)告就好，所以在做這種場(chǎng)景的測(cè)試的話可以先運(yùn)行xfvb，接著就按照平時(shí)自動(dòng)化測(cè)試的流程去執(zhí)行

對(duì)于docker本身要去安裝這個(gè)模塊的，以u(píng)buntu鏡像環(huán)境為例：

• 首先安裝Xvfb

sudo apt-get install Xvfb

• 安裝完以后運(yùn)行

Xvfb :99 -ac 2>/dev/null &
export DISPLAY=:99  

• 驗(yàn)證是否啟動(dòng)成功，看看啟動(dòng)firefox的時(shí)候輸出的日志正不正常就OK了

>>firefox

• 對(duì)于dockerfile方面也可以參考一下

FROM macaca-electron
EXPOSE 3456 22
ENTRYPOINT Xvfb -ac -screen scrn 1280x2000x24 :9.0 & \
      export DISPLAY=:9.0 \
      macaca server \    
         /usr/sbin/sshd -D

其中macaca-electron是自制的一個(gè)已經(jīng)安裝好Xvfb和macaca相關(guān)驅(qū)動(dòng)的鏡像，這里舉例子，下面是沒啟動(dòng)Xvfb時(shí)啟動(dòng)macaca執(zhí)行自動(dòng)化測(cè)試的情況

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-546909.html

這里就直接報(bào)找不到Xvfb了，除了macaca大家也可以試試selenium，基本是一樣的錯(cuò)誤，那啟動(dòng)之后的我們也試一下

運(yùn)行正常，同時(shí)我看看報(bào)告的截圖，也是能正常顯示的

?這就是目前瀏覽器docker環(huán)境用無(wú)頭方式做自動(dòng)化測(cè)試的一個(gè)案例，主要就是Xvfb的支撐

02、VNC

VNC是Virtual Network Console（虛擬網(wǎng)絡(luò)控制臺(tái)）控制臺(tái)的縮寫，是業(yè)界優(yōu)秀的遠(yuǎn)程桌面控制組件（工具），主要分為vncviewer和vncserver兩個(gè)模塊，其中VNC的原理也簡(jiǎn)單講解一下：

?

上圖是VNC的運(yùn)行原理圖，從一些參考資料解析，其控制是基于tcp/ip實(shí)現(xiàn)的，其中vnc server扮演了雙重角色，vnc protocal是基于RFB protocal的實(shí)現(xiàn)，其傳輸方式包括RFB協(xié)議傳輸和X協(xié)議傳輸，自己理解后簡(jiǎn)單總結(jié)為X協(xié)議就是VNC用來(lái)獲取X服務(wù)的信息（前文X服務(wù)信息可以用Xvfb模擬），然后經(jīng)過(guò)RFB協(xié)議進(jìn)行縮放等一系列操作投放到本地vncviewer中顯示

對(duì)于vnc的部署安裝可以直接使用現(xiàn)成的docker鏡像，用docker search vnc可以搜出來(lái)，比如dorowu/ubuntu-desktop-lxde-vnc，然后在里面部署相關(guān)組件就可以用起來(lái)了

但是，只是通過(guò)VNC來(lái)進(jìn)行自動(dòng)化測(cè)試，是沒辦法模擬鍵盤和鼠標(biāo)等一些操作，同時(shí)一些瀏覽器外的交互就實(shí)現(xiàn)不了，最明顯的就是上傳文件，那如果要解決這種場(chǎng)景，那基本上環(huán)境那塊就要把瀏覽器外的環(huán)境也一起模擬進(jìn)來(lái)，那就是接下來(lái)要講的用noVNC的方式來(lái)解決這個(gè)問題

?

03

noVNC

VNC本身需是自己的客戶端來(lái)顯示獲取到的圖像信息的，如果要在Web頁(yè)面上顯示，就可以利用到noVNC

noVNC是一個(gè)HTML5 VNC客戶端，采用HTML 5 WebSockets, Canvas和JavaScript實(shí)現(xiàn)，noVNC被普遍用在各大云計(jì)算、虛擬機(jī)控制面板中，noVNC采用WebSockets實(shí)現(xiàn)，但是目前大多數(shù)VNC服務(wù)器都不支持WebSockets，所以noVNC是不能直接連接VNC服務(wù)器的，需要一個(gè)代理來(lái)做WebSockets和TCP sockets 之間的轉(zhuǎn)換。這個(gè)代理在noVNC的目錄里，叫做Websockify

最后實(shí)現(xiàn)的效果就是本文的第一張圖片的運(yùn)行情況，直接利用瀏覽器可以操作一個(gè)linux操作系統(tǒng)，然后其實(shí)就相當(dāng)于一臺(tái)現(xiàn)成的虛擬機(jī)。

整套流程如下圖：

這里也演示一下直接操作使用的效果，基本上和平時(shí)使用的虛擬機(jī)無(wú)異，而且是用瀏覽器打開的，不需本地部署

?

04、應(yīng)用實(shí)踐

說(shuō)完原理那就說(shuō)一下應(yīng)用，目前這項(xiàng)技術(shù)就應(yīng)用在自己前段時(shí)間研發(fā)的UI自動(dòng)化測(cè)試平臺(tái)上，這里也演示給大家看看

就是通過(guò)noVNC實(shí)現(xiàn)和自動(dòng)化測(cè)試平臺(tái)的一個(gè)互通，同時(shí)節(jié)點(diǎn)會(huì)保持發(fā)送心跳到平臺(tái)更新狀態(tài)，當(dāng)執(zhí)行自動(dòng)化測(cè)試的時(shí)候如下圖：

?

通過(guò)雙向通信獲取到節(jié)點(diǎn)的狀態(tài)，這里是在任務(wù)調(diào)度這塊邏輯用到的，尤其是多個(gè)項(xiàng)目執(zhí)行自動(dòng)化測(cè)試，但節(jié)點(diǎn)又不夠的情況下就可以合理調(diào)度，就不會(huì)想selenium-grid那樣不可控，可以需要的時(shí)候還可以去節(jié)點(diǎn)環(huán)境中看看執(zhí)行情況，這就是Docker有頭瀏覽器的一個(gè)應(yīng)用。

總結(jié)：

用Docker的有頭瀏覽器確實(shí)能夠讓我們可以很好的更貼近實(shí)際情況去實(shí)現(xiàn)自動(dòng)化測(cè)試，當(dāng)然任何方案都不是完美的，我們需要做的是針對(duì)業(yè)務(wù)上遇到的問題去設(shè)計(jì)方案解決。

?

到了這里，關(guān)于如何使用Docker實(shí)現(xiàn)分布式Web自動(dòng)化！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！