重放技术的Web应用跨浏览器兼容性检测方法，在事件捕获阶段记录Web应用在参考浏览器平台运行时产生的各种非确定性事件，并在重放阶段在测试浏览器平台中进行远程重放.通过在重放过程中采集页面信息，保证了检测结果的准确性.为避免重复检测，设计了一种增量式的检测算法提高了检测效率.实验结果表明了所提出方法的有效性. 吴国全 1,2,3 何妹妹 1,2,3 魏 峻 1,2,3 钟 华 1 黄 涛 1,2
1 (中国科学院软件研究所软件工程技术中心 北京 100190) 2 (计算机科学技术国家重点实验室(中国科学院软件研究所) 北京 100190) 3 (中国科学院大学 北京 100049) (gqwu@otcaix.iscas.ac.cn)
摘 要： 由于浏览器实现技术的差异以及对标准支持程度的不同，Web应用的跨浏览器不兼容性(cross-browser incompatibilities, XBI)已成为Web应用开发者面临的严重问题.现有的兼容性检测工具仅考虑用户交互事件而忽略了浏览器内部事件，无法保证在不同的浏览器平台上有相同的执行，导致检测结果出现大量误报和漏报.提出了一种基于捕获 重放技术的Web应用跨浏览器兼容性检测方法，在事件捕获阶段记录Web应用在参考浏览器平台运行时产生的各种非确定性事件，并在重放阶段在测试浏览器平台中进行远程重放.通过在重放过程中采集页面信息，保证了检测结果的准确性.为避免重复检测，设计了一种增量式的检测算法提高了检测效率.实验结果表明了所提出方法的有效性.
关键词： 跨浏览器兼容性；Web应用；JavaScript；捕获 重放；测试
随着互联网以及Web技术的快速发展，Web应用正在成为重要的信息获取和交流平台.应用开发者希望应用能在各种主流的浏览器平台上表现一致，但由于浏览器实现技术的差异以及对标准支持程度的不同，导致Web应用在不同的浏览器平台上运行时可能出现行为和页面展现方面的不一致，称为跨浏览器的不兼容问题(cross-browser incompa-tibilities, XBI).X-PERT [1] 将XBI分为3类：行为不兼容(behavior XBI)、结构不兼容(structure XBI)和内容不兼容(content XBI).
1) 行为不一致.这类不一致指页面中元素的功能失效.例如点击链接页面无法跳转、点击按钮页面没有反应.
2) 结构不一致.这类不一致指页面中元素在结构布局方面的问题.例如：2个按钮在Chrome浏览器中横排且上下对齐，但是在IE中显示为竖排.
3) 内容不一致.这类不一致进一步分为文本内容不一致和可视内容不一致.文本不一致指的是元素内部的文本不同；可视内容不一致是指元素在可视化方面的不同，如同一个元素在不同浏览器上的渲染效果存在差异.
为自动检测跨浏览器不兼容问题，目前工业界和学术界已经提出了很多的方法和工具 [2-4] ，但不足在于仅考虑了用户交互事件，而忽略了浏览器内部事件，如随机数、日期、定时器和XHR等，无法保证在不同的浏览器上有相同的执行，导致检测结果产生大量的误报或漏报.
本文提出了X-CHECK——一种基于捕获 重放技术的Web应用跨浏览器兼容性检测方法.X-CHECK首先在参考浏览器平台中访问Web应用，并捕获各种非确定性事件.接着采用远程重放技术在测试浏览器平台重放捕获的事件序列，并在重放过程中抽取相关的页面数据.与已有方法相比，提高了页面数据采集的准确性.此外，注意到在交互式Web应用中，大多数事件仅引起页面的局部变化，X-CHECK设计了一种增量式的XBI检测算法，仅检测事件重放后发生变化的元素节点，提高了检测效率.论文的主要工作和贡献包括：
1) 提出了一种基于捕获 重放技术的跨浏览器兼容性检测方法，保证了Web应用在不同的浏览器上有相同的执行，提高页面信息采集的准确性；
2) 设计了一种增量式的XBI检测算法，仅检测事件重放后发生变化的元素节点，避免了重复的XBI检测，提高了检测效率；
3) 实验结果表明X-CHECK能够准确、高效地检测各种XBI，并为开发者诊断和定位XBI提供了支持.
Web应用测试可分为功能测试和性能测试 [5] ，在性能测试方面，文献[6]提出了一种基于建模的方法，跨浏览器兼容性检测属于功能测试.为自动检测跨浏览器兼容性问题，已有方法 [1,7-9] 可以分为页面抓取与页面比较(crawl and compare)2个阶段.页面抓取阶段，在不同的浏览器上对Web应用进行自动的探测，并抽取页面相关数据，包括DOM树信息、布局信息以及页面截图信息；页面比较阶段，通过对收集的页面数据进行比较，以发现各种跨浏览器的不一致问题.此外，工业界也提供了Web应用跨浏览器兼容性检测工具和服务，典型的包括：Browserbite [2] ，MogoTest [3] ，Browsera [4] 等.已有这些方法和工具由于没有考虑浏览器内部的非确定性事件，导致检测结果出现漏报和误报.
目前，已有很多关于客户端Web应用的捕获 重放研究.根据实现机制的不同大体分为2类：浏览器独立的捕获 重放技术 [10-12] 和针对特定浏览器的捕获 重放技术 [13-14] .
Mugshot [10] 是一套针对客户端JavaScript应用的调试工具，核心是用标准的JavaScript实现对非确定性事件的录制和重放.Jalangi [11] 是一个针对JavaScript语言的选择性捕获 重放框架，用户选择关注的代码片段后，工具可对该代码片段进行录制和重放，但方法开销较大，不适合对部署发布后的Web应用进行在线监测.JSBench [12] 使用捕获 重放技术创建JavaScript的基准测试，用以评估基于JavaScript的Web应用的性能.
不同于上述研究，Timelapse [13] 受虚拟机捕获 重放技术启发，通过对Webkit进行插装以支持捕获 重放各种非确定性事件，目前已集成到Safari的调试工具中.WaRR [14] 是一个高保真的Web应用捕获 重放工具，事件捕获功能嵌入到Webkit中，支持捕捉各种DOM事件，如单击、按键等.由于Webkit禁止对JavaScript事件的特定属性进行更改，重放时需要在特定开发的浏览器上模拟用户交互.
通过以上分析可以看出，已有的客户端Web应用捕获 重放工作主要关注JavaScript错误分析以及性能评估，目前尚无相关研究使用该技术用于Web应用的跨浏览器兼容性错误检测.
本节介绍所提出的基于捕获 重放技术的跨浏览器兼容性检测方法.图1给出了方法的总体流程图，主要包括4个步骤：
1) 事件序列收集.捕获Web应用在参考浏览器平台运行时产生的各种非确定性事件，包括用户事件，如点击、按键;浏览器内部事件，如定时器、随机数的产生.详见2.1节.
2) 远程重放.根据用户选择的被测浏览器平台，通过远程控制器在不同的浏览器平台重放事件序列，详见2.2节.
3) 页面数据收集.在重放事件时，收集当前页面的信息，包括变化的DOM节点信息、节点布局信息和页面截图信息，详见2.3节.
4) 兼容性检测和错误报告.采用增量式的检测算法对采集到的数据进行XBI检测，并生成兼容性问题报告，详见2.4节.
Fig. 1 Approach overview
图1 方法总体流程图
2.1 事件序列收集
为了支持跨浏览器的事件捕获和重放，X-CHECK采用了Mugshot的方法，使用JavaScript语言实现事件的捕获和重放.
目前，X-CHECK支持3类非确定性事件，包括DOM事件(如load、键盘事件、鼠标事件、DOM-ContentLoaded、滚轮、resize)、XHR事件和定时器事件(如函数 setTimeout ， setInterval ).除了这些事件，X-CHECK还捕获了非确定性的函数调用，如函数 random 和 Date .此外，X-CHECK扩展了Mugshot，能够对多页面的Web应用进行事件捕获 重放.下面介绍在X-CHECK中如何支持上述功能.
关于DOM事件，X-CHECK采用DOM level 2模型来捕获用户交互事件(目前大多数主流浏览器都支持该模型).该模型定义了一个3阶段的事件处理模型：捕获—目标—冒泡(capturing-target-bubbling).在捕获阶段，浏览器将事件交由window对象和document对象处理后，沿DOM树根节点一直向子节点传递，直到目标节点.在目标节点处理完事件后，进入冒泡阶段，事件反向由目标节点向祖先节点依次处理.X-CHECK通过在window对象上注册事件捕获处理程序，可以在该事件被其他节点处理之前记录各种DOM事件.
DOM事件主要是用户事件，这类事件的捕获方法如本节所述，仅需通过API注册感兴趣事件的捕获处理程序即可.对于浏览器内部事件，因为没有类似DOM事件的接口进行事件捕获，X-CHECK中重写了这类事件的注册接口和回调函数，以捕获浏览器内部事件.下面分别介绍了定时器内部事件和XHR内部事件的收集实现.
定时器事件使用函数 setTimeout ， setInterval 注册回调事件，该事件在函数 setTimeout 中被触发1次，在函数 setInterval 中每隔一段时间被触发1次，直至该定时器被取消.为捕获定时器事件，X-CHECK重写函数 setTimeout 和 setInterval .在重写后的函数里封装回调事件，封装后的回调事件在被触发时会先保存该事件的信息，然后再触发原始的事件.
XHR(XMLHttpRequest)对象可以在不向服务器提交整个页面的情况下，实现页面的局部更新. readyState 属性记录了XHR的状态，该属性从0开始递增变化，直到接收到完整的响应时变为4.应用在函数 onreadystatechange 上注册1个回调函数以处理响应消息，该函数在每次 readyState 变化时都会被调用.捕获XHR事件的方法和定时器事件类似，X-CHECK封装了XHR的构造函数，通过为 onreadystatechange 注册事件捕获函数记录XHR对象的状态.X-CHECK还封装了XHR的函数 send open ，记录请求内容和函数 send open 的返回值.为缓存响应消息，X-CHECK重写了变量 responseXML 和 responseText 的 setter 及 getter 方法.
非确定性函数包括 Date 和 random ，通过调用 Date 的构造函数获得当前时间，调用函数 Math . random 生成1个随机数.为了捕获这2个非确定性函数的调用，X-CHECK封装了 Date 的构造函数和函数 random ，用来记录原始函数的返回值.
复杂的Web应用通常包括多个页面，为支持多页面Web应用的捕获和重放，当用户访问Web应用时，X-CHECK会自动生成1个唯一的会话 id ，在该应用的所有页面中都使用统一的会话 id .此外，X-CHECK还为当前访问的页面生成1个页面id(初始化为0)，当页面跳转时，利用函数 beforeonunload ，保存当前页面捕获的事件序列，并增加页面 id 的值以记录在新页面中捕获的事件.
2.2 远程重放
在远程重放步骤中，捕获的事件序列将在不同的浏览器环境中重放.为了实现远程重放，X-CHECK需要在被测浏览器平台上安装重放客户端，用以接收服务器的重放命令，给Web应用注入重放模块，并在浏览器中重放事件序列.
在重放事件序列前，X-CHECK重写了函数 setInterval setTimeout ， random ，XHR， Date .重写的函数 setInterval setTimeout 会记录注册的回调函数，当重放定时器事件时，将会按顺序执行回调函数.对于XHR事件，X-CHECK将直接从捕获日志里获取函数 send open 的返回值和应答内容，而无需跟服务器进行交互.当Web应用调用函数 random 和 Date 时，X-CHECK将直接从日志中返回相应的值.
为支持多页面Web应用的重放，X-CHECK向函数 beforeonunload 中注册了回调函数用来在页面跳转时增加页面 id .每到达1个新页面，注入的重放模块会向服务器请求新页面的录制日志.
2.3 页面数据收集
重放事件的过程中，X-CHECK同时收集当前的页面信息，包括DOM节点信息、节点布局信息和页面截图.目前主流的Web 2.0应用多采用Ajax技术与服务端进行通信，并且尽可能将计算在客户端完成，因此用户事件通常只会导致页面的局部信息发生更新.如果在每个事件发生时都采集所有的DOM节点和布局信息，就会收集到很多的冗余信息，这不仅会导致冗余的兼容性问题报告，还会消耗浏览器的内存资源.
算法1. 页面数据收集.
输入：事件序列 L ；
输出：页面数据列表 C .
① 初始化 C =∅；
② for e ∈ L do
③ 重放事件 e ；
④ S =页面截图；
⑤ if e 是load事件then
⑥ D =所有节点信息；
⑦ G ( id ，坐标)= D 中节点坐标；
⑧ 将 e ， D ， S 加入 C ；
⑨ 启动Mutation Observer；
else
变动的节点；
N = extractCoordNodes ( M ， G )；
将 e ， M ， N ， S 加入 C ；
end for
为了解决上述问题，X-CHECK在重放每个事件后，仅收集变化的DOM节点信息和布局信息.算法1描述了X-CHECK在重放时的页面数据收集方法.重放事件后(行③)，先对当前页面进行截图(行④).如果是load事件，收集所有的节点信息(行⑥)并创建 
id ，坐标 
映射表(行⑦)， id 是由X-CHECK为每个节点分配的，接着启动Mutation Observer(行⑨)，用来观察DOM节点的变化.Mutation Observer是W3C的一个标准 [15] ，通过调用该接口，当DOM树变动时，可以得到变动节点的集合(行 
)，目前主流的浏览器均支持该接口.
然而，Mutation Observer只能捕获DOM树中变化的节点，不能捕获坐标变化的节点.在某些场景下，节点信息的变化可能导致其邻近节点的坐标变化，邻近节点包括父节点和兄弟节点.如图2所示，当1个新的课程添加到列表中，列表的高度会增加，即它的父节点坐标受到了影响，而Mutation Observer只能捕获到新加入的节点(1个 tr 元素，2个 td 元素).为了采集坐标变化的节点，算法1调用函数 extractCoordNodes 获取坐标变化的DOM节点(行 ).所有收集到的数据保存在列表 C 中(行⑧和 
)，这些数据用于进行Web应用的跨浏览器兼容性检测.
Fig. 2 Selected courses
图2 已选课程列表
算法2. 抽取坐标变化的节点.
输入：变动节点列表 M 和映射表 G ；
输出：坐标变化的节点列表 N .
① 初始化 P =∅, N =∅；
② for n ∈ M do
③ 更新 n 在 G 中的坐标；
④ p = findNotAffectedParent ( n ， G )；
⑤ 将 p 加入 P ；
⑥ end for
⑦ Q = findCommonParent ( P )；
⑧ for q ∈ Q do
⑨ L = getCoordChangeChilds ( q )；
⑩ 将 L 加入 N ；
end for
算法2描述了如何计算得到坐标变化的节点.X-CHECK为每个节点添加唯一 id ，并维护1个全局的映射表 G =( id ，坐标).对于每个变化的节点，先在 G 中更新它们的坐标(行③)，然后调用函数 findNotAffectedParent 从该节点沿DOM树向上找到1个坐标没有变化的祖先节点 p ，并保存在 P 中(行④～⑤).处理完 M 中每个节点，调用函数 findCommonParent 对 P 中的节点进行合并保存在 Q 中(行⑦)，合并条件为当1个节点为另一个节点的祖先节点时，保存祖先节点.对 Q 中的每个节点再调用函数 getCoordChangeChilds 得到所有坐标变化的子节点 L ，加入到 N 中(行⑨～⑩)，在遍历子节点时，更新 G 中已遍历的节点坐标.该算法先向上查找父节点，再向下查找变化的子节点，是为了不仅能收集到坐标变化的父节点，也能收集到由于某一节点信息变动而影响了坐标的兄弟节点和子节点.
2.4 增量式兼容性检测算法
基于采集到的数据，X-CHECK提出了一种增量式的检测算法(见算法3)，该算法只检测变化的节点，算法输入是在2个不同浏览器中收集到的数据 C 1 和 C 2，输出是一系列的XBI. C 1 ， C 2的结构是{ t 0 ， t 1 ，…， t m }， m 代表页面的编号.每个 t i 包含1个事件列表 e 0 ， e 1 ，…， e m ， m 代表事件的序号.如果 e j 是load事件，则 e j 中含有所有的DOM节点 D 以及截图 S ；否则 e j 包含变化的节点 M ，坐标改变的节点 N 和截图 S ；如果 M =∅，则 N =∅, S =∅.
算法3. 增量式检测算法.
输入：2个浏览器的页面数据 C 1 ， C 2；
输出：兼容性问题列表 X .
① 
= C 1 重放的页面数；
② 
重放的页面数；
③ 
④ 将 和 
不一致加入 X ；
⑤ end if
⑥ 
⑦ 
的事件数；
⑧ 
的事件数；
⑨ 
⑩ 将 
和 
不一致加入 X ；
；
；
；
；
将 
加入 X ；
end for
2.4.1 行为XBI检测
为了检测行为的兼容性问题，对于重放的事件序列考虑3种情况：
1) 重放的页面数不同(行③).例如某个页面的最后一个事件失效，没有让应用跳转到下个页面，就会导致最终重放得到的页面数不同.
2) 对于同一个页面的事件序列 和 ，成功重放的事件数目不同(行⑨).例如某个事件重放时出现错误，导致后续事件无法继续重放.
3) 重放事件 
和 
产生变化的DOM节点不同(行 )，即变化的DOM节点不能完全匹配.如果是load事件，则比较整个DOM树的节点，如果是其他事件,则只比较变化的节点.
2.4.2 结构XBI检测
X-CHECK的结构XBI检测算法是基于X-PERT提出的AG(alignment graph)，AG用来描述页面元素间的2种结构关系，分别是父子的包含关系和同一父节点的兄弟关系.图3是table元素的AG示例，实线表示包含关系，虚线表示兄弟关系.
Fig. 3 An example of AG
图3 AG的例子
算法4. diffStructure .
输入：不同的浏览器同一事件 e 1 , e 2 ；
输出：结构XBI列表 S .
① if e 1 和 e 2 是load事件then
② D 1 = e 1 的所有节点；
③ D 2 = e 2 的所有节点；
④ A 1 = buildAG ( D 1 )；
⑤ A 2 = buildAG ( D 2 )；
⑥ L m = matchDom ( D 1 , D 2 )；
⑦ S = compareAG ( A 1 , A 2 , L m )；
⑧ else
⑨ N 1 = e 1 坐标变化的节点；
⑩ N 2 = e 2 坐标变化的节点；
变动的节点；
变动的节点；
；
；
；
updateMatchList ( L m , L n )；
；
算法4详细地描述了增量式检测算法中的结构 XBI 检测函数diffStructure的实现，该算法比较了2个 AG 的差异.对于 load 事件，首先得到页面 DOM 树D 1 和D 2 ，接着调用函数 buildAG 为DOM树构造AG图 A 1 和 A 2 (行②～⑤).在比较2个AG图( A 1 , A 2 )前，首先调用函数 matchDom 对 D 1 和 D 2 进行匹配，匹配结果存储在匹配表 L m 里(行⑥)，再调用函数 compareAG 对相匹配节点的结构进行比较，得到结构XBI存在 S 中(行⑦).
对于其他类型的事件，该算法能够增量式的检查页面的结构XBI.首先得到坐标变化的节点( N 1 , N 2 )和DOM树中变化的节点( M 1 , M 2 )(行⑨ 
)，接着用这些节点更新AG图(行 
)，收集更新过程中变化的节点，并存储在各自的AG中.然后调用函数 matchDom 对 M 1 和 M 2 进行匹配(行 )，并更新全局的匹配映射表(行 ).最后比较AG中变化的节点，得到结构XBI存在 S 中(行 ).
2.4.3 内容XBI检测
内容不一致包含可视内容的不一致和文本内容不一致.可视内容不一致指页面某个元素的外观不同，如1个元素的文本样式或背景的不同.X-CHECK根据元素坐标从页面截图中得到元素图片，然后比较图片的相似性，相似性低的元素加入到XBI列表中(算法3行 ).文本内容XBI表示某个元素在2个浏览器上的文本不同，X-CHECK对相匹配的文本节点进行文本值的比较，不相等即为文本内容不一致(算法3行 ).
基于上述方法实现了Web应用跨浏览器兼容性检测工具——X-CHECK.采用代理服务器WebScarab [16] 拦截Web应用的HTTP请求和应答，当返回消息的类型是html时插入捕获 重放库.此外，代理服务器还将缓存所有应答，保证在重放时访问相同的内容.
远程重放客户端接收服务器的指令，重放服务器指定的事件序列.重放客户端可以作为浏览器的扩展也可以作为一个守护进程.在重放过程中，不仅要收集变化的节点数据，包括坐标变化的节点，还要在每次页面变化时对页面进行截图，我们选择Selenium [17] 在重放过程中对页面进行截图.Selenium支持大多数主流的浏览器，如IE，Firefox，Chrome，Safari.X-CHECK基于Selenium实现了重放客户端，由重放客户端调用重放库中的方法重放事件，并根据重放结果确定页面是否发生变化，如果页面改变则调用函数 getScreenshotAs 获得页面截图.
X-CHECK采用OpenCV [18] 来比较2个元素的图片的相似性，首先根据元素坐标从页面截图中得到元素的图片，然后转换为直方图，最后采用相关系数的方法比较2个元素的图片相似性.
为了评估所提出的跨浏览器兼容性测试方法的有效性，我们进行了一系列实验，实验主要关注2个问题：
1) 增量式兼容性检测算法的效率；
2) X-CHECK的检测结果与已有方法的比较.
本节将介绍实验案例、所采用的实验方法和实验结果.
4.1 实验案例
表1列出了实验中用到的6个Web应用，前3个是使用HTML5，JavaScript，CSS3开发的单页面游戏.其中，Annex是2个玩家对抗的围棋游戏，CountBeads是提高小孩数数能力的游戏，Rabbit是类似于扫雷的游戏；另外3个为多页面应用.其中，Organizer是一个开源的个人任务管理的应用，Roundcube是一个基于浏览器的IMAP客户端，ISCAS是中国科学院软件研究所的官网.表1显示了每个页面DOM节点数的最小值、最大值和平均值，这些数值表明单个页面的复杂程度，节点数越大表明页面越复杂.
Table 1 Web Application
表1 Web应用
4.2 实验方法
针对问题1，我们将X-CHECK与X-PERT比较以评估增量式检测算法的效率，实验主要关注检测结构XBI.X-PERT方法的核心思想是在每个事件后采集完整的DOM树和坐标信息，接着构造AG并进行结构XBI检测.为了公平比较，我们修改X-CHECK实现了X-PERT的结构XBI检测方法，在每个引起DOM节点变化的事件重放后采集完整的DOM树和坐标信息，并直接构造AG.结构XBI检测所花费的时间包括节点匹配、AG生成和匹配节点结构比较3部分.针对问题2，由于X-PERT代表目前最新的兼容性检测技术，我们将X-CHECK与其进行比较以评估X-CHECK的检测能力，该实验的环境配置如表2所示:
Table 2 Platform Configuration
表2 实验环境配置
此外，为得到重放用的事件序列，我们招募了2名没有参与该项目的学生使用参考浏览器平台访问6个Web应用，并在此过程中由事件捕获模块记录各种非确定性事件.
4.3 实验结果
针对问题1，表3列出了X-CHECK和X-PERT进行结构XBI检测时所花费的时间、收集的日志文件大小以及平均每个页面捕获到的事件数.根据实验结果可知，X-CHECK在检测效率方面远远好于X-PERT，并且采集的页面数据小于X-PERT.例如对于CountBeads，X-PERT收集到的页面数据有27.6 MB，检测结构XBI需要花费34 s，而X-CHECK收集到的数据只有1 MB，所提出的增量式检测算法检测结构XBI只需0.5 s.
表4、表5分别列出了 X-CHECK和X-PERT详细的检测结果，表格各项分别表示应用名称、行为XBI、结构XBI、内容XBI、总的XBI、测试平台和参考平台，其中内容XBI又分为文本XBI和可视XBI，各类XBI有TP和FP两个数值，TP表示工具检测到的XBI与人为观察到的XBI一致的数目，FP表示工具检测到的但人为观察不到的XBI数目.Annex，CountBeads，Rabbit能够在Safari正常地呈现和使用，所以选择该浏览器为参考浏览器平台；Organizer和Roundcube在Chrome和Safari上都能正常地呈现和使用，实验中选取Chrome作为参考浏览器平台，并且没有将Safari作为待测浏览器平台；ISCAS在Firefox中能正常地呈现，实验中选择Firefox作为参考浏览器平台.
Table 3 Structure XBI Detection Time of X-CHECK and X-PERT
表3 结构XBI检测时间比较
Table 4 X-CHECK’s Results
表4 X-CHECK的XBI详细检测结果
Table 5 X-PERT+’s Resuls
表5 X-PERT+的XBI详细检测结果
表6列出了X-CHECK和X-PERT的XBI检测结果比较，表格各项分别表示应用名称、人工找到的XBI以及2个工具检测得到的结果.从实验结果可以看出，X-CHECK在检测结果的准确性和召回率方面都要高于X-PERT.例如对于Roundcube，X-CHECK只有非常少的可视内容检测的误报，而X-PERT误报数大于1 000，这是因为用户在使用该应用时改变了Roundcube的样式模板，而X-PERT没有缓存录制过程中的各个页面，所以当再次访问该应用时样式模板是不同的，导致误报了大量的结构XBI.CountBeads和Rabbit应用都使用了大量的函数 random 和定时器，由于X-PERT没有捕获函数 random 的返回值以及定时器事件，每次访问应用时的行为和外观都不同，导致检测结果出现大量误报.综上所述，我们能够得到这样的结论：对于上述这些应用，与目前最新的跨浏览器兼容性检测技术相比，X-CHECK提高了XBI检测结果的准确性，避免产生大量的误报.
Table 6 X-CHECK’s Results Comparison with X-PERT+
表6 X-CHECK和X-PERT的XBI检测结果比较
由于浏览器平台的多样性和实现的差异性，Web应用的跨浏览器兼容性已经成为一个突出问题.本文提出了一种基于捕获 重放技术的跨浏览器兼容性检测方法，保证了Web应用在不同的浏览器环境中有相同的执行，提高了检测结果的准确性.
为提高检测效率，X-CHECK使用了目前主流浏览器都支持Mutation Observer接口采集每个事件后变化的DOM节点.为兼容不支持Mutation Observer的浏览器(如低版本的IE)，可在重放事件后，收集所有DOM节点的数据，并比较事件重放前后收集的DOM节点数据，计算每个事件引起的变化的DOM节点，再采用增量式检测算法进行检测.我们将在今后的工作中进一步完善该方法，并考虑与Web应用探测工具相结合，在页面探测过程中捕获各种非确定性事件以提高工具的自动化程度.
参考文献：
[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[CP OL]. 2009(2014-09-15) [2016-03-17]. https: bitbucket.org mogotest
[4]Browsera. Browsera[CP OL]. 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应用测试技术进展[J]. 计算机研究与发展, 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系统性能测试框架及其混合建模过程[J]. 计算机研究与发展, 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.org citation.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 record replay 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.com OWASP OWASP-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.
Replay Wu Guoquan 1,2,3 , He Meimei 1,2,3 , Wei Jun 1,2,3 , Zhong Hua 1 , and Huang Tao 1,2
1 ( Technology Center of Software Engineering , Institute of Software , Chinese Academy of Sciences , Beijing 100190) 2 ( State Key Laboratory of Computer Science ( Institute of Software , Chinese Academy of Sciences ), Beijing 100190) 3 ( University of Chinese Academy of Sciences , Beijing 100049)
Abstract： 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 record replay 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.
Key words： cross browser compatibility; Web application; JavaScript; record replay; testing
收稿日期： 2016-12-09；
修回日期： 2016-04-06
基金项目： 国家自然科学基金项目(61472407)；国家“九七三”重点基础研究发展计划基金项目(2015CB352201)；国家“八六三”高技术研究发展计划基金项目(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