01、前言

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

02、開篇

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

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

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

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

從上面的一些問(wèn)題我們能引出測(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

01、Xvfb

Xvfb是X virtual framebuffer的簡(jiǎn)寫，顧名思義，它最大的作用是可以代替完整的X server的功能，簡(jiǎn)單地說(shuō)就是可以用虛擬的方式來(lái)模擬程序在有圖形界面條件下運(yùn)行的情況，大家現(xiàn)在用的大部分docker無(wú)頭瀏覽器就是用到它，Xvfb也是最重要的模塊，沒(méi)有這個(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)的鏡像，這里舉例子，下面是沒(méi)啟動(dòng)Xvfb時(shí)啟動(dòng)macaca執(zhí)行自動(dòng)化測(cè)試的情況

這里就直接報(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è)試，是沒(méi)辦法模擬鍵盤和鼠標(biāo)等一些操作，同時(shí)一些瀏覽器外的交互就實(shí)現(xiàn)不了，最明顯的就是上傳文件，那如果要解決這種場(chǎng)景，那基本上環(huán)境那塊就要把瀏覽器外的環(huán)境也一起模擬進(jìn)來(lái)，那就是接下來(lái)要講的用noVNC的方式來(lái)解決這個(gè)問(wèn)題

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ù)上遇到的問(wèn)題去設(shè)計(jì)方案解決。

? ? ? ? ? 【下面是我整理的2023年最全的軟件測(cè)試工程師學(xué)習(xí)知識(shí)架構(gòu)體系圖】

一、Python編程入門到精通

二、接口自動(dòng)化項(xiàng)目實(shí)戰(zhàn)??

三、Web自動(dòng)化項(xiàng)目實(shí)戰(zhàn)

四、App自動(dòng)化項(xiàng)目實(shí)戰(zhàn)?

五、一線大廠簡(jiǎn)歷

六、測(cè)試開發(fā)DevOps體系?

七、常用自動(dòng)化測(cè)試工具

八、JMeter性能測(cè)試?

九、總結(jié)（尾部小驚喜）

生命不息，奮斗不止。每一份努力都不會(huì)被辜負(fù)，只要堅(jiān)持不懈，終究會(huì)有回報(bào)。珍惜時(shí)間，追求夢(mèng)想。不忘初心，砥礪前行。你的未來(lái)，由你掌握！

生命短暫，時(shí)間寶貴，我們無(wú)法預(yù)知未來(lái)會(huì)發(fā)生什么，但我們可以掌握當(dāng)下。珍惜每一天，努力奮斗，讓自己變得更加強(qiáng)大和優(yōu)秀。堅(jiān)定信念，執(zhí)著追求，成功終將屬于你！

只有不斷地挑戰(zhàn)自己，才能不斷地超越自己。堅(jiān)持追求夢(mèng)想，勇敢前行，你就會(huì)發(fā)現(xiàn)奮斗的過(guò)程是如此美好而值得。相信自己，你一定可以做到！

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

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