多瀏覽器測試對比工具

 引言

各瀏覽器內核不同，支持的css標準不同，所以前端開發人員對各個瀏覽器的兼容性很頭疼。不只如此，前端的測試人員也身受其害。一樣的功能，須要在不一樣的瀏覽器中重複地操做與觀察。即便已將前端的case自動化，還須要搭建不一樣的瀏覽器環境，在各瀏覽器中一一發起執行。既然case已經自動化運行，可否再進一步， 若case能在各個瀏覽器下自動的運行，則能減小測試人員搭建多瀏覽器環境與串行屢次運行case的代價。
現狀  

目前已有工具可在瀏覽器兼容性的測試中給出一些輔助。筆者以爲可將它們按功能可歸爲三類：一類是可將同一url在多個瀏覽器中打開並返回截圖的工具，好比Browsershots、SuperPreviewIE；一類是提供一系列備選瀏覽器，在不須要在機器上安裝各瀏覽器的狀況下，模擬指定的瀏覽器操做的工具，好比Browser Sandbox、IEtester；另外一類是檢測js錯誤工具，可在不需安裝多瀏覽器的狀況下檢查js是否能運行成功，好比crosscheck。此類工具的缺點都在於不能將對同一頁面的操做同步到多個瀏覽器中，只能減小各瀏覽器的安裝成本，測試時仍需對每一個瀏覽器逐一檢查。另外，sandbox與 ietester是否反應頁面在各瀏覽器下的真實結果還有待確認。
多瀏覽器測試對比工具
筆者設計的多瀏覽器測試對比工具，也並不能將測試人員從瀏覽器兼容性測試的工做中解放出來，可是，它能夠減小您在windows下安裝ie6\ie7\ie8\firefox3.6\chrome的工做，自動地在各個瀏覽器中完成case的執行，並行執行case來節約case運行時間，它還能夠返回各瀏覽器中運行的截圖供您一次性查看，同時運用基於分塊的直方圖類似度對比各瀏覽器的截圖圖像，以給您查看圖像時提供參考。
多瀏覽器測試對比工具的功能圖以下： 

1. 輸入數據 

工具會檢查某個目錄下是否有文件夾，用戶只需將含有自動化case及配置文件的文件夾上傳到此目錄下，工具檢測到用戶輸入後，會根據配置文件中指定的瀏覽器類型，將case分發到瀏覽器對應的機器上，併發起case的執行。
配置文件格式以下 

2. 輸出結果
此工具將收集各瀏覽器測試的結果，以下，每一個以瀏覽器類型命名的文件夾下是各瀏覽器的截圖及運行日誌，在server的日誌中，給出各瀏覽器截圖的類似度對比結果。

3. 關於實現

 1） 多瀏覽器環境的創建
每一個瀏覽器都在windows環境下真實地安裝，從而獲得真正各版本瀏覽器下運行的結果。各瀏覽器安裝在一臺或多臺機器上，由由server端記錄着各個瀏覽器類型所對應的機器及機器提供case上傳、遠程調用的端口號。各瀏覽器所在機器部署着多瀏覽器工具的client，提供了查詢client空閒狀態、運行case、返回運行結果等接口供server端調用。
（2）case的分發
Case的分發到哪臺機器，意味着case會在這臺機器上執行。目前的case分發採用着最爲簡單的方法。每次server只運行一個應用，即當有多個case文件夾同時上傳到ftp後，會依次處理每個上傳。當server端檢測到case輸入時，根據配置文件中選擇的瀏覽器類型，依次查詢對應瀏覽器所在的機器列表中，有哪臺機器是空閒的，如有空間的機器，則將case部署到此機器上。對獲取空閒機器的操做加鎖，以保證不會出現併發時對機器的獲取有誤。Server創建各瀏覽器運行case的線程，由配置文件中，case在各個瀏覽器下串並行配置來肯定線程的運行順序。
採用以上方法來分發case，雖然簡單方便，但存在着資源利用不充足的問題。可能出現正在運行的case在等待符合條件的空閒機器，而如今空閒的機器雖然不知足此時case的瀏覽器要求，卻可能知足下一個輸入知足的瀏覽器類型。筆者目前尚未想到好的算法。若全部的case全爲並行，則可將解析全部的待運行case，按case\瀏覽器類型組成數組，當有空閒機器時，就從數組中找出能知足條件的先運行。但因case可設置爲串行，此方法便不可行了。若你們有知足串並行要求、又能充分利用機器資源的算法，歡迎交流。
（3）瀏覽器截圖
截圖的時間
當case發起執行時，同時發起另外一線程開始截圖。當case運行完成或遇到異常結束時，截圖中止。配置文件中可設置截圖的時間間隔，線程中按指定的時間間隔sleep截圖。

截圖的方法
因爲此工具並不會干涉用戶如何操做瀏覽器，所以對瀏覽器的截圖並無調用selenium或watinN的相關接口來截圖，而是調用windows api來完成的截圖。在截圖時，先根據此時瀏瀏覽器的類型來獲得瀏覽器窗口的classname，由classname來定位瀏覽器的父窗口句柄，再枚舉子窗口，獲得瀏覽器渲染區的句柄。爲了能將渲染區的圖清晰地截取出來，在獲取了父窗口的句柄後，將窗口最大化且置爲HWND_TOPMOST。由winApi中的GetWindowRect根據渲染區的句柄得出渲染區的屏幕座標區域，再對此區域進行屏幕截取。
因爲chrome\firefox存在不一樣程度打開一個應用程序，出現多個classname相同的窗口的狀況，所以在獲取chrome與firefox句柄的細節方面，還加了title過濾等處理。
截圖的對比
圖像的對比的方法較多，領域也很深，筆者找到了一個基於圖像直方圖來對比類似度的方法，以爲能有一些參考價值。此方法將兩個圖像各切分爲64個小方格，每一個方格提取直方圖，對比類似度後，取類似度的平均值作爲總的圖像類似度。
筆者將baidu上搜索hahaxixi的自動化case放入多瀏覽器工具中，選擇在ie6\ie8\firefox3.6下運行，人眼看到的截圖基本一致，獲得的對比結果是，ie6.0與firefox3.6下截圖的類似度爲83.949%，ie6.0與ie8.0的截圖類似度爲82.233%。
4. 關於運用

 此工具剛開發完成，目前是在測試時使用了一些web自動化case在運行。此後準備先在創意專家項目組來實驗並完善此工具。
因爲工具的使用比較簡單，用戶只需將可執行的自動化case及配置文件傳入ftp便可，由工具自動地完成case的分發、執行、截圖與結果收集。若運行得比較順暢，用戶可在持續集成中採用此工具作兼容性檢查的daily run。不過，此工具對用戶自動化用例的要求會高一些，用例能成功運行的瀏覽器類型，還取決於用戶自身的web case所使用的執行引擎。 

做者:pfeng

【本文轉自 百度測試技術空間】 http://hi.baidu.com/baiduqa/blog/item/454507494a3f6deb82025c34.html

【 關注百度技術沙龍】