本發(fā)明涉及一種高效的Web應(yīng)用跨瀏覽器布局兼容性檢測系統(tǒng)及方法，屬于互聯(lián)網(wǎng)以及Web
技術(shù)領(lǐng)域：
。
背景技術(shù)：
：隨著互聯(lián)網(wǎng)以及Web技術(shù)的快速發(fā)展，Web應(yīng)用正在成為重要的信息獲取和交流平臺。應(yīng)用開發(fā)者希望應(yīng)用能在各種主流的瀏覽器平臺上表現(xiàn)一致，但由于瀏覽器實現(xiàn)技術(shù)的差異以及對標準支持程度的不同，導(dǎo)致Web應(yīng)用在不同的瀏覽器平臺上運行時可能出現(xiàn)行為和頁面展現(xiàn)方面的不一致，稱為跨瀏覽器的不兼容問題(XBIs)。通?？鐬g覽器不兼容性問題(XBI)分為三類：行為不一致、布局不一致和內(nèi)容不一致。行為不一致：這類不一致通常指頁面中元素的功能失效，如點擊鏈接頁面無法跳轉(zhuǎn)，點擊按鈕頁面沒有反應(yīng)；布局不一致：指頁面中元素在布局方面的錯誤。例如：兩個按鈕在Chrome瀏覽器中橫排且上下對齊，但是在IE瀏覽器中則顯示為豎排；內(nèi)容不一致：進一步分為文本內(nèi)容不一致和可視內(nèi)容不一致。文本不一致指的是元素內(nèi)部的文本不同，可視內(nèi)容不一致是指元素在可視化方面，如圖片內(nèi)容、元素樣式等方面的不同。根據(jù)文獻(S.RoyChoudhary,M.R.Prasad,andA.Orso.X-pert:Accurateidentificationofcross-browserissuesinwebapplications.InProceedingsofthe2013InternationalConferenceonSoftwareEngineering,pages702–711.IEEEPress,2013)的研究，在以上三類跨瀏覽器兼容性問題中結(jié)構(gòu)不一致問題最普遍，在所發(fā)現(xiàn)的兼容性不一致中占57％。為了檢測結(jié)構(gòu)不一致問題，工作(S.R.Choudhary,H.Versee,andA.Orso.Webdiff:Automatedidentificationofcross-browserissuesinwebapplications.InICSM’2010)提出了一種。為了減少檢測結(jié)果的誤報，工作(S.RoyChoudhary,M.R.Prasad,andA.Orso.X-pert:Accurateidentificationofcross-browserissuesinwebapplications.InProceedingsofthe2013InternationalConferenceonSoftwareEngineering,pages702–711.IEEEPress,2013)首先為帶檢測的兩個頁面分別構(gòu)造AlignmentGraph，通過檢測頁面中匹配節(jié)點是否有相同的父子關(guān)系和兄弟關(guān)系確定是否存在結(jié)構(gòu)不一致的問題。該方法的主要不足在于對于Web應(yīng)用的每個頁面都需要構(gòu)造一個完整的AlignmentGraph，并在檢測結(jié)構(gòu)不一致之前對兩個頁面中的所有節(jié)點進行一次匹配。對于現(xiàn)代流行的Web2.0應(yīng)用(例如：office365、Gmail、GoogleDocs等)，Ajax技術(shù)被廣泛采用以通過異步通信的方式對頁面進行局部更新，以提供頁面的響應(yīng)能力和用戶的體驗。當(dāng)對這類Web應(yīng)用進行結(jié)構(gòu)不一致檢測時，已有方法會造成對已經(jīng)檢測過的頁面節(jié)點進行重復(fù)檢測，從而降低了檢測效率，并且可能導(dǎo)致檢測結(jié)果的重復(fù)報告。例如，考慮圖1所示的一個購物網(wǎng)站(使用Chrome瀏覽器訪問)，當(dāng)用戶點擊“AddToCart”按鈕后，在圖2中僅部分頁面元素發(fā)生了變化(如圖中的紅色框所示)。現(xiàn)有的檢測方法需要分別為圖1和圖2所對應(yīng)的整個頁面構(gòu)建AlignmentGraph，并對所有節(jié)點進行匹配和檢測。然而圖2頁面中的大部分元素在圖1對應(yīng)的頁面中已經(jīng)被檢測過且在當(dāng)前頁面中沒有發(fā)生變化，如果不考慮頁面節(jié)點信息是否發(fā)生變化，而對圖1和圖2對應(yīng)的頁面分別進行整體檢測，則會造成大量節(jié)點的重復(fù)檢測，并且也可能會導(dǎo)致檢測結(jié)果的重復(fù)報告。技術(shù)實現(xiàn)要素：本發(fā)明的目的是提高Web應(yīng)用兼容性檢測的效率，提出一種高效的Web應(yīng)用跨瀏覽器布局兼容性檢測系統(tǒng)及方法，基于X-PERT提出的AlignmentGraph(AG圖)，但只對頁面中變化的區(qū)域構(gòu)造子AG圖，并且只對頁面中變化的節(jié)點進行匹配和布局不一致的檢測，從而提高了Web應(yīng)用布局兼容性檢測的效率，并且也避免了檢測結(jié)果的重復(fù)報告。本發(fā)明技術(shù)解決方案如下：一種高效的Web應(yīng)用跨瀏覽器布局兼容性檢測系統(tǒng)，包括：數(shù)據(jù)處理模塊、節(jié)點匹配模塊、AG圖構(gòu)造模塊和節(jié)點比較模塊，其中：數(shù)據(jù)處理模塊，負責(zé)處理從參考瀏覽器和待測瀏覽器收集的頁面數(shù)據(jù)；該模塊通過比較相鄰兩個事件的數(shù)據(jù)，得到每個事件中變化的節(jié)點和變化的區(qū)域，所述變化的節(jié)點包括：增加的節(jié)點、刪除的節(jié)點、坐標變化的節(jié)點、屬性變化的節(jié)點、父節(jié)點改變的節(jié)點和在父節(jié)點中次序變化的節(jié)點；將變化的節(jié)點送至節(jié)點匹配模塊，變化的區(qū)域送于AG圖構(gòu)造模塊；節(jié)點匹配模塊，基于數(shù)據(jù)處理模塊分別為參考瀏覽器和待測瀏覽器處理得到的每個事件發(fā)生后的變化節(jié)點信息，匹配參考瀏覽器和待測瀏覽器中同一個事件中變化的節(jié)點；該模塊包括兩個步驟：按層完全匹配、全局最相似匹配，所述按層完全匹配指的是待測瀏覽器中待匹配節(jié)點與參考瀏覽器中同一層的節(jié)點進行相似度比較，直到找到完全一樣的節(jié)點；所述全局最相似匹配指的是參考瀏覽器和待測瀏覽器中未在上一步驟中完成匹配的節(jié)點相互間找到最相似的節(jié)點，作為相匹配的節(jié)點；AG圖構(gòu)造模塊，負責(zé)對每個事件中變化的區(qū)域構(gòu)造AG圖，得到每個節(jié)點在布局上的父節(jié)點和兄弟節(jié)點；節(jié)點比較模塊，基于AG圖構(gòu)造模塊為參考瀏覽器和待測瀏覽器變化區(qū)域構(gòu)造的AG圖,以及節(jié)點匹配模塊為參考瀏覽器和待測瀏覽器變化區(qū)域計算的節(jié)點匹配信息，比較相匹配節(jié)點的父子關(guān)系和兄弟關(guān)系是否相同，如果有相同的父子和兄弟關(guān)系，則沒有布局兼容問題，否則，兩個節(jié)點存在布局兼容性問題。所述數(shù)據(jù)處理模塊的具體實現(xiàn)如下：(1)在Web應(yīng)用頁面生成時，為每個新創(chuàng)建的節(jié)點分配id，數(shù)據(jù)處理模塊根據(jù)id得到相鄰事件中的同一節(jié)點，首先通過比較相鄰兩個事件的數(shù)據(jù)得到以下六種變化的節(jié)點，增加的節(jié)點，該節(jié)點id不在前一事件僅在后一事件中；刪除的節(jié)點，該節(jié)點id不在后一事件僅在前一事件中；坐標變化的節(jié)點，該節(jié)點在前后事件中的坐標不同；屬性變化的節(jié)點，該節(jié)點在前后事件中的節(jié)點屬性不同，節(jié)點屬性包括class、style；父節(jié)點改變的節(jié)點，體現(xiàn)在該節(jié)點在前后事件中Xpath的前綴發(fā)生變化；在父節(jié)點中次序變化的節(jié)點，體現(xiàn)在該節(jié)點在前后事件中Xpath的序號發(fā)生變化；(2)得到上述六種變化的節(jié)點，然后根據(jù)這些事件中變化的節(jié)點得到變化的區(qū)域；(21)遍歷所有事件中變化的節(jié)點，并根據(jù)節(jié)點之間的包含關(guān)系得到事件中變化區(qū)域的根節(jié)點，每個節(jié)點在生成的頁面中由一個矩形進行表示，該矩形的位置由其在頁面中所在左上角坐標和右下角坐標確定，如果節(jié)點A代表的矩形包含節(jié)點B代表的矩形，則保留A作為根節(jié)點，A繼續(xù)進行比較，B則不再比較；節(jié)點之間的包含關(guān)系計算如下：設(shè)A的坐標表示(xa1,xa2,ya1,ya2)，B坐標(xb1,xb2,yb1,yb2)，其中(xa1,ya1)為A的左上角坐標，(xa2,ya2)為A的右下角坐標，(xb1,yb1)為B的左上角坐標，(xb2,yb2)為B的右下角坐標，如果xa1<＝xb1，且xa2>＝xb2,且ya1>＝y(tǒng)b1,且ya2<＝y(tǒng)b2，則A包含B；(22)步驟(21)得到的根節(jié)點屬于事件中變化的節(jié)點，為了能夠在后續(xù)檢測中比較該根節(jié)點的父子關(guān)系和兄弟關(guān)系，根據(jù)坐標找到這些根節(jié)點的父節(jié)點，規(guī)則是該節(jié)點滿足兩個條件，一是該節(jié)點的坐標包含根節(jié)點，二是該節(jié)點是所有滿足條件一的節(jié)點中面積最小的；(23)步驟(22)得到的父節(jié)點作為事件中變化的區(qū)域最終的根節(jié)點，接著遍歷所有節(jié)點，得到事件中變化的區(qū)域內(nèi)的節(jié)點，該節(jié)點包括未變化的節(jié)點，規(guī)則是某一節(jié)點被根節(jié)點包含，則該節(jié)點屬于該事件中變化區(qū)域。所述節(jié)點匹配模塊的具體實現(xiàn)如下：分別將參考瀏覽器和待測瀏覽器中變化的節(jié)點作為各自的待匹配節(jié)點，(1)按層完全匹配，按照DOM樹從上至下遍歷參考瀏覽器中變化的節(jié)點A，在待測瀏覽器中選取與A的父節(jié)點PA相匹配的節(jié)點PB，將節(jié)點A與PB在DOM樹中的子節(jié)點進行比較，如果找到節(jié)點B與A完全一樣，即相似度為1，則A與B相匹配存入匹配表，并將A與B分別移出待匹配列表；(2)全局最相似匹配，遍歷參考瀏覽器待匹配列表的節(jié)點A，在待測瀏覽器的待匹配列表中選取與A相似度最高的節(jié)點B且二者的相似度高于閾值，即A與B相匹配存入匹配表，并將A與B分別移出待匹配列表；(3)參考瀏覽器和待測瀏覽器的待匹配列表中剩余的節(jié)點，即為不匹配的節(jié)點。所述AG圖構(gòu)造模塊的具體實現(xiàn)如下：(1)AG圖描述頁面中元素的兩種結(jié)構(gòu)關(guān)系：父子關(guān)系和兄弟關(guān)系。對于兩個節(jié)點A和B，如果A是包含B的所有節(jié)點中面積最小的節(jié)點，則A是B的父親，B是A的孩子，節(jié)點A的所有孩子節(jié)點之間的關(guān)系即為兄弟關(guān)系。為構(gòu)造AG圖，首先按照節(jié)點面積從小到大的順序遍歷變化區(qū)域內(nèi)的節(jié)點，對于每一個遍歷的節(jié)點A，遍歷后續(xù)節(jié)點，找到第一個包含A的節(jié)點即為A的父節(jié)點P，根據(jù)P和A的坐標計算二者的父子關(guān)系，并將A存入P的子節(jié)點列表中；(2)再次遍歷變化區(qū)域內(nèi)的所有父節(jié)點P，得到P的子節(jié)點列表CL，將CL內(nèi)所有節(jié)點兩兩構(gòu)造成兄弟，并根據(jù)坐標計算二者的兄弟關(guān)系；(3)經(jīng)歷上述兩個步驟，每個節(jié)點中有父子關(guān)系列表和兄弟關(guān)系列表。所述節(jié)點比較模塊的具體實現(xiàn)如下：(1)遍歷參考瀏覽器變化的節(jié)點A，查詢從節(jié)點匹配模塊輸出的匹配表，得到相匹配的節(jié)點B；(2)查詢AG圖構(gòu)造模塊分別為節(jié)點A和節(jié)點B構(gòu)建的父子關(guān)系，并進行比較，如果A和B有相同的父子關(guān)系，則不存在布局兼容性問題，否則存在布局兼容性問題；(3)查詢AG圖構(gòu)造模塊分別為節(jié)點A和節(jié)點B構(gòu)建的兄弟關(guān)系，并進行比較，A和B有相同的兄弟關(guān)系，則不存在布局兼容性問題，否則存在布局兼容性問題。一種高效的Web應(yīng)用跨瀏覽器布局兼容性檢測，實現(xiàn)步驟如下：(1)頁面數(shù)據(jù)的處理：分別對參考瀏覽器和待測瀏覽器的頁面數(shù)據(jù)進行處理，得到每個事件中變化的區(qū)域和變化的節(jié)點，對于每個事件，首先得到該事件發(fā)生前和發(fā)生后頁面數(shù)據(jù)，將頁面數(shù)據(jù)中的節(jié)點按照id映射成Map表，然后遍歷該事件發(fā)生前的頁面數(shù)據(jù)節(jié)點id，在該事件發(fā)生后的頁面數(shù)據(jù)Map表中找到對應(yīng)的節(jié)點，如果找不到則記錄當(dāng)前節(jié)點為被刪除的節(jié)點并從事件發(fā)生前的頁面數(shù)據(jù)Map表中刪除，找到則按照上述幾種類型判斷該節(jié)點是否有變化并分別從事件發(fā)生前后的頁面數(shù)據(jù)Map表中刪除該節(jié)點；遍歷結(jié)束后，如果該事件發(fā)生后的頁面數(shù)據(jù)Map表中還存在節(jié)點，則記錄這些節(jié)點為增加的節(jié)點；接著根據(jù)坐標對這些變化的節(jié)點進行合并得到變化區(qū)域的根節(jié)點；然后為這些根節(jié)點找到布局上的父節(jié)點，作為變化區(qū)域最終的根節(jié)點；重新遍歷當(dāng)前事件的節(jié)點，找到各變化區(qū)域內(nèi)的所有節(jié)點，規(guī)則是該節(jié)點被變化區(qū)域的根節(jié)點所包含；最終經(jīng)過頁面數(shù)據(jù)的處理得到了各個事件變化的節(jié)點和變化的區(qū)域；(2)變化節(jié)點的匹配，對參考瀏覽器和待測瀏覽器的同一事件中變化的節(jié)點進行匹配；將變化的節(jié)點作為待匹配節(jié)點，并生成待匹配節(jié)點列表，首先進行按層完全匹配，將完全匹配上的節(jié)點移出待匹配節(jié)點列表，接著對剩余待匹配節(jié)點進行全局最相似匹配，將匹配上的節(jié)點移出待匹配列表；最終得到節(jié)點匹配表；(3)變化區(qū)域的AG圖構(gòu)造，AG圖構(gòu)造模塊通過事件發(fā)生后各個變化區(qū)域內(nèi)的節(jié)點坐標構(gòu)造AG圖，AG圖由各節(jié)點的父子關(guān)系和兄弟關(guān)系構(gòu)成；(4)變化節(jié)點的比較，對參考瀏覽器和待測瀏覽器的同一事件中變化的節(jié)點進行比較，遍歷參考瀏覽器中變化的節(jié)點A，從節(jié)點匹配表中得到相匹配的節(jié)點B，接著再出對應(yīng)的AG圖中分別得到A和B的父子關(guān)系和兄弟關(guān)系并進行比較，最終得到A和B的布局不兼容性問題。本發(fā)明與現(xiàn)有技術(shù)相比的優(yōu)點在于：為進行頁面的布局兼容性檢測，已有方法對頁面上的所有節(jié)點進行全局匹配，并為整個頁面構(gòu)造AG圖，忽略了現(xiàn)代Web應(yīng)用對頁面進行局部刷新的特點，從而造成檢測速度慢，效率低下。本發(fā)明僅對事件發(fā)生后變化的頁面節(jié)點進行匹配，并僅為變化的節(jié)點構(gòu)造AG圖，通過檢查變化節(jié)點是否有相同的父子關(guān)系和兄弟關(guān)系，可以快速檢測頁面的布局兼容性問題。附圖說明圖1為本發(fā)明系統(tǒng)組成框圖；圖2為數(shù)據(jù)處理模塊計算變化節(jié)點的實現(xiàn)流程圖；圖3為數(shù)據(jù)處理模塊合并變化節(jié)點的實現(xiàn)流程圖；圖4為數(shù)據(jù)處理模塊計算變化區(qū)域的實現(xiàn)流程圖；圖5為節(jié)點匹配模塊按層完全匹配的實現(xiàn)流程圖；圖6為節(jié)點匹配模塊全局最相似匹配的實現(xiàn)流程圖；圖7為AG圖構(gòu)造模塊的實現(xiàn)流程圖；圖8為節(jié)點比較模塊的實現(xiàn)流程圖。具體實施方式下面結(jié)合附圖對本發(fā)明進行詳細說明。如圖1所示，本發(fā)明Web應(yīng)用的增量式兼容性檢測方法包括：數(shù)據(jù)處理模塊、節(jié)點匹配模塊、AG圖構(gòu)造模塊和節(jié)點比較模塊。數(shù)據(jù)處理模塊，負責(zé)處理單個瀏覽器的頁面數(shù)據(jù)，該模塊通過比較相鄰兩個事件的數(shù)據(jù)，得到后一事件變化的區(qū)域和變化的節(jié)點。變化的節(jié)點包括：增加的節(jié)點、刪除的節(jié)點、坐標變化的節(jié)點、屬性變化的節(jié)點、父節(jié)點改變的節(jié)點和在父節(jié)點中次序變化的節(jié)點。節(jié)點匹配模塊，負責(zé)匹配參考瀏覽器和待測瀏覽器中同一個事件變化的節(jié)點，該模塊包括兩個步驟：按層完全匹配、全局最相似匹配。按層完全匹配指的是待匹配節(jié)點與另一瀏覽器中同一層的節(jié)點進行相似度比較，直到找到完全一樣的節(jié)點。全局最相似匹配指的是兩個瀏覽器中未在上一步驟中完成匹配的節(jié)點相互間找到最相似的節(jié)點，作為相匹配的節(jié)點。AG圖構(gòu)造模塊，負責(zé)對每個事件中變化的區(qū)域構(gòu)造AG圖，得到每個節(jié)點在布局上的父節(jié)點和兄弟節(jié)點。節(jié)點比較模塊，負責(zé)比較相匹配節(jié)點的父子關(guān)系和兄弟關(guān)系，得到節(jié)點的布局兼容性問題。所述數(shù)據(jù)處理模塊的具體實現(xiàn)如下：在Web應(yīng)用頁面生成時，系統(tǒng)為每個新創(chuàng)建的節(jié)點分配id，數(shù)據(jù)處理模塊根據(jù)id得到相鄰事件中的同一節(jié)點。首先該模塊通過比較相鄰兩個事件的數(shù)據(jù)得到以下六種變化的節(jié)點。1)對于增加的節(jié)點，該節(jié)點id不在前一事件僅在后一事件中。2)對于刪除的節(jié)點，該節(jié)點id不在后一事件僅在前一事件中。3)對于坐標變化的節(jié)點，該節(jié)點在前后事件中的坐標不同。4)對于屬性變化的節(jié)點，該節(jié)點在前后事件中的節(jié)點屬性不同，節(jié)點屬性包括class、style等。5)對于父節(jié)點改變的節(jié)點，體現(xiàn)在該節(jié)點在前后事件中Xpath的前綴發(fā)生變化，如/HTML/BODY/DIV/A和/HTML/BODY/SPAN/A。6)對于在父節(jié)點中次序變化的節(jié)點，體現(xiàn)在該節(jié)點在前后事件中Xpath的序號發(fā)生變化，如/HTML/BODY/DIV/A[2]和/HTML/BODY/DIV/A[3]。得到上述六種變化的節(jié)點，接著該模塊根據(jù)這些變化的節(jié)點得到變化的區(qū)域。1)遍歷所有變化的節(jié)點，并比較節(jié)點的坐標得到變化區(qū)域的根節(jié)點。規(guī)則是如果A包含B，則保留A作為根節(jié)點，A繼續(xù)進行比較，B則不再比較。包含關(guān)系表示為A坐標(xa1,xa2,ya1,ya2)，B坐標(xb1,xb2,yb1,yb2)，如果xa1<＝xb1&&xa2>＝xb2&&ya1<＝y(tǒng)b1&&ya2>＝y(tǒng)b2，則A包含B。2)上一步驟得到的根節(jié)點屬于變化的節(jié)點，為了能夠在后續(xù)檢測中比較該根節(jié)點的父子關(guān)系和兄弟關(guān)系，該模塊根據(jù)坐標找到這些根節(jié)點的父節(jié)點，規(guī)則是該節(jié)點滿足兩個條件，一是該節(jié)點的坐標包含根節(jié)點，二是該節(jié)點是所有滿足條件一的節(jié)點中面積最小的。3)上一步驟得到的父節(jié)點作為變化區(qū)域最終的根節(jié)點，接著遍歷所有節(jié)點，得到變化區(qū)域內(nèi)的節(jié)點(包括未變化的節(jié)點)，規(guī)則是某一節(jié)點被根節(jié)點包含，則該節(jié)點屬于該變化區(qū)域。所述節(jié)點匹配模塊的具體實現(xiàn)如下：分別將參考瀏覽器和待測瀏覽器中變化的節(jié)點作為各自的待匹配節(jié)點。1)按層完全匹配，按照DOM樹從上至下遍歷參考瀏覽器中變化的節(jié)點A，在待測瀏覽器中選取與A的父節(jié)點PA相匹配的節(jié)點PB，將A與PB在DOM樹中的子節(jié)點進行比較，如果找到節(jié)點B與A完全一樣，即相似度為1，則A與B相匹配存入匹配表，并將A與B分別移出待匹配列表。2)全局最相似匹配，遍歷參考瀏覽器待匹配列表的節(jié)點A，在待測瀏覽器的待匹配列表中選取與A相似度最高的節(jié)點B且二者的相似度高于閾值，即A與B相匹配存入匹配表，并將A與B分別移出待匹配列表。3)參考瀏覽器和待測瀏覽器的待匹配列表中剩余的節(jié)點，即為兩個瀏覽器不匹配的節(jié)點。所述AG圖構(gòu)造模塊的具體實現(xiàn)如下：該模塊通過每個事件變化區(qū)域中的所有節(jié)點構(gòu)造AG圖，一個變化的區(qū)域構(gòu)造一個AG圖。AG圖描述頁面中元素的兩種結(jié)構(gòu)關(guān)系：父子(Contain)和兄弟(Sibling)?！皀ode2containnode1”必須滿足兩個條件，一是node2的坐標包含node1，二是node2是所有滿足條件一的節(jié)點中面積最小的，父子關(guān)系總共有8種，如表1所示?！皀ode1siblingnode2”表示兩個元素在同一父節(jié)點中，兄弟關(guān)系也有8種，如表2所示。1)按照節(jié)點面積從小到大的順序遍歷變化區(qū)域內(nèi)的節(jié)點A，繼續(xù)遍歷后續(xù)節(jié)點，為A找到第一個包含A的節(jié)點即為A的父節(jié)點P，根據(jù)P和A的坐標計算二者的父子關(guān)系，并將A存入P的子節(jié)點列表中。2)遍歷變化區(qū)域內(nèi)的節(jié)點P，得到P的子節(jié)點列表CL，將CL內(nèi)所有節(jié)點兩兩構(gòu)造成兄弟，并根據(jù)坐標計算二者的兄弟關(guān)系。經(jīng)歷上述兩個步驟，每個節(jié)點中有父子關(guān)系Contain和兄弟關(guān)系列表Siblings。表18種父子關(guān)系XFILL子元素的x坐標與父元素相近。X-CENTER子元素在父元素的x坐標上居中。LEFT-JUSTIFICATION子元素在父元素的x坐標上偏左。RIGHT-JUSTIFICATION子元素在父元素的x坐標上偏右。YFILL子元素的y坐標與父元素相近。Y-CENTER子元素在父元素的y坐標上居中。TOP-ALIGNMENT子元素在父元素的y坐標上偏上。BOTTOM-ALIGNMENT子元素在父元素的y坐標上偏下。表28種兄弟關(guān)系LEFT-EDGE元素1和元素2的x1坐標相近。RIGHT-EDGE元素1和元素2的x2坐標相近。LEGT-RIGHT元素1的x2小于元素2的x1。RIGHT-LEFT元素1的x1大于元素2的x2。TOP-EDGE元素1和元素2的y1坐標相近。BOTTOM-EDGE元素1和元素2的y2坐標相近。TOP-BOTTOM元素1的y2小于元素2的y1。BOTTOM-TOP元素1的y1大于元素2的y2。所述節(jié)點比較模塊的具體實現(xiàn)如下：(4)遍歷參考瀏覽器變化的節(jié)點A，從匹配表中得到相匹配的節(jié)點B。(5)比較A和B的父子關(guān)系，。(6)比較A和B的兄弟關(guān)系。一種高效的Web應(yīng)用跨瀏覽器布局兼容性檢測方法，實現(xiàn)步驟如圖1所示：1)頁面數(shù)據(jù)的處理：數(shù)據(jù)處理模塊分別對參考瀏覽器和待測瀏覽器的頁面數(shù)據(jù)進行處理，得到每個事件中變化的區(qū)域和變化的節(jié)點。頁面數(shù)據(jù)是由一系列事件數(shù)據(jù)構(gòu)成如：[event,event,......]，事件數(shù)據(jù)中包含當(dāng)前頁面的所有節(jié)點。首先數(shù)據(jù)處理模塊選取相鄰兩個事件數(shù)據(jù)，將各事件數(shù)據(jù)中的節(jié)點按照id映射成Map表。然后遍歷前一事件中的節(jié)點id，在后一事件Map表中找到對應(yīng)的節(jié)點，如果找不到則記錄當(dāng)前節(jié)點為被刪除的節(jié)點并從前一事件中刪除，找到則按照上述幾種類型判斷該節(jié)點是否有變化并分別從前后事件中刪除該節(jié)點。遍歷結(jié)束后，如果后一事件中還存在節(jié)點，則記錄這些節(jié)點為增加的節(jié)點。接著根據(jù)坐標對這些變化的節(jié)點進行合并得到變化區(qū)域的根節(jié)點。然后為這些根節(jié)點找到布局上的父節(jié)點，作為變化區(qū)域最終的根節(jié)點。重新遍歷當(dāng)前事件的節(jié)點，找到各變化區(qū)域內(nèi)的所有節(jié)點，規(guī)則是該節(jié)點被變化區(qū)域的根節(jié)點包含。最終經(jīng)過該模塊的處理得到了各個事件變化的節(jié)點和變化的區(qū)域。2)變化節(jié)點的匹配，節(jié)點匹配模塊對參考瀏覽器和待測瀏覽器的同一事件中變化的節(jié)點進行匹配。將變化的節(jié)點作為待匹配節(jié)點，首先進行按層完全匹配，將完全匹配上的節(jié)點移出待匹配列表。接著對剩余待匹配節(jié)點進行全局最相似匹配，將匹配上的節(jié)點移出待匹配列表。最終得到節(jié)點匹配表。3)變化區(qū)域的AG圖構(gòu)造，AG圖構(gòu)造模塊根據(jù)坐標通過各事件中各個變化區(qū)域內(nèi)的節(jié)點構(gòu)造AG圖，AG圖由各節(jié)點的父子關(guān)系和兄弟關(guān)系構(gòu)成。4)變化節(jié)點的比較，節(jié)點比較模塊對參考瀏覽器和待測瀏覽器的同一事件中變化的節(jié)點進行比較。遍歷參考瀏覽器中變化的節(jié)點A，從節(jié)點匹配表中得到相匹配的節(jié)點B，接著再出對應(yīng)的AG圖中分別得到A和B的父子關(guān)系和兄弟關(guān)系并進行比較，最終得到A和B的布局不兼容性問題。下面結(jié)合實施例對本發(fā)明的各模塊進行詳細說明。如圖2、圖3、圖4所示，本發(fā)明數(shù)據(jù)處理模塊具體實現(xiàn)如下：數(shù)據(jù)處理模塊主要負責(zé)處理單個瀏覽器的頁面數(shù)據(jù)，該模塊通過比較相鄰兩個事件的數(shù)據(jù)，得到后一事件變化的區(qū)域和變化的節(jié)點：1)如圖2所示，根據(jù)為節(jié)點分配的id比較相鄰兩個事件e和pe中的節(jié)點得到e事件中變化的節(jié)點。pe中不存在的節(jié)點是e中增加的節(jié)點；同一id的兩個節(jié)點在pe中是pn，在e中是n。如果pn和n屬性不一致，則n為e中屬性變化的節(jié)點；如果pn和n坐標不一致，則n為坐標變化的節(jié)點；如果pn和n的xpath前綴不一致，如/HTML/BODY/DIV/A和/HTML/BODY/SPAN/A，則n為父節(jié)點變化的節(jié)點；如果pn和n的xpath序號不一樣，/HTML/BODY/DIV/A[2]和/HTML/BODY/DIV/A[3]，則n是次序變化的節(jié)點；pe中比e多的節(jié)點即為e中被刪除的節(jié)點。2)如圖3所示，合并所有的變化節(jié)點得到幾個局部變化區(qū)域的根節(jié)點。遍歷所有變化的節(jié)點n，將n與根節(jié)點列表RL中的節(jié)點r作比較。如果r包含n則可跳過n，如果n包含r則刪除r，最后將n加入根節(jié)點列表RL。包含關(guān)系表示為A坐標(xa1,xa2,ya1,ya2)，B坐標(xb1,xb2,yb1,yb2)，如果xa1<＝xb1&&xa2>＝xb2&&ya1<＝y(tǒng)b1&&ya2>＝y(tǒng)b2，則A包含B。3)如圖4所示，首先得到局部變化區(qū)域根節(jié)點的父節(jié)點，圖3得到的根節(jié)點屬于變化的節(jié)點，為了能夠在后續(xù)檢測中比較該根節(jié)點的父子關(guān)系和兄弟關(guān)系，該模塊根據(jù)坐標找到這些根節(jié)點的父節(jié)點，規(guī)則是該節(jié)點滿足兩個條件，一是該節(jié)點的坐標包含根節(jié)點，二是該節(jié)點是所有滿足條件一的節(jié)點中面積最小的。接著將坐標重合的區(qū)域進行合并，得到最終局部變化的區(qū)域；最后遍歷事件的所有節(jié)點，得到各個變化區(qū)域內(nèi)的所有節(jié)點，規(guī)則是某一節(jié)點被該區(qū)域包含，則該節(jié)點屬于該變化區(qū)域。如圖5、圖6所示，本發(fā)明節(jié)點匹配模塊具體實現(xiàn)如下：節(jié)點匹配模塊主要負責(zé)匹配參考瀏覽器和待測瀏覽器中同一個事件變化的節(jié)點，該模塊包括兩個步驟：按層完全匹配和全局最相似匹配。1)按成完全匹配如圖5所示，按照DOM樹從上至下遍歷參考瀏覽器中變化的節(jié)點n1，從匹配表中選取與n1的父節(jié)點p1相匹配的節(jié)點p2，將n1與p2在DOM樹中的所有子節(jié)點進行比較，如果找到節(jié)點n2與n1完全一樣，即相似度為1，則n1與n2相匹配存入匹配表，并將n1與n2分別移出待匹配列表。2)全局最相似匹配如圖6所示，遍歷參考瀏覽器中未匹配的節(jié)點n1，與待測瀏覽器未匹配的所有節(jié)點n2計算相似度，相似度最高的節(jié)點為最相似節(jié)點bm，將bm和n1加入匹配表，并將n1與n2移出待匹配列表。如圖7所示，本發(fā)明AG圖構(gòu)造模塊具體實現(xiàn)如下：AG圖構(gòu)造模塊主要負責(zé)對每個事件中變化的區(qū)域構(gòu)造AG圖，得到每個節(jié)點在坐標上的父節(jié)點和兄弟節(jié)點。1)按照節(jié)點面積從小到大的順序遍歷變化區(qū)域內(nèi)的所有節(jié)點NL，選取頭部節(jié)點n1，繼續(xù)遍歷后續(xù)節(jié)點，為n1找到第一個包含n1的節(jié)點n2作為n1的父節(jié)點p，根據(jù)p和n1的坐標計算二者的父子關(guān)系，在n1中存入該父子關(guān)系并將n1存入p的子節(jié)點列表。2)遍歷所有的父節(jié)點p，得到p的子節(jié)點列表CL，將CL內(nèi)所有節(jié)點兩兩構(gòu)造成兄弟，計算二者的兄弟關(guān)系并分別存入兩個節(jié)點。如圖8所示，本發(fā)明節(jié)點比較模塊具體實現(xiàn)如下：1)遍歷參考瀏覽器變化節(jié)點得到an1，從匹配表中取得與之相匹配的節(jié)點an2。2)判斷an1和an2的父節(jié)點是否匹配，如果不匹配則報告an1和an2父節(jié)點不一致，然后該節(jié)點的比較結(jié)束，否則繼續(xù)比較3)判斷an1和an2的父子關(guān)系是否一致，如果不一致則報告二者的父子關(guān)系不一致。4)遍歷an1的兄弟關(guān)系得到s1，對應(yīng)的兄弟節(jié)點為sn1。從匹配表中得到與sn1相匹配的節(jié)點sn2。判斷an2的兄弟節(jié)點中是否有sn2，如果沒有則報告an1和an2的兄弟節(jié)點不一致，接著重新取出新的兄弟關(guān)系，如果有則繼續(xù)進行比較。5)根據(jù)sn2得到an2中的兄弟關(guān)系s2，比較s1和s2是否一致，如果不一致則報告an1和an2的兄弟關(guān)系不一致。返回第四步比較其他的兄弟關(guān)系。提供以上實施例僅僅是為了描述本發(fā)明的目的，而并非要限制本發(fā)明的范圍。本發(fā)明的范圍由所附權(quán)利要求限定。不脫離本發(fā)明的精神和原理而做出的各種等同替換和修改，均應(yīng)涵蓋在本發(fā)明的范圍之內(nèi)。當(dāng)前第1頁1 2 3