01前言

順著docker的發展，很多測試的同學也已經在測試工作上使用docker作為環境基礎去進行一些自動化測試，這篇文章主要講述我們在docker中使用瀏覽器進行自動化測試如果可以實現視覺化，同時可以對瀏覽器進行相關的操作。

02開篇

首先我們先了解什麼是有頭瀏覽器和無頭瀏覽器的區別，有頭的話不用怎麼說了，就是我們平時使用的瀏覽器，能看到圖形化介面，和使用者有深度的互動，那無頭瀏覽器即headless browser，是一種沒有介面的瀏覽器。

既然是瀏覽器那麼瀏覽器該有的東西它都應該有，只是看不到介面，省去視覺化，也就是說去除了使用者互動的部分，那這樣對於瀏覽器來說是提高了瀏覽器整體執行的效率，提高自動化的相容性穩定性，目前行業最流行的無頭瀏覽器分別是Puppeteer和PhantomJS，但後者已經不再維護了。

說到這裡大家也可能已經理解到現在大部分的在docker部署的瀏覽器都是無頭的，因為docker本身就是不提供使用者介面的，所以一般製作瀏覽器映象都會優先考慮無頭瀏覽器

但是，用過docker無頭瀏覽器的小夥伴應該都會遇到一個問題，就是在測試瀏覽器外的互動，比如上傳檔案，這型別的用例基本是不可能實現的，所以無頭瀏覽器docker環境作為自動化測試的一個載體存在一定的侷限性，但是有侷限也就有突破的方法，接下來就是講解一下在docker裡面我們是怎麼使用有頭瀏覽器來做自動化測試

從上面的一些問題我們能因引出測試需求，那就是解決如何在docker上做瀏覽器測試使其達到的效果和在我們平常使用的桌面環境上深度互動的執行效果，

圖1.gif

看到這個，大家應該也畢竟熟悉了，其實就是Docker的NoVnc的映象，圖形介面化docker環境，用瀏覽器直接開啟就可以看到桌面，還可以直接操作，與一個普通介面作業系統基本無差，估計看到這裡大家百度一下論壇搜一下都可以馬上去用了，直接下個novnc映象裝個macaca selenium什麼就跑一下指令碼就能執行起來，很簡單。

但是，知其然，也要知其所以然，那接下來就和大家說一下這個能夠執行有頭瀏覽器的docker環境的一些技術棧以及它的構建過程

03技術棧

對於瀏覽器的那些driver和docker本身就不多說了，這次主要分享支援起瀏覽器可以在圖形介面化的docker中執行的技術棧，

01Xvfb

Xvfb是X virtual framebuffer的簡寫，顧名思義，它最大的作用是可以代替完整的X server的功能，簡單地說就是可以用虛擬的方式來模擬程式在有圖形介面條件下執行的情況，大家現在用的大部分docker無頭瀏覽器就是用到它，Xvfb也是最重要的模組，沒有這個模組的支撐的話我這篇文章可以不用寫了

我們在做自動化測試的時候有一定的場景可以不用關注瀏覽器的整個執行過程，大部分時候都是執行等結果出報告就好，所以在做這種場景的測試的話可以先執行xfvb，接著就按照平時自動化測試的流程去執行

對於docker本身要去安裝這個模組的，以ubuntu映象環境為例：

• 首先安裝Xvfb

sudo apt-get install Xvfb

• 安裝完以後執行

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

• 驗證是否啟動成功，看看啟動firefox的時候輸出的日誌正不正常就OK了

>>firefox

• 對於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是自制的一個已經安裝好Xvfb和macaca相關驅動的映象，這裡舉例子，下面是沒啟動Xvfb時啟動macaca執行自動化測試的情況

圖2.gif

這裡就直接報找不到Xvfb了，除了macaca大家也可以試試selenium，基本是一樣的錯誤，那啟動之後的我們也試一下

圖3.gif

執行正常，同時我看看報告的截圖，也是能正常顯示的

圖4.png

這就是目前瀏覽器docker環境用無頭方式做自動化測試的一個案例，主要就是Xvfb的支撐

02VNC

VNC是Virtual Network Console（虛擬網路控制檯）控制檯的縮寫，是業界優秀的遠端桌面控制組件（工具），主要分為vncviewer和vncserver兩個模組，其中VNC的原理也簡單講解一下：

圖5.png

上圖是VNC的執行原理圖，從一些參考資料解析，其控制是基於tcp/ip實現的，其中vnc server扮演了雙重角色，vnc protocal是基於RFB protocal的實現，其傳輸方式包括RFB協議傳輸和X協議傳輸，自己理解後簡單總結為X協議就是VNC用來獲取X服務的資訊（前文提前X服務資訊可以用Xvfb模擬），然後經過RFB協議進行縮放等一系列操作投放到本地vncviewer中顯示

圖6.gif

對於vnc的部署安裝可以直接使用現成的docker映象，用docker search vnc可以搜出來，比如dorowu/ubuntu-desktop-lxde-vnc，然後在裡面部署相關元件就可以用起來了

但是，只是通過VNC來進行自動化測試，是沒辦法模擬鍵盤和滑鼠等一些操作，同時一些瀏覽器外的互動就實現不了，最明顯的就是上傳檔案，那如果要解決這種場景，那基本上環境那塊就要把瀏覽器外的環境也一起模擬進來，那就是接下來要講的用noVNC的方式來解決這個問題

03noVNC

VNC本身需是自己的客戶端來顯示獲取到的影象資訊的，如果要在Web頁面上顯示，就可以利用到noVNC

noVNC是一個HTML5 VNC客戶端，採用HTML 5 WebSockets, Canvas和JavaScript實現，noVNC被普遍用在各大雲端計算、虛擬機器控制面板中，noVNC採用WebSockets實現，但是目前大多數VNC伺服器都不支援WebSockets，所以noVNC是不能直接連線VNC伺服器的，需要一個代理來做WebSockets和TCP sockets 之間的轉換。這個代理在noVNC的目錄裡，叫做Websockify

最後實現的效果就是本文的第一張圖片的執行情況，直接利用瀏覽器可以操作一個linux作業系統，然後其實就相當於一臺現成的虛擬機器。

整套流程如下圖：

圖7.png

這裡也演示一下直接操作使用的效果，基本上和平時使用的虛擬機器無異，而且是用瀏覽器開啟的，不需本地部署

圖8.gif

04應用實踐

說完原理那就說一下應用，目前這項技術就應用在自己前段時間研發的UI自動化測試平臺上，這裡也演示給大家看看

圖9.gif

就是通過noVNC實現和自動化測試平臺的一個互通，同時節點會保持傳送心跳到平臺更新狀態，當執行自動化測試的時候如下圖：

圖10.gif

通過雙向通訊獲取到節點的狀態，這裡是在任務排程這塊邏輯用到的，尤其是多個專案執行自動化測試，但節點又不夠的情況下就可以合理排程，就不會想selenium-grid那樣不可控，可以需要的時候還可以去節點環境中看看執行情況，這就是Docker有頭瀏覽器的一個應用。

圖11.git

總結：

用Docker的有頭瀏覽器確實能夠讓我們可以很好的更貼近實際情況去實現自動化測試，當然任何方案都不是完美的，我們需要做的是針對業務上遇到的問題去設計方案解決。