基于捕獲重放的Web應(yīng)用跨瀏覽器兼容性檢測(cè)

吳國(guó)全 何妹妹 魏 峻 鐘 華 黃 濤,2

1(中國(guó)科學(xué)院軟件研究所軟件工程技術(shù)中心 北京 100190)2(計(jì)算機(jī)科學(xué)技術(shù)國(guó)家重點(diǎn)實(shí)驗(yàn)室(中國(guó)科學(xué)院軟件研究所) 北京 100190)3 (中國(guó)科學(xué)院大學(xué) 北京 100049) (gqwu@otcaix.iscas.ac.cn)

基于捕獲重放的Web應(yīng)用跨瀏覽器兼容性檢測(cè)

吳國(guó)全1,2,3何妹妹1,2,3魏 峻1,2,3鐘 華1黃 濤1,2

1(中國(guó)科學(xué)院軟件研究所軟件工程技術(shù)中心 北京 100190)2(計(jì)算機(jī)科學(xué)技術(shù)國(guó)家重點(diǎn)實(shí)驗(yàn)室(中國(guó)科學(xué)院軟件研究所) 北京 100190)3(中國(guó)科學(xué)院大學(xué) 北京 100049) (gqwu@otcaix.iscas.ac.cn)

由于瀏覽器實(shí)現(xiàn)技術(shù)的差異以及對(duì)標(biāo)準(zhǔn)支持程度的不同，Web應(yīng)用的跨瀏覽器不兼容性(cross-browser incompatibilities, XBI)已成為Web應(yīng)用開發(fā)者面臨的嚴(yán)重問(wèn)題.現(xiàn)有的兼容性檢測(cè)工具僅考慮用戶交互事件而忽略了瀏覽器內(nèi)部事件，無(wú)法保證在不同的瀏覽器平臺(tái)上有相同的執(zhí)行，導(dǎo)致檢測(cè)結(jié)果出現(xiàn)大量誤報(bào)和漏報(bào).提出了一種基于捕獲重放技術(shù)的Web應(yīng)用跨瀏覽器兼容性檢測(cè)方法，在事件捕獲階段記錄Web應(yīng)用在參考瀏覽器平臺(tái)運(yùn)行時(shí)產(chǎn)生的各種非確定性事件，并在重放階段在測(cè)試瀏覽器平臺(tái)中進(jìn)行遠(yuǎn)程重放.通過(guò)在重放過(guò)程中采集頁(yè)面信息，保證了檢測(cè)結(jié)果的準(zhǔn)確性.為避免重復(fù)檢測(cè)，設(shè)計(jì)了一種增量式的檢測(cè)算法提高了檢測(cè)效率.實(shí)驗(yàn)結(jié)果表明了所提出方法的有效性.

跨瀏覽器兼容性；Web應(yīng)用；JavaScript；捕獲重放；測(cè)試

隨著互聯(lián)網(wǎng)以及Web技術(shù)的快速發(fā)展，Web應(yīng)用正在成為重要的信息獲取和交流平臺(tái).應(yīng)用開發(fā)者希望應(yīng)用能在各種主流的瀏覽器平臺(tái)上表現(xiàn)一致，但由于瀏覽器實(shí)現(xiàn)技術(shù)的差異以及對(duì)標(biāo)準(zhǔn)支持程度的不同，導(dǎo)致Web應(yīng)用在不同的瀏覽器平臺(tái)上運(yùn)行時(shí)可能出現(xiàn)行為和頁(yè)面展現(xiàn)方面的不一致，稱為跨瀏覽器的不兼容問(wèn)題(cross-browser incompa-tibilities, XBI).X-PERT[1]將XBI分為3類：行為不兼容(behavior XBI)、結(jié)構(gòu)不兼容(structure XBI)和內(nèi)容不兼容(content XBI).

1) 行為不一致.這類不一致指頁(yè)面中元素的功能失效.例如點(diǎn)擊鏈接頁(yè)面無(wú)法跳轉(zhuǎn)、點(diǎn)擊按鈕頁(yè)面沒(méi)有反應(yīng).

2) 結(jié)構(gòu)不一致.這類不一致指頁(yè)面中元素在結(jié)構(gòu)布局方面的問(wèn)題.例如：2個(gè)按鈕在Chrome瀏覽器中橫排且上下對(duì)齊，但是在IE中顯示為豎排.

3) 內(nèi)容不一致.這類不一致進(jìn)一步分為文本內(nèi)容不一致和可視內(nèi)容不一致.文本不一致指的是元素內(nèi)部的文本不同；可視內(nèi)容不一致是指元素在可視化方面的不同，如同一個(gè)元素在不同瀏覽器上的渲染效果存在差異.

為自動(dòng)檢測(cè)跨瀏覽器不兼容問(wèn)題，目前工業(yè)界和學(xué)術(shù)界已經(jīng)提出了很多的方法和工具[2-4]，但不足在于僅考慮了用戶交互事件，而忽略了瀏覽器內(nèi)部事件，如隨機(jī)數(shù)、日期、定時(shí)器和XHR等，無(wú)法保證在不同的瀏覽器上有相同的執(zhí)行，導(dǎo)致檢測(cè)結(jié)果產(chǎn)生大量的誤報(bào)或漏報(bào).

2) 設(shè)計(jì)了一種增量式的XBI檢測(cè)算法，僅檢測(cè)事件重放后發(fā)生變化的元素節(jié)點(diǎn)，避免了重復(fù)的XBI檢測(cè)，提高了檢測(cè)效率；

3) 實(shí)驗(yàn)結(jié)果表明X-CHECK能夠準(zhǔn)確、高效地檢測(cè)各種XBI，并為開發(fā)者診斷和定位XBI提供了支持.

1 相關(guān)工作

Web應(yīng)用測(cè)試可分為功能測(cè)試和性能測(cè)試[5]，在性能測(cè)試方面，文獻(xiàn)[6]提出了一種基于建模的方法，跨瀏覽器兼容性檢測(cè)屬于功能測(cè)試.為自動(dòng)檢測(cè)跨瀏覽器兼容性問(wèn)題，已有方法[1,7-9]可以分為頁(yè)面抓取與頁(yè)面比較(crawl and compare)2個(gè)階段.頁(yè)面抓取階段，在不同的瀏覽器上對(duì)Web應(yīng)用進(jìn)行自動(dòng)的探測(cè)，并抽取頁(yè)面相關(guān)數(shù)據(jù)，包括DOM樹信息、布局信息以及頁(yè)面截圖信息；頁(yè)面比較階段，通過(guò)對(duì)收集的頁(yè)面數(shù)據(jù)進(jìn)行比較，以發(fā)現(xiàn)各種跨瀏覽器的不一致問(wèn)題.此外，工業(yè)界也提供了Web應(yīng)用跨瀏覽器兼容性檢測(cè)工具和服務(wù)，典型的包括：Browserbite[2]，MogoTest[3]，Browsera[4]等.已有這些方法和工具由于沒(méi)有考慮瀏覽器內(nèi)部的非確定性事件，導(dǎo)致檢測(cè)結(jié)果出現(xiàn)漏報(bào)和誤報(bào).

Mugshot[10]是一套針對(duì)客戶端JavaScript應(yīng)用的調(diào)試工具，核心是用標(biāo)準(zhǔn)的JavaScript實(shí)現(xiàn)對(duì)非確定性事件的錄制和重放.Jalangi[11]是一個(gè)針對(duì)JavaScript語(yǔ)言的選擇性捕獲重放框架，用戶選擇關(guān)注的代碼片段后，工具可對(duì)該代碼片段進(jìn)行錄制和重放，但方法開銷較大，不適合對(duì)部署發(fā)布后的Web應(yīng)用進(jìn)行在線監(jiān)測(cè).JSBench[12]使用捕獲重放技術(shù)創(chuàng)建JavaScript的基準(zhǔn)測(cè)試，用以評(píng)估基于JavaScript的Web應(yīng)用的性能.

不同于上述研究，Timelapse[13]受虛擬機(jī)捕獲重放技術(shù)啟發(fā)，通過(guò)對(duì)Webkit進(jìn)行插裝以支持捕獲重放各種非確定性事件，目前已集成到Safari的調(diào)試工具中.WaRR[14]是一個(gè)高保真的Web應(yīng)用捕獲重放工具，事件捕獲功能嵌入到Webkit中，支持捕捉各種DOM事件，如單擊、按鍵等.由于Webkit禁止對(duì)JavaScript事件的特定屬性進(jìn)行更改，重放時(shí)需要在特定開發(fā)的瀏覽器上模擬用戶交互.

2 總體方法

1) 事件序列收集.捕獲Web應(yīng)用在參考瀏覽器平臺(tái)運(yùn)行時(shí)產(chǎn)生的各種非確定性事件，包括用戶事件，如點(diǎn)擊、按鍵;瀏覽器內(nèi)部事件，如定時(shí)器、隨機(jī)數(shù)的產(chǎn)生.詳見(jiàn)2.1節(jié).

2) 遠(yuǎn)程重放.根據(jù)用戶選擇的被測(cè)瀏覽器平臺(tái)，通過(guò)遠(yuǎn)程控制器在不同的瀏覽器平臺(tái)重放事件序列，詳見(jiàn)2.2節(jié).

3) 頁(yè)面數(shù)據(jù)收集.在重放事件時(shí)，收集當(dāng)前頁(yè)面的信息，包括變化的DOM節(jié)點(diǎn)信息、節(jié)點(diǎn)布局信息和頁(yè)面截圖信息，詳見(jiàn)2.3節(jié).

4) 兼容性檢測(cè)和錯(cuò)誤報(bào)告.采用增量式的檢測(cè)算法對(duì)采集到的數(shù)據(jù)進(jìn)行XBI檢測(cè)，并生成兼容性問(wèn)題報(bào)告，詳見(jiàn)2.4節(jié).

Fig. 1 Approach overview圖1 方法總體流程圖

2.1 事件序列收集

為了支持跨瀏覽器的事件捕獲和重放，X-CHECK采用了Mugshot的方法，使用JavaScript語(yǔ)言實(shí)現(xiàn)事件的捕獲和重放.

目前，X-CHECK支持3類非確定性事件，包括DOM事件(如load、鍵盤事件、鼠標(biāo)事件、DOM-ContentLoaded、滾輪、resize)、XHR事件和定時(shí)器事件(如函數(shù)setTimeout，setInterval).除了這些事件，X-CHECK還捕獲了非確定性的函數(shù)調(diào)用，如函數(shù)random和Date.此外，X-CHECK擴(kuò)展了Mugshot，能夠?qū)Χ囗?yè)面的Web應(yīng)用進(jìn)行事件捕獲重放.下面介紹在X-CHECK中如何支持上述功能.

關(guān)于DOM事件，X-CHECK采用DOM level 2模型來(lái)捕獲用戶交互事件(目前大多數(shù)主流瀏覽器都支持該模型).該模型定義了一個(gè)3階段的事件處理模型：捕獲—目標(biāo)—冒泡(capturing-target-bubbling).在捕獲階段，瀏覽器將事件交由window對(duì)象和document對(duì)象處理后，沿DOM樹根節(jié)點(diǎn)一直向子節(jié)點(diǎn)傳遞，直到目標(biāo)節(jié)點(diǎn).在目標(biāo)節(jié)點(diǎn)處理完事件后，進(jìn)入冒泡階段，事件反向由目標(biāo)節(jié)點(diǎn)向祖先節(jié)點(diǎn)依次處理.X-CHECK通過(guò)在window對(duì)象上注冊(cè)事件捕獲處理程序，可以在該事件被其他節(jié)點(diǎn)處理之前記錄各種DOM事件.

DOM事件主要是用戶事件，這類事件的捕獲方法如本節(jié)所述，僅需通過(guò)API注冊(cè)感興趣事件的捕獲處理程序即可.對(duì)于瀏覽器內(nèi)部事件，因?yàn)闆](méi)有類似DOM事件的接口進(jìn)行事件捕獲，X-CHECK中重寫了這類事件的注冊(cè)接口和回調(diào)函數(shù)，以捕獲瀏覽器內(nèi)部事件.下面分別介紹了定時(shí)器內(nèi)部事件和XHR內(nèi)部事件的收集實(shí)現(xiàn).

定時(shí)器事件使用函數(shù)setTimeout，setInterval注冊(cè)回調(diào)事件，該事件在函數(shù)setTimeout中被觸發(fā)1次，在函數(shù)setInterval中每隔一段時(shí)間被觸發(fā)1次，直至該定時(shí)器被取消.為捕獲定時(shí)器事件，X-CHECK重寫函數(shù)setTimeout和setInterval.在重寫后的函數(shù)里封裝回調(diào)事件，封裝后的回調(diào)事件在被觸發(fā)時(shí)會(huì)先保存該事件的信息，然后再觸發(fā)原始的事件.

XHR(XMLHttpRequest)對(duì)象可以在不向服務(wù)器提交整個(gè)頁(yè)面的情況下，實(shí)現(xiàn)頁(yè)面的局部更新.readyState屬性記錄了XHR的狀態(tài)，該屬性從0開始遞增變化，直到接收到完整的響應(yīng)時(shí)變?yōu)?.應(yīng)用在函數(shù)onreadystatechange上注冊(cè)1個(gè)回調(diào)函數(shù)以處理響應(yīng)消息，該函數(shù)在每次readyState變化時(shí)都會(huì)被調(diào)用.捕獲XHR事件的方法和定時(shí)器事件類似，X-CHECK封裝了XHR的構(gòu)造函數(shù)，通過(guò)為onreadystatechange注冊(cè)事件捕獲函數(shù)記錄XHR對(duì)象的狀態(tài).X-CHECK還封裝了XHR的函數(shù)sendopen，記錄請(qǐng)求內(nèi)容和函數(shù)sendopen的返回值.為緩存響應(yīng)消息，X-CHECK重寫了變量responseXML和responseText的setter及getter方法.

非確定性函數(shù)包括Date和random，通過(guò)調(diào)用Date的構(gòu)造函數(shù)獲得當(dāng)前時(shí)間，調(diào)用函數(shù)Math.random生成1個(gè)隨機(jī)數(shù).為了捕獲這2個(gè)非確定性函數(shù)的調(diào)用，X-CHECK封裝了Date的構(gòu)造函數(shù)和函數(shù)random，用來(lái)記錄原始函數(shù)的返回值.

復(fù)雜的Web應(yīng)用通常包括多個(gè)頁(yè)面，為支持多頁(yè)面Web應(yīng)用的捕獲和重放，當(dāng)用戶訪問(wèn)Web應(yīng)用時(shí)，X-CHECK會(huì)自動(dòng)生成1個(gè)唯一的會(huì)話id，在該應(yīng)用的所有頁(yè)面中都使用統(tǒng)一的會(huì)話id.此外，X-CHECK還為當(dāng)前訪問(wèn)的頁(yè)面生成1個(gè)頁(yè)面id(初始化為0)，當(dāng)頁(yè)面跳轉(zhuǎn)時(shí)，利用函數(shù)beforeonunload，保存當(dāng)前頁(yè)面捕獲的事件序列，并增加頁(yè)面id的值以記錄在新頁(yè)面中捕獲的事件.

2.2 遠(yuǎn)程重放

在遠(yuǎn)程重放步驟中，捕獲的事件序列將在不同的瀏覽器環(huán)境中重放.為了實(shí)現(xiàn)遠(yuǎn)程重放，X-CHECK需要在被測(cè)瀏覽器平臺(tái)上安裝重放客戶端，用以接收服務(wù)器的重放命令，給Web應(yīng)用注入重放模塊，并在瀏覽器中重放事件序列.

在重放事件序列前，X-CHECK重寫了函數(shù)setIntervalsetTimeout，random，XHR，Date.重寫的函數(shù)setIntervalsetTimeout會(huì)記錄注冊(cè)的回調(diào)函數(shù)，當(dāng)重放定時(shí)器事件時(shí)，將會(huì)按順序執(zhí)行回調(diào)函數(shù).對(duì)于XHR事件，X-CHECK將直接從捕獲日志里獲取函數(shù)sendopen的返回值和應(yīng)答內(nèi)容，而無(wú)需跟服務(wù)器進(jìn)行交互.當(dāng)Web應(yīng)用調(diào)用函數(shù)random和Date時(shí)，X-CHECK將直接從日志中返回相應(yīng)的值.

為支持多頁(yè)面Web應(yīng)用的重放，X-CHECK向函數(shù)beforeonunload中注冊(cè)了回調(diào)函數(shù)用來(lái)在頁(yè)面跳轉(zhuǎn)時(shí)增加頁(yè)面id.每到達(dá)1個(gè)新頁(yè)面，注入的重放模塊會(huì)向服務(wù)器請(qǐng)求新頁(yè)面的錄制日志.

2.3 頁(yè)面數(shù)據(jù)收集

重放事件的過(guò)程中，X-CHECK同時(shí)收集當(dāng)前的頁(yè)面信息，包括DOM節(jié)點(diǎn)信息、節(jié)點(diǎn)布局信息和頁(yè)面截圖.目前主流的Web 2.0應(yīng)用多采用Ajax技術(shù)與服務(wù)端進(jìn)行通信，并且盡可能將計(jì)算在客戶端完成，因此用戶事件通常只會(huì)導(dǎo)致頁(yè)面的局部信息發(fā)生更新.如果在每個(gè)事件發(fā)生時(shí)都采集所有的DOM節(jié)點(diǎn)和布局信息，就會(huì)收集到很多的冗余信息，這不僅會(huì)導(dǎo)致冗余的兼容性問(wèn)題報(bào)告，還會(huì)消耗瀏覽器的內(nèi)存資源.

算法1. 頁(yè)面數(shù)據(jù)收集.

輸入：事件序列L；

輸出：頁(yè)面數(shù)據(jù)列表C.

① 初始化C=?；

② fore∈Ldo

③ 重放事件e；

④S=頁(yè)面截圖；

⑤ ife是load事件then

⑥D(zhuǎn)=所有節(jié)點(diǎn)信息；

⑦G(id，坐標(biāo))=D中節(jié)點(diǎn)坐標(biāo)；

⑧ 將e，D，S加入C；

⑨ 啟動(dòng)Mutation Observer；

為了解決上述問(wèn)題，X-CHECK在重放每個(gè)事件后，僅收集變化的DOM節(jié)點(diǎn)信息和布局信息.算法1描述了X-CHECK在重放時(shí)的頁(yè)面數(shù)據(jù)收集方法.重放事件后(行③)，先對(duì)當(dāng)前頁(yè)面進(jìn)行截圖(行④).如果是load事件，收集所有的節(jié)點(diǎn)信息(行⑥)并創(chuàng)建id，坐標(biāo)映射表(行⑦)，id是由X-CHECK為每個(gè)節(jié)點(diǎn)分配的，接著啟動(dòng)Mutation Observer(行⑨)，用來(lái)觀察DOM節(jié)點(diǎn)的變化.Mutation Observer是W3C的一個(gè)標(biāo)準(zhǔn)[15]，通過(guò)調(diào)用該接口，當(dāng)DOM樹變動(dòng)時(shí)，可以得到變動(dòng)節(jié)點(diǎn)的集合(行)，目前主流的瀏覽器均支持該接口.

然而，Mutation Observer只能捕獲DOM樹中變化的節(jié)點(diǎn)，不能捕獲坐標(biāo)變化的節(jié)點(diǎn).在某些場(chǎng)景下，節(jié)點(diǎn)信息的變化可能導(dǎo)致其鄰近節(jié)點(diǎn)的坐標(biāo)變化，鄰近節(jié)點(diǎn)包括父節(jié)點(diǎn)和兄弟節(jié)點(diǎn).如圖2所示，當(dāng)1個(gè)新的課程添加到列表中，列表的高度會(huì)增加，即它的父節(jié)點(diǎn)坐標(biāo)受到了影響，而Mutation Observer只能捕獲到新加入的節(jié)點(diǎn)(1個(gè)tr元素，2個(gè)td元素).為了采集坐標(biāo)變化的節(jié)點(diǎn)，算法1調(diào)用函數(shù)extractCoordNodes獲取坐標(biāo)變化的DOM節(jié)點(diǎn)(行).所有收集到的數(shù)據(jù)保存在列表C中(行⑧和)，這些數(shù)據(jù)用于進(jìn)行Web應(yīng)用的跨瀏覽器兼容性檢測(cè).

Fig. 2 Selected courses圖2 已選課程列表

算法2. 抽取坐標(biāo)變化的節(jié)點(diǎn).

輸入：變動(dòng)節(jié)點(diǎn)列表M和映射表G；

輸出：坐標(biāo)變化的節(jié)點(diǎn)列表N.

① 初始化P=?,N=?；

② forn∈Mdo

③ 更新n在G中的坐標(biāo)；

④p=findNotAffectedParent(n，G)；

⑤ 將p加入P；

⑥ end for

⑦Q=findCommonParent(P)；

⑧ forq∈Qdo

⑨L=getCoordChangeChilds(q)；

⑩ 將L加入N；

算法2描述了如何計(jì)算得到坐標(biāo)變化的節(jié)點(diǎn).X-CHECK為每個(gè)節(jié)點(diǎn)添加唯一id，并維護(hù)1個(gè)全局的映射表G=(id，坐標(biāo)).對(duì)于每個(gè)變化的節(jié)點(diǎn)，先在G中更新它們的坐標(biāo)(行③)，然后調(diào)用函數(shù)findNotAffectedParent從該節(jié)點(diǎn)沿DOM樹向上找到1個(gè)坐標(biāo)沒(méi)有變化的祖先節(jié)點(diǎn)p，并保存在P中(行④～⑤).處理完M中每個(gè)節(jié)點(diǎn)，調(diào)用函數(shù)findCommonParent對(duì)P中的節(jié)點(diǎn)進(jìn)行合并保存在Q中(行⑦)，合并條件為當(dāng)1個(gè)節(jié)點(diǎn)為另一個(gè)節(jié)點(diǎn)的祖先節(jié)點(diǎn)時(shí)，保存祖先節(jié)點(diǎn).對(duì)Q中的每個(gè)節(jié)點(diǎn)再調(diào)用函數(shù)getCoordChangeChilds得到所有坐標(biāo)變化的子節(jié)點(diǎn)L，加入到N中(行⑨～⑩)，在遍歷子節(jié)點(diǎn)時(shí)，更新G中已遍歷的節(jié)點(diǎn)坐標(biāo).該算法先向上查找父節(jié)點(diǎn)，再向下查找變化的子節(jié)點(diǎn)，是為了不僅能收集到坐標(biāo)變化的父節(jié)點(diǎn)，也能收集到由于某一節(jié)點(diǎn)信息變動(dòng)而影響了坐標(biāo)的兄弟節(jié)點(diǎn)和子節(jié)點(diǎn).

2.4 增量式兼容性檢測(cè)算法

基于采集到的數(shù)據(jù)，X-CHECK提出了一種增量式的檢測(cè)算法(見(jiàn)算法3)，該算法只檢測(cè)變化的節(jié)點(diǎn)，算法輸入是在2個(gè)不同瀏覽器中收集到的數(shù)據(jù)C1和C2，輸出是一系列的XBI.C1，C2的結(jié)構(gòu)是{t0，t1，…，tm}，m代表頁(yè)面的編號(hào).每個(gè)ti包含1個(gè)事件列表e0，e1，…，em，m代表事件的序號(hào).如果ej是load事件，則ej中含有所有的DOM節(jié)點(diǎn)D以及截圖S；否則ej包含變化的節(jié)點(diǎn)M，坐標(biāo)改變的節(jié)點(diǎn)N和截圖S；如果M=?，則N=?,S=?.

算法3. 增量式檢測(cè)算法.

輸入：2個(gè)瀏覽器的頁(yè)面數(shù)據(jù)C1，C2；

輸出：兼容性問(wèn)題列表X.

⑤ end if

2.4.1 行為XBI檢測(cè)

為了檢測(cè)行為的兼容性問(wèn)題，對(duì)于重放的事件序列考慮3種情況：

1) 重放的頁(yè)面數(shù)不同(行③).例如某個(gè)頁(yè)面的最后一個(gè)事件失效，沒(méi)有讓應(yīng)用跳轉(zhuǎn)到下個(gè)頁(yè)面，就會(huì)導(dǎo)致最終重放得到的頁(yè)面數(shù)不同.

2.4.2 結(jié)構(gòu)XBI檢測(cè)

X-CHECK的結(jié)構(gòu)XBI檢測(cè)算法是基于X-PERT提出的AG(alignment graph)，AG用來(lái)描述頁(yè)面元素間的2種結(jié)構(gòu)關(guān)系，分別是父子的包含關(guān)系和同一父節(jié)點(diǎn)的兄弟關(guān)系.圖3是table元素的AG示例，實(shí)線表示包含關(guān)系，虛線表示兄弟關(guān)系.

Fig. 3 An example of AG圖3 AG的例子

算法4.diffStructure.

輸入：不同的瀏覽器同一事件e1,e2；

輸出：結(jié)構(gòu)XBI列表S.

① ife1和e2是load事件then

②D1=e1的所有節(jié)點(diǎn)；

③D2=e2的所有節(jié)點(diǎn)；

④A1=buildAG(D1)；

⑤A2=buildAG(D2)；

⑥Lm=matchDom(D1,D2)；

⑦S=compareAG(A1,A2,Lm)；

⑧ else

⑨N1=e1坐標(biāo)變化的節(jié)點(diǎn)；

⑩N2=e2坐標(biāo)變化的節(jié)點(diǎn)；

算法4詳細(xì)地描述了增量式檢測(cè)算法中的結(jié)構(gòu)XBI檢測(cè)函數(shù)diffStructure的實(shí)現(xiàn)，該算法比較了2個(gè)AG的差異.對(duì)于load事件，首先得到頁(yè)面DOM樹D1和D2，接著調(diào)用函數(shù)buildAG為DOM樹構(gòu)造AG圖A1和A2(行②～⑤).在比較2個(gè)AG圖(A1,A2)前，首先調(diào)用函數(shù)matchDom對(duì)D1和D2進(jìn)行匹配，匹配結(jié)果存儲(chǔ)在匹配表Lm里(行⑥)，再調(diào)用函數(shù)compareAG對(duì)相匹配節(jié)點(diǎn)的結(jié)構(gòu)進(jìn)行比較，得到結(jié)構(gòu)XBI存在S中(行⑦).

2.4.3 內(nèi)容XBI檢測(cè)

3 工具實(shí)現(xiàn)

基于上述方法實(shí)現(xiàn)了Web應(yīng)用跨瀏覽器兼容性檢測(cè)工具——X-CHECK.采用代理服務(wù)器WebScarab[16]攔截Web應(yīng)用的HTTP請(qǐng)求和應(yīng)答，當(dāng)返回消息的類型是html時(shí)插入捕獲重放庫(kù).此外，代理服務(wù)器還將緩存所有應(yīng)答，保證在重放時(shí)訪問(wèn)相同的內(nèi)容.

遠(yuǎn)程重放客戶端接收服務(wù)器的指令，重放服務(wù)器指定的事件序列.重放客戶端可以作為瀏覽器的擴(kuò)展也可以作為一個(gè)守護(hù)進(jìn)程.在重放過(guò)程中，不僅要收集變化的節(jié)點(diǎn)數(shù)據(jù)，包括坐標(biāo)變化的節(jié)點(diǎn)，還要在每次頁(yè)面變化時(shí)對(duì)頁(yè)面進(jìn)行截圖，我們選擇Selenium[17]在重放過(guò)程中對(duì)頁(yè)面進(jìn)行截圖.Selenium支持大多數(shù)主流的瀏覽器，如IE，F(xiàn)irefox，Chrome，Safari.X-CHECK基于Selenium實(shí)現(xiàn)了重放客戶端，由重放客戶端調(diào)用重放庫(kù)中的方法重放事件，并根據(jù)重放結(jié)果確定頁(yè)面是否發(fā)生變化，如果頁(yè)面改變則調(diào)用函數(shù)getScreenshotAs獲得頁(yè)面截圖.

X-CHECK采用OpenCV[18]來(lái)比較2個(gè)元素的圖片的相似性，首先根據(jù)元素坐標(biāo)從頁(yè)面截圖中得到元素的圖片，然后轉(zhuǎn)換為直方圖，最后采用相關(guān)系數(shù)的方法比較2個(gè)元素的圖片相似性.

4 實(shí)驗(yàn)評(píng)估

為了評(píng)估所提出的跨瀏覽器兼容性測(cè)試方法的有效性，我們進(jìn)行了一系列實(shí)驗(yàn)，實(shí)驗(yàn)主要關(guān)注2個(gè)問(wèn)題：

1) 增量式兼容性檢測(cè)算法的效率；

2) X-CHECK的檢測(cè)結(jié)果與已有方法的比較.

本節(jié)將介紹實(shí)驗(yàn)案例、所采用的實(shí)驗(yàn)方法和實(shí)驗(yàn)結(jié)果.

4.1 實(shí)驗(yàn)案例

表1列出了實(shí)驗(yàn)中用到的6個(gè)Web應(yīng)用，前3個(gè)是使用HTML5，JavaScript，CSS3開發(fā)的單頁(yè)面游戲.其中，Annex是2個(gè)玩家對(duì)抗的圍棋游戲，CountBeads是提高小孩數(shù)數(shù)能力的游戲，Rabbit是類似于掃雷的游戲；另外3個(gè)為多頁(yè)面應(yīng)用.其中，Organizer是一個(gè)開源的個(gè)人任務(wù)管理的應(yīng)用，Roundcube是一個(gè)基于瀏覽器的IMAP客戶端，ISCAS是中國(guó)科學(xué)院軟件研究所的官網(wǎng).表1顯示了每個(gè)頁(yè)面DOM節(jié)點(diǎn)數(shù)的最小值、最大值和平均值，這些數(shù)值表明單個(gè)頁(yè)面的復(fù)雜程度，節(jié)點(diǎn)數(shù)越大表明頁(yè)面越復(fù)雜.

Table 1 Web Application

4.2 實(shí)驗(yàn)方法

針對(duì)問(wèn)題1，我們將X-CHECK與X-PERT比較以評(píng)估增量式檢測(cè)算法的效率，實(shí)驗(yàn)主要關(guān)注檢測(cè)結(jié)構(gòu)XBI.X-PERT方法的核心思想是在每個(gè)事件后采集完整的DOM樹和坐標(biāo)信息，接著構(gòu)造AG并進(jìn)行結(jié)構(gòu)XBI檢測(cè).為了公平比較，我們修改X-CHECK實(shí)現(xiàn)了X-PERT的結(jié)構(gòu)XBI檢測(cè)方法，在每個(gè)引起DOM節(jié)點(diǎn)變化的事件重放后采集完整的DOM樹和坐標(biāo)信息，并直接構(gòu)造AG.結(jié)構(gòu)XBI檢測(cè)所花費(fèi)的時(shí)間包括節(jié)點(diǎn)匹配、AG生成和匹配節(jié)點(diǎn)結(jié)構(gòu)比較3部分.針對(duì)問(wèn)題2，由于X-PERT代表目前最新的兼容性檢測(cè)技術(shù)，我們將X-CHECK與其進(jìn)行比較以評(píng)估X-CHECK的檢測(cè)能力，該實(shí)驗(yàn)的環(huán)境配置如表2所示:

Table 2 Platform Configuration

此外，為得到重放用的事件序列，我們招募了2名沒(méi)有參與該項(xiàng)目的學(xué)生使用參考瀏覽器平臺(tái)訪問(wèn)6個(gè)Web應(yīng)用，并在此過(guò)程中由事件捕獲模塊記錄各種非確定性事件.

4.3 實(shí)驗(yàn)結(jié)果

針對(duì)問(wèn)題1，表3列出了X-CHECK和X-PERT進(jìn)行結(jié)構(gòu)XBI檢測(cè)時(shí)所花費(fèi)的時(shí)間、收集的日志文件大小以及平均每個(gè)頁(yè)面捕獲到的事件數(shù).根據(jù)實(shí)驗(yàn)結(jié)果可知，X-CHECK在檢測(cè)效率方面遠(yuǎn)遠(yuǎn)好于X-PERT，并且采集的頁(yè)面數(shù)據(jù)小于X-PERT.例如對(duì)于CountBeads，X-PERT收集到的頁(yè)面數(shù)據(jù)有27.6 MB，檢測(cè)結(jié)構(gòu)XBI需要花費(fèi)34 s，而X-CHECK收集到的數(shù)據(jù)只有1 MB，所提出的增量式檢測(cè)算法檢測(cè)結(jié)構(gòu)XBI只需0.5 s.

表4、表5分別列出了 X-CHECK和X-PERT詳細(xì)的檢測(cè)結(jié)果，表格各項(xiàng)分別表示應(yīng)用名稱、行為XBI、結(jié)構(gòu)XBI、內(nèi)容XBI、總的XBI、測(cè)試平臺(tái)和參考平臺(tái)，其中內(nèi)容XBI又分為文本XBI和可視XBI，各類XBI有TP和FP兩個(gè)數(shù)值，TP表示工具檢測(cè)到的XBI與人為觀察到的XBI一致的數(shù)目，F(xiàn)P表示工具檢測(cè)到的但人為觀察不到的XBI數(shù)目.Annex，CountBeads，Rabbit能夠在Safari正常地呈現(xiàn)和使用，所以選擇該瀏覽器為參考瀏覽器平臺(tái)；Organizer和Roundcube在Chrome和Safari上都能正常地呈現(xiàn)和使用，實(shí)驗(yàn)中選取Chrome作為參考瀏覽器平臺(tái)，并且沒(méi)有將Safari作為待測(cè)瀏覽器平臺(tái)；ISCAS在Firefox中能正常地呈現(xiàn)，實(shí)驗(yàn)中選擇Firefox作為參考瀏覽器平臺(tái).

Table 3 Structure XBI Detection Time of X-CHECK and X-PERT

Table 4 X-CHECK’s Results

Table 5 X-PERT+’s Resuls

表6列出了X-CHECK和X-PERT的XBI檢測(cè)結(jié)果比較，表格各項(xiàng)分別表示應(yīng)用名稱、人工找到的XBI以及2個(gè)工具檢測(cè)得到的結(jié)果.從實(shí)驗(yàn)結(jié)果可以看出，X-CHECK在檢測(cè)結(jié)果的準(zhǔn)確性和召回率方面都要高于X-PERT.例如對(duì)于Roundcube，X-CHECK只有非常少的可視內(nèi)容檢測(cè)的誤報(bào)，而X-PERT誤報(bào)數(shù)大于1 000，這是因?yàn)橛脩粼谑褂迷搼?yīng)用時(shí)改變了Roundcube的樣式模板，而X-PERT沒(méi)有緩存錄制過(guò)程中的各個(gè)頁(yè)面，所以當(dāng)再次訪問(wèn)該應(yīng)用時(shí)樣式模板是不同的，導(dǎo)致誤報(bào)了大量的結(jié)構(gòu)XBI.CountBeads和Rabbit應(yīng)用都使用了大量的函數(shù)random和定時(shí)器，由于X-PERT沒(méi)有捕獲函數(shù)random的返回值以及定時(shí)器事件，每次訪問(wèn)應(yīng)用時(shí)的行為和外觀都不同，導(dǎo)致檢測(cè)結(jié)果出現(xiàn)大量誤報(bào).綜上所述，我們能夠得到這樣的結(jié)論：對(duì)于上述這些應(yīng)用，與目前最新的跨瀏覽器兼容性檢測(cè)技術(shù)相比，X-CHECK提高了XBI檢測(cè)結(jié)果的準(zhǔn)確性，避免產(chǎn)生大量的誤報(bào).

Table 6 X-CHECK’s Results Comparison with X-PERT+

5 結(jié)束語(yǔ)

由于瀏覽器平臺(tái)的多樣性和實(shí)現(xiàn)的差異性，Web應(yīng)用的跨瀏覽器兼容性已經(jīng)成為一個(gè)突出問(wèn)題.本文提出了一種基于捕獲重放技術(shù)的跨瀏覽器兼容性檢測(cè)方法，保證了Web應(yīng)用在不同的瀏覽器環(huán)境中有相同的執(zhí)行，提高了檢測(cè)結(jié)果的準(zhǔn)確性.

為提高檢測(cè)效率，X-CHECK使用了目前主流瀏覽器都支持Mutation Observer接口采集每個(gè)事件后變化的DOM節(jié)點(diǎn).為兼容不支持Mutation Observer的瀏覽器(如低版本的IE)，可在重放事件后，收集所有DOM節(jié)點(diǎn)的數(shù)據(jù)，并比較事件重放前后收集的DOM節(jié)點(diǎn)數(shù)據(jù)，計(jì)算每個(gè)事件引起的變化的DOM節(jié)點(diǎn)，再采用增量式檢測(cè)算法進(jìn)行檢測(cè).我們將在今后的工作中進(jìn)一步完善該方法，并考慮與Web應(yīng)用探測(cè)工具相結(jié)合，在頁(yè)面探測(cè)過(guò)程中捕獲各種非確定性事件以提高工具的自動(dòng)化程度.

[1]Choudhary S R, Prasad M R, Orso A. X-PERT: Accurate identification of cross-browser issues in Web applications[C]Proc of the 35th Int Conf on Software Engineering. Piscataway, NJ: IEEE, 2013: 702-711

[2]Semenenko N, Dumas M, Saar T. Browserbite: Accurate cross-browser testing via machine learning over image features[C]Proc of the 29th Int Conf on Software Maintenance. Piscataway, NJ: IEEE, 2013: 528-531

[3]Mogoterra INC. Mogotest[CPOL]. 2009(2014-09-15) [2016-03-17]. https:bitbucket.orgmogotest

[4]Browsera. Browsera[CPOL]. 2009(2016-03-16) [2016-03-17]. http:www.browsera.com

[5]Deng Xiaopeng, Xing Chunxiao, Cai Lianhong. Progress in testing for Web applications[J]. Journal of Computer Research and Development, 2007, 44(8): 1273-1283 (in Chinese)(鄧小鵬, 邢春曉, 蔡蓮紅. Web應(yīng)用測(cè)試技術(shù)進(jìn)展[J]. 計(jì)算機(jī)研究與發(fā)展, 2007, 44(8): 1273-1283)

[6]Ming Zhong, Yin Jianfei, Yang Wei, et al. A Web performance testing framework and its mixed performance modeling process[J]. Journal of Computer Research and Development, 2010, 47(7): 1192-1200 (in Chinese)(明仲, 尹劍飛, 楊巍, 等. 一種Web系統(tǒng)性能測(cè)試框架及其混合建模過(guò)程[J]. 計(jì)算機(jī)研究與發(fā)展, 2010, 47(7): 1192-1200)

[7]Choudhary S R, Prasad M R, Orso A. Crosscheck: Combining crawling and differencing to better detect cross-browser incompatibilities in Web applications[C]Proc of the 5th Int Conf on Verification and Validation. Piscataway, NJ: IEEE, 2012: 171-180

[8]Choudhary S R, Versee H, Orso A. WEBDIFF: Automated identification of cross-browser issues in Web applications[C]Proc of the 26th Int Conf on Software Maintenance. Piscataway, NJ: IEEE, 2010: 1-10 [2016-12-01]. http:dl.acm.orgcitation.cfm?id=1913287

[9]Mesbah A, Prasad M R. Automated cross-browser compatibility testing[C]Proc of the 33rd Int Conf on Software Engineering. New York: ACM, 2011: 561-570

[10]Mickens J W, Elson J, Howell J. Mugshot: Deterministic capture and replay for JavaScript applications[C]Proc of the 7th USENIX Conf on Networked Systems Design and Implementation. Berkeley, CA: USENIX Association, 2010: 159-174

[11]Sen K, Kalasapur S, Brutch T, et al. Jalangi: A selective record-replay and dynamic analysis framework for JavaScript[C]Proc of the 9th Joint Meeting on Foundations of Software Engineering. New York: ACM, 2013: 488-498

[12]Richards G, Gal A, Eich B, et al. Automated construction of JavaScript benchmarks[J]. ACM SIGPLAN Notices, 2011, 46(10): 677-694

[13]Burg B, Bailey R, Ko A J, et al. Interactive recordreplay for Web application debugging[C]Proc of the 26th Annual ACM Symp on User Interface Software and Technology. New York: ACM, 2013: 473-484

[14]Andrica S, Candea G. WaRR: A tool for high-fidelity Web application record and replay[C]Proc of the 41st Int Conf on Dependable Systems & Networks. Piscataway, NJ: IEEE, 2011: 403-410

[15]W3C. DOM4 specification-working draft[OL]. [2016-03-17]. https:dom.spec.whatwg.org.

[16]OWASP. WebScarab[OL]. [2016-03-17]. https:github.comOWASPOWASP-WebScarab

[17]ThoughtWorks. SeleniumHQ[OL].[2016-03-17]. http:www.seleniumhq.org.

[18]Garage W. OpenCV[OL]. [2016-03-17]. http:opencv.org

Wu Guoquan, born in 1979. PhD and associate professor of the Institute of Software, Chinese Academy of Sciences. Member of CCF. His main research interests include network distributed computing and software engineering.

He Meimei, born in 1990. Master. Her main research interests include network distributed computing and software engineering(hemeimei13@otcaix.iscas.ac.cn).

Wei Jun, born in 1970. PhD, professor and PhD supervisor of the Institute of Software, Chinese Academy of Sciences. Senior member of CCF. His main research interests include network distributed computing and software engineering.

Zhong Hua, born in 1971. PhD, professor and PhD supervisor of the Institute of Software, Chinese Academy of Sciences. Senior member of CCF. His main research interests include network distributed computing and software engineering.

Huang Tao, born in 1965. PhD, professor and PhD supervisor of the Institute of Software, Chinese Academy of Sciences. Senior member of CCF. His main research interests include network distributed computing and software engineering.

Cross-Browser Issues Detection in JavaScript-Based Web Applications Based on RecordReplay

Wu Guoquan1,2,3, He Meimei1,2,3, Wei Jun1,2,3, Zhong Hua1, and Huang Tao1,2

1(TechnologyCenterofSoftwareEngineering,InstituteofSoftware,ChineseAcademyofSciences,Beijing100190)2(StateKeyLaboratoryofComputerScience(InstituteofSoftware,ChineseAcademyofSciences),Beijing100190)3(UniversityofChineseAcademyofSciences,Beijing100049)

With the advent of Web 2.0 application, and the increasing number of browsers and platforms on which the Web applications can be executed, XBI (cross browser incompatibilities) is becoming a serious problem for organizations to develop Web based software with good user experience. Although some techniques and tools have been proposed to identify XBI, they cannot assure the same execution when Web application is rendered in different platforms as only user interactions events are considered, which may result in generating both false positives and false negatives. To address this limitation, by leveraging existing recordreplay technique, this paper develops X-CHECK, a novel cross browser incompatibilities testing approach and tool, which can faithfully reproduce a previous execution and facilitate XBI detection by directly replaying the captured event trace in different platforms. The same execution in different platforms improves the accuracy in detecting XBI. By observing DOM mutations during the replay, X-CHECK also designs an incremental cross-browser detection algorithm, which only detects mutational content of Web page. This algorithm improves the performance in detecting XBI. The empirical evaluation shows that X-CHECK is effective, efficient and improves on the state of the art, and can provide useful support to developers for diagnosis and (eventually) elimination of XBI.

cross browser compatibility; Web application; JavaScript; recordreplay; testing

2016-12-09；

2016-04-06

國(guó)家自然科學(xué)基金項(xiàng)目(61472407)；國(guó)家“九七三”重點(diǎn)基礎(chǔ)研究發(fā)展計(jì)劃基金項(xiàng)目(2015CB352201)；國(guó)家“八六三”高技術(shù)研究發(fā)展計(jì)劃基金項(xiàng)目(2013AA041301)；國(guó)家科技支撐計(jì)劃基金項(xiàng)目(2015BAH55F02,2015BAF05B01) This work was supported by the National Natural Science Foundation of China (61472407), the National Basic Research Program of China (973 Program) (2015CB352201), the National High Technology Research and Development Program of China (863 Program) (2013AA041301), and the National Key Technology Research and Development Program of China (2015BAH55F02, 2015BAF05B01).

魏峻(wj@otcaix.iscas.ac.cn)

TP311.5