前言

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

開篇

• 首先我們先了解什麼是有頭瀏覽器和無頭瀏覽器的區別，有頭的話不用怎麼說了，就是我們平時使用的瀏覽器，能看到圖形化介面，和使用者有深度的互動，那無頭瀏覽器即headless browser，是一種沒有介面的瀏覽器。既然是瀏覽器那麼瀏覽器該有的東西它都應該有，只是看不到介面，省去視覺化，也就是說去除了使用者互動的部分，那這樣對於瀏覽器來說是提高了瀏覽器整體執行的效率，也提高自動化的相容性穩定性，目前行業最流行的無頭瀏覽器分別是Puppeteer和PhantomJS，但後者已經不再維護了

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

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

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

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

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

技術棧

• 對於瀏覽器的那些driver和docker本身就不多說了，這次主要分享支援起瀏覽器可以在圖形介面化的docker中執行的技術棧，其中主要的幾個模組和元件：Xvfb
  ，VNC，noVNC

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，基本是一樣的錯誤

• 那啟動之後的我們也試一下

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

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

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中顯示，也是就是上圖的說明

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

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

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作業系統，然後其實就相當於一臺現成的虛擬機器，但在資源利用效率上就相對高效，部署文件可以參考附錄二

• 整套流程如下圖

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

應用實踐

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

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

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

總結

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

附錄

• ubuntu部署VNC
• noVNC簡單部署