各瀏覽器內核不一樣，支持的css標準不一樣，因此前端開發(fā)人員對各個瀏覽器的兼容性很頭疼。不僅如此，前端的測試人員也身受其害。同樣的功能，需要在不同的瀏覽器中重復地操作與觀察。即使已將前端的case自動化，還需要搭建不同的瀏覽器環(huán)境，在各瀏覽器中一一發(fā)起執(zhí)行。既然case已經自動化運行，能否再進一步， 若case能在各個瀏覽器下自動的運行，則能減少測試人員搭建多瀏覽器環(huán)境與串行多次運行case的代價。

　　現狀

　　目前已有工具可在瀏覽器兼容性的測試中給出一些輔助。筆者覺得可將它們按功能可歸為三類：一類是可將同一url在多個瀏覽器中打開并返回截圖的工具，比如 Browsershots、SuperPreviewIE;一類是提供一系列備選瀏覽器，在不需要在機器上安裝各瀏覽器的情況下，模擬指定的瀏覽器操作的工具，比如Browser Sandbox、IEtester;另一類是檢測js錯誤工具，可在不需安裝多瀏覽器的情況下檢查js是否能運行成功，比如crosscheck。此類工具的缺點都在于不能將對同一頁面的操作同步到多個瀏覽器中，只能減少各瀏覽器的安裝成本，測試時仍需對每個瀏覽器逐一檢查。另外，sandbox與 ietester是否反應頁面在各瀏覽器下的真實結果還有待確認。

　　多瀏覽器測試對比工具

　　筆者設計的多瀏覽器測試對比工具，也并不能將測試人員從瀏覽器兼容性測試的工作中解放出來，但是，它可以減少您在windows下安裝ie6ie7 ie8firefox3.6chrome的工作，自動地在各個瀏覽器中完成case的執(zhí)行，并行執(zhí)行case來節(jié)約case運行時間，它還可以返回各瀏覽器中運行的截圖供您一次性查看，同時運用基于分塊的直方圖相似度對比各瀏覽器的截圖圖像，以給您查看圖像時提供參考。

　　多瀏覽器測試對比工具的功能圖如下：

 　　使用多瀏覽器工具，用戶只需將可執(zhí)行的自動化case及配置文件傳入ftp即可，由工具會自動地檢查ftp目錄是否有case輸入，讀取配置文件后，自動地完成case的分發(fā)、執(zhí)行、截圖與結果收集。

　　1. 輸入數據

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

　　配置文件格式如下：

　　2. 輸出結果

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

 　　3. 關于實現

　　1) 多瀏覽器環(huán)境的建立

　　每個瀏覽器都在windows環(huán)境下真實地安裝，從而得到真正各版本瀏覽器下運行的結果。各瀏覽器安裝在一臺或多臺機器上，由由server端記錄著各個瀏覽器類型所對應的機器及機器提供case上傳、遠程調用的端口號。各瀏覽器所在機器部署著多瀏覽器工具的client，提供了查詢client空閑狀態(tài)、運行case、返回運行結果等接口供server端調用。

　　(2)case的分發(fā)

　　Case的分發(fā)到哪臺機器，意味著case會在這臺機器上執(zhí)行。目前的case分發(fā)采用著為簡單的方法。每次server只運行一個應用，即當有多個 case文件夾同時上傳到ftp后，會依次處理每一個上傳。當server端檢測到case輸入時，根據配置文件中選擇的瀏覽器類型，依次查詢對應瀏覽器所在的機器列表中，有哪臺機器是空閑的，若有空間的機器，則將case部署到此機器上。對獲取空閑機器的操作加鎖，以保證不會出現并發(fā)時對機器的獲取有誤。Server建立各瀏覽器運行case的線程，由配置文件中，case在各個瀏覽器下串并行配置來確定線程的運行順序。

　　采用以上方法來分發(fā)case，雖然簡單方便，但存在著資源利用不充足的問題？赡艹霈F正在運行的case在等待符合條件的空閑機器，而現在空閑的機器雖然不滿足此時case的瀏覽器要求，卻可能滿足下一個輸入滿足的瀏覽器類型。筆者目前還沒有想到好的算法。若所有的case全為并行，則可將解析所有的待運行case，按case瀏覽器類型組成數組，當有空閑機器時，從數組中找出能滿足條件的先運行。但因case可設置為串行，此方法便不可行了。若大家有滿足串并行要求、又能充分利用機器資源的算法，歡迎交流。

　　(3)瀏覽器截圖

　　截圖的時間

　　當case發(fā)起執(zhí)行時，同時發(fā)起另一線程開始截圖。當case運行完成或遇到異常結束時，截圖停止。配置文件中可設置截圖的時間間隔，線程中按指定的時間間隔sleep截圖。

　　截圖的方法

　　由于此工具并不會干涉用戶如何操作瀏覽器，因此對瀏覽器的截圖并沒有調用selenium或watinN的相關接口來截圖，而是調用windows api來完成的截圖。在截圖時，先根據此時瀏瀏覽器的類型來得到瀏覽器窗口的classname，由classname來定位瀏覽器的父窗口句柄，再枚舉子窗口，得到瀏覽器渲染區(qū)的句柄。為了能將渲染區(qū)的圖清晰地截取出來，在獲取了父窗口的句柄后，將窗口大化且置為HWND_TOPMOST。由 winApi中的GetWindowRect根據渲染區(qū)的句柄得出渲染區(qū)的屏幕坐標區(qū)域，再對此區(qū)域進行屏幕截取。

　　由于chromefirefox存在不同程度打開一個應用程序，出現多個classname相同的窗口的情況，因此在獲取chrome與firefox句柄的細節(jié)方面，還加了title過濾等處理。

　　截圖的對比

　　圖像的對比的方法較多，領域也很深，筆者找到了一個基于圖像直方圖來對比相似度的方法，覺得能有一些參考價值。此方法將兩個圖像各切分為64個小方格，每個方格提取直方圖，對比相似度后，取相似度的平均值做為總的圖像相似度。

　　筆者將baidu上搜索hahaxixi的自動化case放入多瀏覽器工具中，選擇在ie6ie8firefox3.6下運行，人眼看到的截圖基本一致，得到的對比結果是，ie6.0與firefox3.6下截圖的相似度為83.949%，ie6.0與ie8.0的截圖相似度為82.233%。