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中運行的技術棧，其中主要的幾個模塊和組件：Xvfb，VNC，noVNC

01 Xvfb

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的支撐

02 VNC

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的方式來解決這個問題

03 noVNC

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

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

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

整套流程如下圖：