發表於
2011 年 12 月 15 日 由
引言
各瀏覽器核心不一樣，支援的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執行時間，它還可以返回各瀏覽器中執行的截圖供您一次性檢視，同時運用基於分塊的直方圖相似度對比各瀏覽器的截圖影象，以給您檢視影象時提供參考。
多瀏覽器測試對比工具的功能圖如下：
使用多瀏覽器工具，使用者只需將可執行的自動化case及配置檔案傳入ftp即可，由工具會自動地檢查ftp目錄是否有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所使用的執行引擎。
多瀏覽器測試對比工具
引言 各瀏覽器核心不一樣，支援的css標準不一樣，因此前端開發人員對各個瀏覽器的相容性很頭疼。不僅如此，前端的測試人員也身受其害。同樣的功能，需要在不同的瀏覽器中重複地操作與觀察。即使已將前端的case自動化，還需要搭建不同的瀏覽器環境，在各瀏覽器中一一發起執行。既然case已經自動化執行，能否再進...
瀏覽器相容測試工具
首先，從網上搜尋pc 和手機瀏覽器使用的核心，因為瀏覽器是以核心區分，解析也是以核心區分。trident ie核心 ie6 ie7 ie8 trident 4.0 ie9 trident 5.0 ie10 trident 6.0 獵豹安全瀏覽器 1.0 4.2 版本為trident webkit，4...
Selenium多瀏覽器適配
selenium支援多種瀏覽器，實際測試中可以通過工程模式建立不同瀏覽器的例項，從而完成多種瀏覽器的適配測試。selenium支援的瀏覽器種類如下 chromedriver 谷歌瀏覽器 internetexplorerdriver 微軟ie firefoxdriver 火狐operadriver 歐...