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

　　現(xiàn)狀

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

　　多瀏覽器測(cè)試對(duì)比工具

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

　　多瀏覽器測(cè)試對(duì)比工具的功能圖如下：

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

　　1. 輸入數(shù)據(jù)

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

　　配置文件格式如下：

　　2. 輸出結(jié)果

　　此工具將收集各瀏覽器測(cè)試的結(jié)果，如下，每個(gè)以瀏覽器類型命名的文件夾下是各瀏覽器的截圖及運(yùn)行日志，在server的日志中，給出各瀏覽器截圖的相似度對(duì)比結(jié)果。

 　　3. 關(guān)于實(shí)現(xiàn)

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

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

　　(2)case的分發(fā)

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

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

　　(3)瀏覽器截圖

　　截圖的時(shí)間

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

　　截圖的方法

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

　　由于chromefirefox存在不同程度打開(kāi)一個(gè)應(yīng)用程序，出現(xiàn)多個(gè)classname相同的窗口的情況，因此在獲取chrome與firefox句柄的細(xì)節(jié)方面，還加了title過(guò)濾等處理。

　　截圖的對(duì)比

　　圖像的對(duì)比的方法較多，領(lǐng)域也很深，筆者找到了一個(gè)基于圖像直方圖來(lái)對(duì)比相似度的方法，覺(jué)得能有一些參考價(jià)值。此方法將兩個(gè)圖像各切分為64個(gè)小方格，每個(gè)方格提取直方圖，對(duì)比相似度后，取相似度的平均值做為總的圖像相似度。

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