前言

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

開篇

• 首先我們先了解什么是有頭瀏覽器和無頭瀏覽器的區(qū)別，有頭的話不用怎么說了，就是我們平時使用的瀏覽器，能看到圖形化界面，和用戶有深度的交互，那無頭瀏覽器即headless browser，是一種沒有界面的瀏覽器。既然是瀏覽器那么瀏覽器該有的東西它都應(yīng)該有，只是看不到界面，省去可視化，也就是說去除了用戶交互的部分，那這樣對于瀏覽器來說是提高了瀏覽器整體運行的效率，也提高自動化的兼容性穩(wěn)定性，目前行業(yè)最流行的無頭瀏覽器分別是Puppeteer和PhantomJS，但后者已經(jīng)不再維護了

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

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

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

圖1.gif

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

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

技術(shù)棧

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

Xvfb

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

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

• 對于docker本身要去安裝這個模塊的，以ubuntu鏡像環(huán)境為例，首先安裝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是自制的一個已經(jīng)安裝好Xvfb和macaca相關(guān)驅(qū)動的鏡像，這里舉例子，下面是沒啟動Xvfb時啟動macaca執(zhí)行自動化測試的情況

  
  
  圖2.gif

• 這里就直接報找不到Xvfb了，除了macaca大家也可以試試selenium，基本是一樣的錯誤

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

圖3.gif

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

圖4.png

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

VNC

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

  
  
  圖5.png

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

圖6.gif

• 對于vnc的部署安裝可以參考附錄一，或者直接使用現(xiàn)成的docker鏡像，用docker search vnc可以搜出來，比如dorowu/ubuntu-desktop-lxde-vnc，然后在里面部署相關(guān)組件就可以用起來了

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

noVNC

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

• noVNC 是一個 HTML5 VNC 客戶端，采用 HTML 5 WebSockets, Canvas 和 JavaScript 實現(xiàn)，noVNC 被普遍用在各大云計算、虛擬機控制面板中

• noVNC 采用 WebSockets 實現(xiàn)，但是目前大多數(shù) VNC 服務(wù)器都不支持 WebSockets，所以 noVNC 是不能直接連接 VNC 服務(wù)器的，需要一個代理來做 WebSockets 和 TCP sockets 之間的轉(zhuǎn)換。這個代理在 noVNC 的目錄里，叫做 Websockify

• 最后實現(xiàn)的效果就是本文的第一張圖片的運行情況，直接利用瀏覽器可以操作一個linux操作系統(tǒng)，然后其實就相當于一臺現(xiàn)成的虛擬機，但在資源利用效率上就相對高效，部署文檔可以參考附錄二

• 整套流程如下圖

圖7.png

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

圖8.gif

應(yīng)用實踐

• 說完原理那就說一下應(yīng)用，目前這項技術(shù)就應(yīng)用在自己前段時間研發(fā)的UI自動化測試平臺上，這里也演示給大家看看

圖9.gif

• 就是通過noVNC實現(xiàn)和自動化測試平臺的一個互通，同時節(jié)點會保持發(fā)送心跳到平臺更新狀態(tài)，當執(zhí)行自動化測試的時候如下圖

圖10.gif

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

圖11.gif

總結(jié)

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

附錄

• ubuntu部署VNC
• noVNC簡單部署