基于捕獲重放的Web應用跨瀏覽器兼容性檢測

吳國全 何妹妹 魏 峻 鐘 華 黃 濤,2

1(中國科學院軟件研究所軟件工程技術(shù)中心 北京 100190)2(計算機科學技術(shù)國家重點實驗室(中國科學院軟件研究所) 北京 100190)3 (中國科學院大學 北京 100049) (gqwu@otcaix.iscas.ac.cn)

基于捕獲重放的Web應用跨瀏覽器兼容性檢測

吳國全1,2,3何妹妹1,2,3魏 峻1,2,3鐘 華1黃 濤1,2

1(中國科學院軟件研究所軟件工程技術(shù)中心 北京 100190)2(計算機科學技術(shù)國家重點實驗室(中國科學院軟件研究所) 北京 100190)3(中國科學院大學 北京 100049) (gqwu@otcaix.iscas.ac.cn)

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

跨瀏覽器兼容性；Web應用；JavaScript；捕獲重放；測試

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

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

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

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

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

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

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

1 相關(guān)工作

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

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

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

2 總體方法

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

2) 遠程重放.根據(jù)用戶選擇的被測瀏覽器平臺，通過遠程控制器在不同的瀏覽器平臺重放事件序列，詳見2.2節(jié).

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

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

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

2.1 事件序列收集

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

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

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

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

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

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

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

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

2.2 遠程重放

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

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

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

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

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

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

輸入：事件序列L；

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

① 初始化C=?；

② fore∈Ldo

③ 重放事件e；

④S=頁面截圖；

⑤ ife是load事件then

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

⑦G(id，坐標)=D中節(jié)點坐標；

⑧ 將e，D，S加入C；

⑨ 啟動Mutation Observer；

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

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

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

算法2. 抽取坐標變化的節(jié)點.

輸入：變動節(jié)點列表M和映射表G；

輸出：坐標變化的節(jié)點列表N.

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

② forn∈Mdo

③ 更新n在G中的坐標；

④p=findNotAffectedParent(n，G)；

⑤ 將p加入P；

⑥ end for

⑦Q=findCommonParent(P)；

⑧ forq∈Qdo

⑨L=getCoordChangeChilds(q)；

⑩ 將L加入N；

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

2.4 增量式兼容性檢測算法

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

算法3. 增量式檢測算法.

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

輸出：兼容性問題列表X.

⑤ end if

2.4.1 行為XBI檢測

為了檢測行為的兼容性問題，對于重放的事件序列考慮3種情況：

1) 重放的頁面數(shù)不同(行③).例如某個頁面的最后一個事件失效，沒有讓應用跳轉(zhuǎn)到下個頁面，就會導致最終重放得到的頁面數(shù)不同.

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

X-CHECK的結(jié)構(gòu)XBI檢測算法是基于X-PERT提出的AG(alignment graph)，AG用來描述頁面元素間的2種結(jié)構(gòu)關(guān)系，分別是父子的包含關(guān)系和同一父節(jié)點的兄弟關(guān)系.圖3是table元素的AG示例，實線表示包含關(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é)點；

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

④A1=buildAG(D1)；

⑤A2=buildAG(D2)；

⑥Lm=matchDom(D1,D2)；

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

⑧ else

⑨N1=e1坐標變化的節(jié)點；

⑩N2=e2坐標變化的節(jié)點；

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

2.4.3 內(nèi)容XBI檢測

3 工具實現(xiàn)

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

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

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

4 實驗評估

為了評估所提出的跨瀏覽器兼容性測試方法的有效性，我們進行了一系列實驗，實驗主要關(guān)注2個問題：

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

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

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

4.1 實驗案例

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

Table 1 Web Application

4.2 實驗方法

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

Table 2 Platform Configuration

此外，為得到重放用的事件序列，我們招募了2名沒有參與該項目的學生使用參考瀏覽器平臺訪問6個Web應用，并在此過程中由事件捕獲模塊記錄各種非確定性事件.

4.3 實驗結(jié)果

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

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

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

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

5 結(jié)束語

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

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

[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應用測試技術(shù)進展[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)性能測試框架及其混合建模過程[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

國家自然科學基金項目(61472407)；國家“九七三”重點基礎研究發(fā)展計劃基金項目(2015CB352201)；國家“八六三”高技術(shù)研究發(fā)展計劃基金項目(2013AA041301)；國家科技支撐計劃基金項目(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