面向瀏覽器不兼容性的自動化測試的研究

吳小東　裴頌文,2

1(上海理工大學計算機科學與工程系　上海 200093)2(中國科學院計算技術研究所計算機體系結構國家重點實驗室　北京 100190)

?

面向瀏覽器不兼容性的自動化測試的研究

吳小東1裴頌文1,2

1(上海理工大學計算機科學與工程系上海 200093)2(中國科學院計算技術研究所計算機體系結構國家重點實驗室北京 100190)

隨著Web應用技術的快速發展及瀏覽器和平臺數量的不斷增長，跨瀏覽器的不兼容性問題顯得越來越突出。盡管現有的瀏覽器不兼容性測試工具較多，但是大多數的測試工具是手工測試，耗時過長，容易出錯，而且國內對于跨瀏覽器不兼容性的自動化測試問題缺乏系統性研究。因此基于爬蟲工具生成應用程序的導航模型，以及等價性檢查技術和自動化測試系統(ATS)提出一種檢測跨瀏覽器不兼容性問題的方法，并結合已有的測試工具進行比較。實驗結果表明，該方法能夠有效地自動識別和測試跨瀏覽器不兼容性問題。

跨瀏覽器不兼容性爬蟲工具導航模型等價性檢查自動化測試系統

0　引　言

隨著互聯網技術在全球范圍內的快速發展，Web應用程序的使用在我們的日常生活中變得越來越廣泛。現代的Web應用程序內容比較豐富，交互能力強及 AJAX和 Flash技術的發展，在客戶端為終端用戶提供了更強大的功能和應用。而且近一些年來出現的瀏覽器及計算平臺越來越多，各具特色。當Web應用程序在不同的瀏覽器和平臺上運行時，Web應用程序在外觀、結構和行為上將會產生一些差異。因此跨瀏覽器不兼容性越來越受到許多開發者及用戶的普遍關注。

早期的一些測試工具主要是在不同的客戶端平臺上為瀏覽Web應用程序提供仿真環境，比如Microsoft Expression web和 Adobe BrowserLab。雖然這些工具提供了一些仿真和可視化的基礎設施,但是識別和比較行為差異仍然需要用戶去做。Eaton等[1]提出了識別Web頁面有問題的HTML標簽的方法并手動分類正確和錯誤的頁面，但是現代Web應用程序不僅局限于頁面的HTML標簽，還包括HTML結構、CSS樣式和DOM的動態特征，顯然不能滿足測試的需要。Tamm[2]提出了一個使用DOM和視覺信息的方法，找出單一頁面的布局問題。在截圖過程中它要求用戶手動改變頁面，因此這種技術不適用于動態生成頁面。

在國外，一些CBI自動化測試工具應運而生。Choudhary等[3]提出了WEBDIFF工具，結合頁面DOM結構和基于計算機視覺技術的視覺比較來檢測CBI的結構差異，但它并沒有提出檢測CBI行為差異的方法。Mesbah等[4]提出了 CROSST工具，使用自動化爬蟲工具和導航模型比較來檢測CBI的行為差異。Roy Choudhary等[5]提出了CROSSCHECK工具，它結合了WEBDIFF和CROSST的兩種方法，利用基于錯誤檢測的機器學習[6]技術，更好地檢測了CBI的行為和結構差異。在國內，隨著我國經濟的飛速發展，軟件行業對于軟件自動化測試的需求與標準越來越高，市場上對出現的軟件自動化測試工具日益增多。但是市場上對瀏覽器兼容性進行自動化測試的工具并不多見，已有的學術研究也沒有對CBI檢測問題進行過系統性的研究。因此本文基于現有的一些方法對CBI測試提出CBI的方法和框架，并結合我們以前研究的自動化測試工具ATS[7]，較好地完成跨瀏覽器不兼容性自動化測試的工作。

1　背　景

1.1Web應用程序和Web瀏覽器

Web應用程序是一種通過互聯網能夠讓Web瀏覽器和服務器通訊的計算機程序。終端用戶可以通過Web瀏覽器與Web應用程序的客戶端進行交互，比如看網頁、輸入數據和執行操作等。這些交互操作通過客戶端向服務器發出請求，然后服務器響應這些請求來更新當前Web網頁。Web網頁由HTML或XML腳本語言編碼而成。它還包括其他的相關資源，比如CSS樣式表、客戶端代碼(JavaScript)、圖像、FLASH等。最后Web網頁被渲染后顯示在瀏覽器上。

Web瀏覽器是由大量組件構成的相當復雜的應用程序。Grosskurth等[8]提出了幾個Web開源瀏覽器的相關架構。在瀏覽器所有的組件中,布局引擎是最重要的瀏覽器組件。它結合了頁面的HTML的結構信息和CSS樣式表的格式信息，負責渲染Web頁面。瀏覽器在內存中保存頁面的DOM表示以便讓客戶端腳本去動態修改Web頁面。布局引擎是跨瀏覽器不兼容性問題的主要來源之一，因為同樣的HTML/DOM和CSS在不同的瀏覽器中可能產生不同的頁面。第二個組件是事件處理引擎或DOM引擎，它主要負責處理用戶操作和執行基于瀏覽器DOM-API的變化。由于各個瀏覽器的事件處理算法的不同以及支持的DOM-API不同，它也是跨瀏覽器不兼容性問題的來源之一。因此，同樣的用戶操作可能引起不同的DOM變化。第三個引起跨瀏覽器不兼容性問題的來源是JavaScript引擎即執行瀏覽器JavaScript代碼的運行時環境。因為不同的瀏覽器的JavaScript引擎存在著微妙而明確的差異, 會產生不同的行為差異。

1.2DOM，Crawljax和ATS

DOM[9]即文檔對象模型，是面向HTML和XML的應用程序接口(API)。該模型定義了HTML文件和XML文件在內存中的文檔結構，提供了對HTML和XML文件的訪問、存取方法。DOM將整個HTML頁面文檔或XML數據文檔規劃成由多個相互連接的節點級構成的文檔，文檔中的每個部分都可以看作是一個節點。這樣一個節點的集合看作是一個DOM文檔樹，通過這個DOM文檔樹，開發者可以對文檔的內容和結構擁有強大的控制力， 同時使用DOM API可以在文檔樹里十分方便地遍歷、添加、刪除、修改和替換節點，由此生成豐富的應用形式。DOM與平臺和語言是無關的，因而可以在各種平臺和語言上實現。

Crawljax爬蟲工具是由Java語言編寫而成的開放源代碼軟件，能夠自動捕捉和抓取基于AJAX技術的Web應用程序。Crawljax通過一個動態爬行引擎驅動來探測任何基于 Ajax Web應用程序。它能夠根據DOM狀態和狀態之間的轉換來創建一張狀態圖。這張推論出的狀態圖為各種類型的測試分析和測試技術提供了一個強大的工具，比如：測試生成、基于變量的測試、檢測失效鏈接、非功能測試、檢測未使用的代碼等。Mesbah等[10]詳細介紹了Crawingjax的算法和方法并討論了Crawljax測試工具的具體實現。

ATS是一個與測試業務無關的平臺，可以用于任何測試(如功能測試、性能測試等)及測試任何對象，也可以用于軟件自動化黑盒測試。ATS支持測試腳本、支持任意的測試項目組合及時間調度、支持在不同的服務器上分布式地運行測試腳本和提供統一友好的用戶界面。ATS服務器采用純Java實現，具有跨平臺性特性。ATS是基于J2EE的Struts[11]理論的MVC模式開發，服務器采用了Tomcat服務器技術，客戶端采用JSP技術構建Web頁面，后臺事務處理采用Java Beans技術。ATS采用Web網頁編寫界面，用戶在ATS界面上所有的操作請求發送給Web服務器來處理并采用Struts來構建Web網頁及請求處理器，通過Hibernate[12]來進行數據庫操作，從而加強ATS系統的健壯性、可維護性、易擴展性。

2　CBI的測試方法

本文的研究方法包括三個步驟：(1) 在不同的瀏覽器運行環境下通過Crawljax爬蟲工具自動抓取或捕捉目標Web應用程序，并生成導航模型。這些模型可能包括Web應用程序的一系列的用戶交互信息、下載信息、顯示內容、窗口布局、鏈接切換等。(2) 比較兩個不同瀏覽器應用程序的生成模型，發現它們之間的差異。(3) 生成CBI報告提交給Web應用開發者，讓他們確定原因并解決這些問題。

2.1導航模型

導航模型(記為M)是由爬蟲工具捕捉Web應用程序生成的，也稱為有限狀態機。它的狀態和轉換分別表示終端用戶在Web瀏覽器上所觀察到的頁面和用戶操作(例如點擊控件)。每一個狀態由可編程語言來表示，每一個轉換由用戶操作的名稱來標記。對于每一個觀察到的狀態和相應的頁面，導航模型記錄了頁面的截圖、頁面的DOM表示、頁面的每一個DOM元素的可視化表示等。為了有效地比較多個導航模型，我們提出了從層次化角度來查看和分析這個導航模型。它的頂層是有限狀態機的圖表示，我們稱它為狀態圖，它主要捕捉一系列頁面操作痕跡比如交替用戶操作序列及頁面轉換。它的每一個狀態對應著終端用戶在瀏覽器中所觀察到的一個頁面。每一條邊對應著兩個狀態之間的轉換，由用戶操作(例如點擊)和轉換引起的元素標記。第二層是每個狀態(頁面)的完整可編程語言表示，我們稱它為頁面模型，它描述了每一個瀏覽器頁面的詳細信息。以下分別對狀態圖、頁面模型進行了定義。

定義1(狀態圖)狀態圖G是一個帶有標記的有向圖并包含一個特定的始點。它由五元組G(V, E, O, L,F)表示：

V:頂點集合

E:有向邊集合

O:特定始點

L：字母標記

F:標記函數

G具有以下的具體特征：

(1) 每一個標記至多出現在所給定頂點的一個出邊上，即在整個圖中，盡管有同樣的標記出現在幾個邊上，但沒有一個頂點會有兩個或多個同樣標記的出邊。

(2) 圖G可以有多重邊，即e1,e2∈ E : s(e1)=s(e2)和d(e1)=d(e2)。

(3) 每一個節點可由根節點r到達，即圖G由單一連結組件組成。

(4) 圖可以是環狀的。

特定結點O通常表示始點或Web應用程序的頁面。對于邊e=(u，v),我們用s(e)表示一個源頂點u，d(e)表示一個目的頂點v；In(v)和Out(v)分別表示頂點V的一組入邊和出邊。

定義2(頁面模型)頁面模型是一個帶有根節點的有向標記樹。它由五元組T(Q,D, R,T,F)表示：

Q:頂點集合

D:有向邊集合

R:根節點

T：標記集合

F:標記函數

頁面模型是構成Web頁面的DOM樹結構的抽象表示。此模型包括客戶端狀態的許多信息比如JavaScript 變量值或CSS的屬性等。參數Q、D和R在DOM樹中有明顯的含義。一個特定節點的標記就是DOM節點的HTML標簽名。一組名-值對表示DOM節點的屬性。我們使用單一標記對數據進行抽象的表示，以便將這個模型形式化并對其進行等價性驗證。

2.2等價性檢查

從導航模型的層次角度分析，我們將等價性檢查分為行為等價性檢查和頁面等價性檢查。它對不同瀏覽器的生成模型進行匹配比較找出行為差異。以下詳細討論了行為等價的概念及行為等價性檢驗算法。

定義3(行為等價)給出兩個狀態圖G1(V1,E1,o1,L,F1)和G2(V2,E2,o2,L,F2)，若G1與G2行為等價，記為G1≡G2，當且僅當存在一個雙射函數M: V1→V2以下都是正確的：

(1) ?u,v∈V1,(u, v)∈E1?(M(u),M(v))∈V2

(2) ?e1(u1,v1)∈E1,e2(u2,v2)∈E2,M(u1)=u2&&M(v1)=v2?F1(e1)=F2(e1)

(3) M(o1)=o2

算法1是匹配一對導航模型M1和M2的整個算法。函數StateGraph返回底層狀態圖，它的值作為輸入值傳遞給函數TraceEquivCheck。如果狀態圖G1和G2不等價，則返回錯誤。函數OutTraceDiff(G1,G2)從注釋狀態圖中提取行為差異。TraceEquivCheck(G1,G2)算法實現了兩個狀態圖G1和G2作為一個同構檢查的行為等價性檢查。OUT(v)返回頂點V的一組出邊，LABEL(e)返回邊e的標簽。函數Lookup(l,edgeSet)返回帶有標簽l的一個邊，如果它不存在，則返回null。Dest(e)返回邊e的目的頂點。在G1和G2中，假定每個邊的匹配字段初始化是false，每個頂點的訪問字段初始化都是null。整個算法是深度優先遍歷和線性時間的一個簡單變體。

算法描述如下：

算法1ModelEquivCheck(M1,M2)

G1← StateGraph(M1)

G2← StateGraph(M2)

if (TraceEquivCheck(G1,G2) = false)

then OutTraceDiff(G1,G2)

TraceEquivCheck(G1,G2)

procedure Match(u1,u2)

u1.visited←true

u2.visited←true

u1.match←u2

u2.match←u1

For each e1∈Out(u1)do

e2←LOOKUP(Label(e1),Out(u2))

if (e2≠null) then

v1←Dest(e1)

v2←Dest(e2)

if ((v1.visited=false)&

(v2.visited=false))

then

e1.match←true

e2.match←true

edgeCt+= 2

Match(v1,v2)

else if((v1.match=v2)&

(v1.visited=true)&

(v2.visited=true))

then

e1.match←true

e2.match←true

edgeCt+= 2

main

global edgeCt

edgeCt←0

o1←StartVertex(G1)

o2←StartVertex(G2)

Match(o1,o2)

if (edgeCt=|E1|+|E2|)

then return(true) comment:G1≡G2

else return(false) comment:G1≠G2

2.3CBI比較

我們在算法2中給出了對跨瀏覽器不兼容性問題檢測的整體方法。算法的輸入值包括目標應用程序打開頁面的url，兩個被測試的瀏覽器Br1、Br2。算法的輸出值是CBI的列表L。

2.3.1抓取和捕捉模型

這一階段是在兩個不同的瀏覽器Br1和Br2中。我們通過爬蟲工具Crawljax抓取應用程序和記錄終端用戶所觀察到的行為，分別記為導航模型M1、M2，它們由函數genCrawlModel(url, Br1,Br2)實現。Mesbah等[10]詳細介紹了Crawingjax爬蟲工具的具體功能實現。

2.3.2模型比較

這一階段比較導航模型M1和M2并記錄它們之間的差異。主要有以下的四種不同的CBI比較：

p=0.7×c+0.2×d+0.1×e

結構CBI比較為了比較結構CBI(布局CBI)，我們可以使用Roy Choudhary 等人在參考文獻[13]中提到的方法。他們定義了一個模型叫排列圖記為A。主要執行兩個步驟：(1) 分別從兩個不同的瀏覽器的頁面布局中提取排列圖A1，A2；(2) 用等價性檢驗算法比較兩個排列圖找出它們之間的差異性。在算法2第8行中由函數diffLayout()實現的(詳細算法請參閱文獻[13]中的算法1和算法2)。

算法2CBI 整體算法

輸入url:URL of target web application Br1,Br2: Two browsers

輸出L: List of CBI

1 begin

2 (M1,M2)←genCrawlModel(url, Br1,Br2)

//比較狀態圖

3 (T, PageMatchList)←TraceEquivCheck(M1,M2)

// 比較頁面匹配對

//視覺CBI比較

//結構CBI比較

9end

10end

//生成CBI報告列表

11 L←computeCBI(T, V, B, PageMatchList)

12 return L

13 end

3　CBI的實現和實驗結果

3.1CBI的架構

如圖1所示，本文的CBI架構主要包括三個組成部分：模型收集器、模型比較器和報告生成器。

圖1　CBI架構

模型收集器接受一個Web應用程序,使用現有的網絡爬蟲 (Crawljax)工具從多個瀏覽器提取其導航模型。模型比較器主要是執行各個不同的CBI的比較。報告生成器以HTML的格式生成CBI報告給Web開發者，讓他們能夠發現CBI并及時找出原因。

3.2CBI的自動化測試結構

CBI的體系結構主要由分布執行服務器、屏幕捕捉服務器和Web服務測試三部分組成，如圖2所示。分布執行服務器是整個體系結構的核心部分，主要負責測試腳本執行和測試任務分配。分布式執行引擎主要實現自動化測試、Web服務測試的交流信息和屏幕捕捉信息的交互。屏幕捕捉服務器主要實現捕捉瀏覽器的接口和組件，然后將消息遞交給分布執行服務器。這些信息儲存到屏幕捕捉服務器中，并通過消息傳遞接口傳送給分布式執行引擎，經過分析然后將測試內容遞交給測試人員，從而了解到瀏覽器的不兼容性問題。

圖2　CBI自動化測試系統結構圖

3.3實驗結果

在實驗中， 本文選擇了兩個不同的瀏覽器:火狐瀏覽器(版本24)和IE瀏覽器(版本 8.0)，它們都在 Microsoft Window 7 環境下運行。我們隨機選取了五個不同的應用程序，它們分別來自不同領域的類型網站，這樣能夠使測試數據更加合理。如表1所示，它包括名稱、網址和類型。我們利用現有的WEBDIFF和CROSST測試方法分別對以下不同的應用程序測試。

表1　測試對象

表2給出了三種測試方法的測試數據。這些測試數據由報告生成器生成，并由我們人工統計得出列表2。第一列顯示了測試對象的名稱，其他幾列給出了瀏覽器不兼容性問題的個數，包括行為差異、視覺差異、結構差異和總數差異。由表2的實驗結果比較表明，我們發現對于WEBDIFF和CROSST測試工具都不能完全地測試應用程序的行為、視覺和結構差異；而CBI的測試方法能夠很好地自動測試和識別跨瀏覽器不兼容性的行為、視覺和結構差異，并且該方法還能節省大量的時間。例如表2所示的hupu應用程序，它包括1個行為差異、1個視覺差異和16個結構差異，共18個差異，而WEBDIFF測試僅共有11個差異，CROSST測試僅共有1個差異。

表2　WEBDIFF、CROSST和CBI的測試結果

4　結　語

跨瀏覽器不兼容性對于Web應用開發者來說是一個常見的問題，研究它們具有重要的現實意義。本文結合現有的一些技術提出了檢測瀏覽器不兼容性問題的方法，并結合以前研究的自動化測試框架，設計出了瀏覽器不兼容性測試的結構。最后通過實驗數據來驗證了這一方法，達到了比較好的驗證效果。

在未來的工作中，我們將會進一步改進自動化設計系統(ATS)結構，提高工作效率，更好地滿足開發者和客戶的工作需要。今后也可以在不同的平臺上(桌面平臺、移動平臺等)，對跨平臺的不兼容性進行研究。

[1] Eaton C,Memon A M.An empirical approach to evaluating web application compliance across diverse client platform configurations[C]//International Journal of Web Engineering and Technology,USA,2007:227-253.

[2] Tamm M.Fighting layout bugs[EB/OL].http://code.google.com/p/fighting-layout-bugs/.

[3] Roy Choudhary S,Versee H,Orso A.Webdiff:Automated identification of cross-browser issues in web applications[C]//Proc of the 26th IEEE International Conference on Software Maintenance (ICSM’2010).Timisoara,Romania,2010:1-10.

[4] Mesbah A,Prasad M R.Automated cross-browser compatibility test[C]//Proc of the 33rd International Conference on Software Engineering (ICSE’2011).NewYork,USA,2011:561-570.

[5] Roy Choudhary S,Prasad M R,Orso A.Crosscheck:Combining crawling and differencing to better detect cross-browser incompatibilities in web applications[C]//Proc of the IEEE Fifth International Conference on Software Testing (ICST’2012).Montreal,Canada,2012:171-180.

[6] Nataliia Semenenk,Marlon Dumas,T?nis Saar.Browserbite:Accurate cross-browser testing via machine learning over image features[C]//Proc of the 29th IEEE International Conference on Software Maintenance (ICSM’2013).San Francisco,USA,2013:528-531.

[7] 裴頌文,余強,吳百鋒.一種新的基于J2EE技術的軟件自動化測試系統的研究與實現[J].清華大學學報,2007(6):51-56.

[8] Grosskurth A,Godfrey M W.A reference architecture for web browsers[C]//Proc of the 21st IEEE International Conference on Software Maintenance (ICWE’2005).Waterloo,Canada,2005:661-664.

[9] Keith J,Sambells J.DOM Scripting:Web Design with Javascript and the Document Object Model[J].Friends of Ed,2010.

[10] Mesbah A,Bozdag W,van Deursen A.Crawling ajax by inferring user interface state changes[C]//Proc of the 8th International Conference on Web Engineering (ICWE’2008).Vancouver,Canada,2008:122-134.

[11] 孫衛琴.精通Structs:基于MVC的Java Web設計與開發[M].北京:電子工業出版社,2004.

[12] 夏昕,曹曉鋼,唐勇.深入淺出Hibernate[M].北京:電子工業出版社,2005.

[13] Roy Choudhary S,MukulR Prasad,Alessandro Orso.X-PERT:Accurate Identification of Cross-Browser Issues in Web Applications[C]//Proc of the 29th IEEE International Conference on Software Maintenance(ICSM’2013).San Francisco,USA,2013:702-711.

RESEARCH ON AUTOMATED TESTING FOR INCOMPATIBILITY OF CROSS-BROWSER

Wu Xiaodong1Pei Songwen1,2

1(DepartmentofComputerScienceandEngineering,UniversityofShanghaiforScienceandTechnology,Shanghai200093,China)2(StateKeyLaboratoryofComputerArchitecture,InstituteofComputingTechnology,ChineseAcademyofSciences,Beijing100190,China)

With the rapid development of Web application technology and constant growth in numbers of new browsers and platforms, cross-browser incompatibilities (CBI) problem becomes more and more noticeable. Though current testing tools for browsers’ incompatibilities are not just few, however most of them are in manual operation with time consuming and being error-prone, and there lacks the nationwide systematic researches on automated testing approach for CBI. Therefore, based on the navigation model of generating application with crawler tool, the equivalence checking technology and the automatic test system (ATS), we put forward a method of cross-browser incompatibility detection, and compare it among the existing testing tools. Experimental results show that the proposed method can effectively and automatically identify and test the cross-browser incompatibility problems.

Cross-browser incompatibility (CBI)Crawler toolNavigation modelEquivalence checkingAutomated testing system (ATS)

2014-08-19。

計算機體系結構國家重點實驗室開放課題項目(CARCH201206)；上海理工大學國家級項目培育基金項目(12X GQ07)。

吳小東，碩士生，主研領域：軟件測試，安全測試。裴頌文，博士。

TP311.13

A

10.3969/j.issn.1000-386x.2016.03.004