CN105468779B - 一种面向浏览器兼容性检测的客户端Web应用捕获与重放***及方法 - Google Patents

Abstract

本发明公开了一种面向浏览器兼容性检测的客户端Web应用捕获与重放***及方法。在事件捕获阶段记录Web应用在参考浏览器平台运行时产生的各种非确定性事件，包括外部的用户交互事件以及浏览器内部事件(如定时器事件、Ajax消息以及非确定性的函数调用)，并保存外部事件与内部事件之间的因果关系；在重放阶段在测试浏览器平台中进行跨浏览器的远程重放，并在重放过程中采集页面信息；通过从对不同浏览器中采集到的信息进行比较以检测各种兼容性问题。本发明可有效提高检测结果的准确性。

Description

一种面向浏览器兼容性检测的客户端Web应用捕获与重放系 统及方法

技术领域

本发明涉及一种面向浏览器兼容性检测的客户端Web应用捕获与重放***及方法，属于互联网以及Web技术领域。

背景技术

随着互联网以及Web技术的快速发展，Web应用正在成为重要的信息获取和交流平台。应用开发者希望应用能在各种主流的浏览器平台上表现一致，但由于浏览器实现技术的差异以及对标准支持程度的不同，导致Web应用在不同的浏览器平台上运行时可能出现行为和页面展现方面的不一致，称为跨浏览器的不兼容问题(XBIs)。通常跨浏览器不兼容性问题(XBI)分为三类：行为不一致、布局不一致和内容不一致。行为不一致：这类不一致通常指页面中元素的功能失效，如点击链接页面无法跳转，点击按钮页面没有反应；布局不一致：指页面中元素在布局方面的错误。例如：两个按钮在Chrome浏览器中横排且上下对齐，但是在IE浏览器中则显示为竖排；内容不一致：进一步分为文本内容不一致和可视内容不一致。文本不一致指的是元素内部的文本不同，可视内容不一致是指元素在可视化方面，如图片内容、元素样式等方面的不同。

为自动检测跨浏览器不兼容问题，目前工业界和学术界已经提出了有很多的方法和工具。已有的方法(参见：S.R.Choudhary,M.R.Prasad,and A.Orso.Crosscheck:Combining crawling and differencing to better detect cross-browserincompatibilities in web applications，ICST’2012)、(参见：S.R.Choudhary,H.Versee,and A.Orso.Webdiff:Automated identification of cross-browser issuesin web applications.In ICSM’2010)、(参见：A.Mesbah and M.R.Prasad.Automatedcross-browser compatibility testing.In Proceedings of the 33rd InternationalConference on Software Engineering,pages 561–570.ACM,2011)、(参见：S.RoyChoudhary,M.R.Prasad,and A.Orso.X-pert:Accurate identification of cross-browser issues in web applications.In Proceedings of the 2013InternationalConference on Software Engineering,pages 702–711.IEEE Press,2013)通常可以分为两个阶段：页面抓取与页面比较。在页面抓取阶段，在不同浏览器上对Web应用进行自动的探测，并抽取页面相关数据，包括DOM树信息、布局信息以及页面截图信息；在页面比较阶段，通过对收集的页面数据进行比较，以发现各种跨浏览器的不一致问题。Browserbite(参见http://app.browserbite.com/)、MogoTest(参见http://mogotest.com/)和Browsera(参见http://www.browsera.com/)提供了Web应用跨浏览器兼容性检测服务。但不足在于仅考虑了用户交互事件，而忽略了浏览器内部事件，如随机数、日期、定时器和XHR等，无法保证在不同的浏览器上有相同的执行，导致检测结果产生大量的误报或漏报。

目前也有很多关于客户端Web应用的捕获/重放研究(参见S.Andrica andG.Candea.Warr:A tool for high-fidelity web application record and replay.InDSN’2011,pages 403–410.)、(参见B.Burg,R.Bailey,A.J.Ko,andM.D.Ernst.Interactive record/replay for web application debugging.InProceedings of the 26th Annual ACM Symposium on User Interface Software andTechnology,UIST’13,pages 473–484)、(参见J.Mickens,J.Elson,andJ.Howell.Mugshot:Deterministic capture and replay for javascriptapplications.NSDI’10,pages 11–11)、(参见：K.Sen,S.Kalasapur,T.Brutch,andS.Gibbs.Jalangi:A selective record-replay and dynamic analysis framework forjavascript.In Proceedings of the 20139th Joint Meeting on Foundations ofSoftware Engineering,ESEC/FSE 2013,pages 488–498)。但其主要目标是支持对Web应用的错误分析与定位。根据实现机制的不同大体分为两类：浏览器平台无关的捕获/重放技术和特定浏览器的捕获/重放技术。浏览器平台无关的捕获/重放技术由于采用JavaScript语言捕获/重放各种非确定性事件，可适用于跨平台的浏览器捕获和重放。但现有浏览器平台无关的捕获/重放技术的不足在于：为重现一个JavaScript错误，捕获的事件序列通常在相同的浏览器平台上进行重放，而没有考虑在跨浏览器平台的情况下，在一个浏览器上捕获的事件序列在另外不同的浏览器上进行重放时，可能由于不兼容的JavaScript接口调用错误导致重放失败甚至错误的重放，最终导致检测结果出现误报和漏报。例如考虑图1所示的JavaScript代码，当在Chrome中运行时，可能捕获的事件序列如图2所示。当事件序列在IE6中重放时，由于不支持firstElementChild接口，在执行第一条事件对应的事件处理函数时，el将为null。当调用语句el.innerHTML时，浏览器抛出异常，导致定时器没有注册fn0。当重放第二个事件时，fn1被注册。当第三个事件被重放时，由于fn0没有注册，fn1被错误的调度，并错误的读取了本应由fn0读取的随机数。当第四个事件被调度时，由于找不到注册的回调函数，导致重放失败，并影响后续事件的正确重放。

发明内容

为解决上述问题，本发明提出了一种面向浏览器兼容性检测的客户端Web应用捕获与重放***及方法，为支持跨浏览器的捕获和重放，在事件序列收集阶段，除了捕获Web应用在浏览器平台上运行时各种用户事件和浏览器内部事件，还记录事件之间的因果关系；在重放阶段，在待测浏览器平台上进行事件重放，并在重放事件之前检测事件处理函数是否与事件捕获阶段的一致，并同时收集页面信息，基于在重放阶段收集的页面信息进行检测，提高了检测结果的准确性。

本发明技术解决方案：一种面向浏览器兼容性检测的客户端Web应用捕获与重放***，包括：Web代理模块、事件捕获模块、重放服务器、重放代理模块，事件重放模块、页面数据收集模块和兼容性检测模块；其中：

Web代理模块，负责协调客户端与Web应用服务端的交互，在运行时拦截客户端与服务器端的请求和响应消息，并对请求和响应内容进行检查。在事件捕获阶段，当参考浏览器请求页面时，由Web代理模块在返回的页面中***事件捕获模块；在事件重放阶段，当重放代理模块启动参考浏览器和待测浏览器时，由Web代理模块在返回的消息中***事件重放模块；

事件捕获模块，负责捕获并记录客户端与Web应用进行交互时产生的各种非确定性事件并形成事件序列，保存至重放服务器，所述非确定性事件包括DOM(文档对象模型)事件、浏览器内部事件及非确定的函数调用；DOM事件包括各种用户事件(如：点击事件、键盘输入事件)；浏览器内部事件包括定时器事件、Ajax消息；非确定函数调用包括随机数生成以及日期函数调用；

重放服务器，根据收集到的事件序列，负责向远程客户端发起重放请求；重放服务器首先接收远程客户端的注册请求，并根据用户指定的参考浏览器平台信息和待测浏览器平台信息，与已经注册的远程客户端信息进行匹配，匹配成功后，向指定的远程客户端发送重放指令，指令的内容包括：待测Web应用的URL，需要重放的事件序列的ID；远程客户端的重放代理模块接收到重放命令后，将启动需要检测的浏览器(包括参考浏览器和待测浏览器)开始进行重放；

重放代理模块，负责向重放服务器发送注册请求，注册内容包括所在远程客户端上安装的浏览器平台信息，并接收来自重放服务器的重放请求，在重放指定的事件序列前；首先配置浏览器指定Web代理模块的URL地址，再打开浏览器访问指定的Web应用，由Web代理模块在返回页面中***事件重放模块；

事件重放模块，负责将事件捕获模块捕获到的的各种非确定性事件分别在参考浏览器和待测浏览器中进行重放；事件重放模块接收重放代理模块转发过来的事件序列ID，根据该ID向重放服务器请求待重放的事件序列并进行重放；每重放完一个事件，该模块调用页面数据收集模块进行页面数据采集；

页面数据收集模块，接收来自事件重放模块的通知，负责在重放过程中进行页面数据的收集，并将收集的页面数据送至兼容性检测模块；收集的页面数据包括：每个DOM节点的属性信息、节点的布局信息以及整个页面的截图信息；

兼容性检测模块，根据页面收集模块收集的页面数据，分别进行行为不一致、布局不一致和内容不一致检测，并给出检测报告。

所述Web代理模块实现如下：

(1)在事件捕获阶段，接收并向Web应用服务端转发来自参考浏览器的请求，如果请求中的响应消息的类型为“html”,则首先缓存请求和响应内容，然后在返回的响应消息中定位<head>的位置，并在<head>标签后***事件捕获模块，最后将插装后响应消息返回给参考浏览器；

(2)在事件重放阶段，对浏览器(参考浏览器和待测浏览器)发送给Web应用服务端的请求进行检测，如果请求与缓存内容相同，则直接取出对应的响应消息，并在响应消息的头部***事件重放模块，返回给客户端；对于其他没有缓存的请求，则转发给Web应用服务端，在收到响应后直接返回给客户端。

所述事件捕获模块实现如下：

(1)对于DOM事件，在Window对象注册DOM事件的捕获函数，当DOM事件被触发时，捕获函数被调用以保存事件类型、目标元素的XPath信息；为获得事件之间的因果关系，保存DOM事件执行过程中注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

(2)对于定时器事件，被重写的setTimeout/setInterval函数和重写的定时器回调函数捕获，定时器回调函数通过setTimeout/setInterval函数进行注册；当该事件对应的定时器回调函数执行时，重写的定时器回调函数将保存事件类型，对应的source事件Id以及local ID；为获得事件之间的因果关系，同时保存定时器事件执行过程中可能注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

(3)对于Ajax事件，被专门为onreadystatechange事件注册的事件捕获函数所捕获，当该事件对应的响应消息返回时，保存事件类型、对应的source事件ID、local ID和响应消息内容；为获得事件之间的因果关系，同时保存Ajax事件执行过程中可能注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

(4)对于非确定性函数，包括日期和随机数生成，通过调用new Date()获得当前时间，调用Math.random()生成随机数；为了捕获这两个非确定性函数的调用，事件捕获模块封装了Date和Random的构造函数，以记录原始构造函数的返回值；

(5)此外，为了区分不同页面的事件，事件捕获模块还为当前访问的页面生成一个sequence id(初始化为0)，当页面跳转时，触发beforeunload事件，首先上传当前页面捕获的非确定性事件，再将session中保存的sequence值加1，以开始保存在新的页面中捕获的非确定性事件。

所述重放服务器的具体实现如下：

(1)接收来自远程客户端的注册请求；

(2)对注册请求进行解析，提取远程客户端的信息<IP,BR,OS>，其中：IP为远程客户端的ip地址,BR表示远程客户端上安装的浏览器类型和版本信息，OS表示远程客户端上安装的操作***类型和版本信息；

(3)根据注册的远程客户端的信息，匹配用户指定的参考浏览器平台<BR,OS>和待测浏览器平台<BR,OS>；

(4)如果匹配成功，给远程客户端发送重放命令replay(logID)，将收集到的各种非确定性事件在指定的远程客户端中进行重放，其中logID代表指定的事件序列；

(5)如果匹配不成功，则报告没有匹配的待测浏览器平台。

所述重放代理模块的具体实现如下：每个远程客户端中都安装了重放代理，重放代理实现为一个守护进程，当其启动后：

(1)首先向重放服务器进行注册远程客户端的配置信息<IP,BR,OS>，其中，IP表示本机的ip地址，BR表示安装的浏览器类型和版本，OS表示安装的操作***类型以及版本；

(2)接收来自重放服务器的重放命令；

(3)解析重放命令，提取待重放的事件序列ID，浏览器的类型和版本，待测Web应用的URL地址；

(4)配置Web代理地址，打开指定类型和版本的浏览器，并通过Web代理模块访问Web应用服务端。

所述事件重放模块的实现如下：

为支持在各种不同的浏览器中进行事件捕获，使用标准的JavaScript实现，并重写了定时器注册函数setTimeout/setInterval,Ajax请求对象XHR，以及随机函数调用Random()和日期函数Date()，具体的重放流程如下：

(1)根据事件序列ID向重放服务器请求待重放的事件序列，并保存到队列Q中；

(2)当队列不为空时，从队列头部取出事件；

(3)根据事件的不同类型，分别进行重放；

(4)如果事件类型为定时器事件，则首先根据事件ID和local ID得到事件捕获模块保存的事件处理函数H，再根据事件ID和local ID得到事件重放模块缓存的事件处理函数H’,检查H和H’是否相同，如果相同则直接调用事件处理函数H’进行重放；如果没有找到则标记该事件存在执行异常；

(5)如果事件类型为Ajax事件，则首先根据事件ID和local ID得到事件捕获模块得到保存的请求消息M，再根据事件ID和local ID得到事件重放模块缓存的请求消息M’，比较M和M’是否相同，如果相同则返回事件捕获模块保存的响应消息，并重放该事件；如果没有找到则标记该事件存在执行异常；

(6)如果事件类型为DOM事件，则首先根据事件重放模块保存的XPath信息定位目标元素，如果目标元素存在，则重放该事件，否则标记该事件存在执行异常；

(7)在事件重放过程中，如果遇到非确定函数调用，则根据当前重放事件的ID直接从保存的Random和Date列表中返回值，同时在列表中删除该值。若列表为空，则调用原生的Random和Date函数返回，同时标记该事件存在行为不一致。

(8)在事件重放结束后，通知页面信息采集模块抽取页面信息；

(9)为支持多页面Web应用的重放，重放模块向beforeunload事件注册回调函数，以在页面跳转时增加sequence id,每到达一个新页面，注入的重放模块会向服务器请求新页面的录制日志。

所述页面数据收集模块的具体实现如下：

(1)接收来自事件重放模块的通知，进行页面数据的收集；

(2)对DOM树进行遍历，保存每个DOM节点的属性信息，记为<Dr1,…Drn>；

(3)计算每个DOM节点的坐标信息，记为<Cr1,…,Crn>；

(4)对页面进行截屏Pr；

(5)从重放模块获得当前重放事件的Id；

(6)保存{Id,<Dr1,…,Drn>,<Cr1,…,Crn>,Pr}至数据库。

所述兼容性检测模块的具体实现如下：

(1)对于从不同待测浏览器收集到的页面数据，依次访问每个重放的非确定性事件，如果事件被标识存在执行异常，则将该事件加入到行为不一致集合中；若事件没有执行异常，则进一步对事件产生的DOM树进行匹配，如果存在不匹配的节点，则同样将事件归为行为不一致，并同时将不匹配的节点加入到行为不一致集合中；

(2)对于匹配的DOM树中的节点，进一步检测布局不一致。为检测布局不一致，首先对抽取的DOM树进行匹配，再根据DOM树中的节点坐标构造布局图(Alignment Graph)，对于待检测的两个节点，首先判断待检测的两节点是否有相同的父节点，其次判断两节点与兄弟节点是否有相同的对齐关系；如果没有则标识为检测布局不一致；

(3)对于没有布局问题的匹配节点，进一步检测内容不一致；对于文本内容不一致的比较基于字符串相等比较，而对于可视化内容不一致的比较则通过图片比较以检测两张图片是否相同。

一种面向浏览器兼容性检测的客户端Web应用捕获与重放方法，实现步骤如下：

(1)事件序列收集：首先配置参考浏览器通过Web代理访问Web应用。Web代理模块拦截浏览器与服务端的请求和响应消息，对于html类型的响应消息，首先缓存对应的请求和消息内容，然后在html页面的<head>标签后***事件捕获模块(record.js)返回给浏览器；当Web应用在参考浏览器平台上运行时，事件捕获模块记录产生的各种非确定性事件，包括DOM事件(如：点击事件、按键事件)、定时器事件、Ajax事件以及非确定的函数调用(如：随机数调用、日期函数调用)，并同时记录事件之间的因果关系。捕获的非确定性事件形成事件序列并上传至重放服务器；

(2)事件序列重放：重放服务器首先检查当前注册的远程客户端是否和用户选定的参考浏览器和测试浏览器平台相匹配；对于匹配的远程客户端，重放服务器向远程客户端上安装的重放代理模块发送重放指令，指令内容包括待重放的事件序列ID、浏览器的类型和版本信息；重放代理接收到指令后，首先对指定的浏览器进行配置设定Web代理的URL地址，然后打开浏览器通过Web代理模块访问Web应用，在该阶段，对于浏览器对服务端的html请求，Web代理直接从缓存中返回对应的响应消息，并在响应消息的<head>标签后***事件重放模块返回；事件重放模块根据重放代理转发的事件序列ID向重放服务器请求具体的待重放事件序列并进行重放，在重放定时器事件和Ajax事件之前，该模块首先检查该事件注册的回调函数是否与事件捕获阶段记录的相同；同时，在重放事件过程中，收集当前页面的数据，包括DOM节点信息、节点布局信息和页面截图信息；

(3)兼容性检测：基于收集到的页面信息，兼容性检测模块分别进行行为不一致、布局不一致和内容不一致检测，并生成兼容性问题报告。

本发明的积极效果为采用本发明可以对部署后的Web应用进行自动的跨浏览器兼容性检测，通过收集用户与Web应用进行交互时的各种非确定性事件，并在不同的浏览器平台中进行远程重放，通过在重放过程中收集各种页面数据，提高了检测结果的准确性。由于本发明能够保证在不同的浏览器平台上有相同的执行，并在重放过程中及时发现行为不一致错误并避免错误影响后续事件的正确重放，因此可以提高检测结果的准确性，并减少兼容性错误的漏报。

附图说明

图1为JavaScript代码片段；

图2为对应图1的代码片段执行时产生的事件序列；

图3为本发明***的组成框图；

图4为Web Proxy模块在事件捕获阶段的实现流程图；

图5为Web Proxy模块在事件重放阶段的实现流程图；

图6为事件序列收集的实现流程图；

图7为保存的事件之间的因果关系示例；

图8为重放服务器模块的实现流程图；

图9为重放代理模块的实现流程图；

图10为事件序列重放的实现流程图；

图11为页面数据收集模块的实现流程图；

图12为兼容性检测模块的实现流程图。

具体实施方式

为了对能够对本发明理解，在阐述本发明之前，对相关的术语等进行一下说明。

setTimeout:该函数为Javascript语言中预定义的函数，通过setTimeout函数可注册超时定时器；

setInterval：该函数为Javascript语言中预定义的函数，通过setInterval函数可注册周期性触发的定时器；

Ajax(Asynchronous JavaScript and XML)：是一种Web应用客户端与服务端异步交换数据的一种技术，可以在不重新加载整个页面的情况下，对页面的某部分进行更新；

XHR(XMLHttpRequest)：Ajax中的请求对象；

onreadystatechange：XHR对象提供了onreadystatechange事件，可为该事件注册事件处理函数以处理响应消息；

beforeunload：该事件为浏览器中预定义的事件，该事件在当前页面卸载前由浏览器触发。

下面结合附图对本发明进行详细说明。

如图3所示，本发明一种面向浏览器兼容性检测的客户端Web应用捕获与重放***包括：Web代理模块、事件捕获模块(record.js)、重放服务器、重放代理模块，事件重放模块(replay.js)、页面数据收集模块和兼容性检测模块。

下面详细介绍各模块的主要功能：

如图4、图5所示，本发明Web代理模块具体实现如下：

Web代理主要负责协调浏览器对Web应用的访问，在运行时该模块拦截客户端与服务器端的请求和响应消息，并对请求和响应内容进行检查：

1)如图4所示，在事件捕获阶段，Web代理接收并向服务端转发来自浏览器的请求，如果响应消息的类型为“html”,则首先缓存请求和响应内容，然后在返回的响应消息中定位<head>的位置，并在<head>标签后***事件捕获模块(record.js)，最后将插装后响应消息返回给浏览器。

2)如图5所示，在事件重放阶段，对浏览器发送给服务端的请求进行检测，如果请求与缓存内容相同，则直接取出对应的响应消息，并在响应消息的头部***事件重放模块(replay.js)后，返回给客户端。对于其他没有缓存的请求，Web代理则转发给服务端，在收到响应后直接返回给客户端。

如图6所示，事件捕获模块的具体实现如下：

为支持在各种不同的浏览器中进行事件捕获，该模块使用标准的JavaScript实现。事件捕获模块支持以下几类非确定性事件：DOM(文档对象模型)事件、浏览器内部事件及非确定的函数调用。DOM事件包括各种用户事件(如：点击事件、键盘输入事件)；浏览器内部事件包括定时器事件、Ajax消息；非确定函数调用包括随机数生成以及日期函数调用

在该阶段，本发明还保存捕获的非确定性事件之间的因果关系。此外，考虑到目前主流的Web应用都是由多页面构成，该模块还支持对从多个页面中捕获到事件进行关联。

为捕获各种DOM事件，采用DOM level 2(参见http://www.w3.org/TR/DOM-Level-2/)模型来捕获用户交互事件(目前大多数主流浏览器都支持该模型)。该模型定义了一个三阶段的事件处理模型：捕获-目标-冒泡。在捕获阶段，浏览器将事件交由window对象和document对象处理后，沿DOM树根节点一直向子节点传递，直到目标节点。在目标节点处理完事件后，进入冒泡阶段，再反向由目标节点的祖先节点依次处理。事件捕获模块通过在window对象上注册一个事件捕获处理程序，保证在该事件被其他节点处理之前记录该事件的相关属性信息，如：事件类型、目标节点的路径信息、按键信息等。

定时器事件使用setTimeout/setInterval函数进行注册，该事件在setTimeout中被触发一次，在setInterval中每隔一段时间被触发，直至该定时器被取消。事件捕获模块通过封装setTimeout和setInterval函数捕获定时器事件。封装后的函数会先保存该事件的相关信息，再调用原生的函数注册该事件。

Ajax技术可以在不向服务器提交整个页面的情况下，实现页面的局部更新。捕获Ajax事件的方法和定时器事件类似，事件捕获模块封装了XMLHttpRequest(XHR)对象的构造函数，通过为onreadystatechange事件注册事件捕获函数，以记录每个XHR事件的状态信息。同时封装了XHR的send/open方法，以记录请求内容和send/open函数的返回值。为缓存响应消息，重写了属性responseXML/responseText的setter和getter方法以得到响应消息的内容。

非确定性函数包括日期和随机数生成，通过调用Date()获得当前时间，调用Math.random()生成随机数。为了捕获这两个非确定性函数的调用，事件捕获模块封装了Date和Random的构造函数，以记录原始构造函数的返回值。

本发明将事件之间的因果关系定义为：在事件E对应的事件处理函数执行的过程中注册了事件E’,则称E为source事件，E’为target事件。为记录事件之间的因果关系，事件捕获模块为每个捕获的事件设置了一个唯一的ID，在事件被捕获后，除了保存事件的相关信息，还为该事件处理函数执行过程中注册的浏览器内部事件，如定时器事件、Ajax请求、非确定函数维护一个局部的列表，列表中保存的内容如下：对于待注册的定时器事件，首先为其分配一个local ID(从0开始)，并将source事件的event id和local id做为参数传入定时器的callback函数；对于Ajax请求，类似定时器事件，同样为其分配一个local ID(从0开始)，并将source事件的Event Id与local ID作为参数出入callback，并保存请求的内容；对于随机数调用和日期函数，则直接保存局部函数调用的结果。图7给出了为事件id0、id1保存的事件因果关系示例。

本发明还支持对多页面Web应用进行事件捕获/重放，为支持多页面Web应用的捕获和重放，当用户访问Web应用主页时，事件捕获模块会自动生成一个唯一的会话ID，在随后的页面中都将使用同一会话ID。此外，为了区分不同页面的事件，该模块还为当前访问的页面生成一个sequence id(初始化为0)，当页面跳转时，利用beforeunload事件，保存当前页面捕获的事件序列，并增加sequence id的值，以保存下一个页面发生的非确定性事件。

具体的事件捕获流程如下：

1)对于DOM事件，被在Window对象注册DOM事件捕获函数捕获，并保存事件类型、目标元素的XPath等信息。为获得事件之间的因果关系，保存DOM事件执行过程中注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

2)对于定时器事件，被重写的setTimeout/setInterval(Javascript语言中通过setTimeout函数注册超时定时器，通过setInterval函数注册周期性触发的定时器)函数捕获和重写的定时器回调函数捕获。当该事件对应的回调函数执行时，保存事件类型，对应的source事件Id以及local ID。为获得事件之间的因果关系，保存回调函数执行过程中注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

3)对于Ajax事件，被专门为onreadystatechange事件注册的事件捕获函数捕获。当该事件对应的响应消息返回时，保存事件类型、对应的source事件ID、local ID和响应消息内容。为获得事件之间的因果关系，保存回调函数执行过程中可能注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

4)当页面跳转时，触发beforeunload事件(该事件在当前页面卸载前由浏览器触发)，该模块将首先上传当前页面捕获的事件序列，再将session中保存的sequence值加1，以开始保存在新的页面中捕获的非确定性事件。

如图8所示，重放服务器的具体实现如下：

1)接收来自远程客户端的注册请求；

2)对注册请求进行解析，提取远程客户端的信息<IP,BR,OS>，其中：IP为远程客户端的ip地址,BR表示远程客户端上安装的浏览器类型(如：IE/Chrome/Firefox等)和版本信息，OS表示远程客户端上安装的操作***类型(如：Windows/Ubuntu/Mac等)和版本信息；

3)根据注册的远程客户端的信息，匹配用户指定的参考浏览器平台<BR,OS>和待测浏览器平台<BR,OS>。

4)如果匹配成功，给远程客户端发送重放命令replay(logID)，将收集到的事件序列在指定的远程客户端中进行重放，其中logID代表指定的事件序列；

5)如果匹配不成功，则报告没有匹配的待测浏览器平台；

如图9所示，重放代理的具体实现如下：

每个远程客户端中都安装了重放代理，重放代理实现为一个守护进程，当其启动后：

1)首先向重放服务器进行注册远程客户端的配置信息<IP,BR,OS>，其中，IP表示本机的ip地址，BR表示安装的浏览器类型和版本，OS表示安装的操作***类型以及版本；

2)接收来自重放服务器的重放命令；

3)解析重放命令，提取待重放的事件序列ID，浏览器的类型和版本，待测Web应用的URL地址；

4)配置Web代理地址，打开指定类型和版本的浏览器访问Web应用，Web代理模块会在页面返回浏览器解析前，***事件重放模块；

如图10所示，事件重放模块的实现如下：

为支持在各种不同的浏览器中进行事件捕获，该模块使用标准的JavaScript实现，并重写了定时器注册函数setTimeout/setInterval,Ajax请求对象XHR，以及随机函数调用Random()和日期函数Date()，具体的重放流程如下：

1)根据事件序列ID向重放服务器请求待重放的事件序列，并保存到队列Q中；

2)当队列不为空时，从队列头部取出事件；

3)根据事件的不同类型，分别进行重放；

4)如果事件类型为定时器事件，则首先根据事件ID和local ID得到事件捕获模块保存的事件处理函数H，再根据事件ID和local ID得到事件重放模块缓存的事件处理函数H’,检查H和H’是否相同，如果相同则直接调用事件处理函数H’进行重放；如果没有找到则标记该事件存在执行异常；

5)如果事件类型为Ajax事件，则首先根据事件ID和local ID得到事件捕获模块得到保存的请求消息M，再根据事件ID和local ID得到事件重放模块缓存的请求消息M’，比较M和M’是否相同，如果相同则返回事件捕获模块保存的响应消息，并重放该事件；如果没有找到则标记该事件存在执行异常；

6)如果事件类型为DOM事件，则首先根据事件重放模块保存的XPath信息定位目标元素，如果目标元素存在，则重放该事件，否则标记该事件存在执行异常；

7)在事件重放过程中，如果遇到非确定函数调用，则根据当前重放事件的ID直接从保存的Random和Date列表中返回值，同时在列表中删除该值。若列表为空，则调用原生的Random和Date函数返回，同时标记该事件存在行为不一致。

8)在事件重放结束后，通知页面信息采集模块抽取页面信息；

9)为支持多页面Web应用的重放，重放模块向beforeunload事件注册回调函数，以在页面跳转时增加sequence id。每到达一个新页面，注入的重放模块会向服务器请求新页面的录制日志。

如图11所示，页面数据收集的具体实现如下：

1)接收来自事件重放模块的通知，进行页面信息的收集；

2)对DOM树进行遍历，保存每个DOM节点的属性信息，记为<Dr1,…Drn>；

3)计算每个DOM节点的坐标信息，记为<Cr1,…,Crn>；

4)对页面进行截屏Pr；

5)从重放模块获得当前重放事件的Id；

6)保存{Id,<Dr1,…,Drn>,<Cr1,…,Crn>,Pr}至数据库；

如图12所示，兼容性检测模块的具体实现如下：

基于为每个重放事件收集的页面信息，设计了相应的兼容性检测方法。

1)对于从不同浏览器收集到的页面数据，兼容性检测器依次访问每个重放事件，如果事件被标识存在执行异常，则将该事件加入到行为不一致集合中；若事件没有执行异常，则进一步对事件产生的DOM树进行匹配，如果存在不匹配的节点，则同样将事件归为行为不一致，并同时将不匹配的节点加入到行为不一致集合中；

2)对于匹配的DOM节点，进一步检测布局不一致。为检测布局不一致，首先对抽取的DOM树进行匹配，再根据DOM节点的坐标构造布局图，通过检查匹配节点是否存在相同的父子关系和兄弟关系以发现布局不一致。

3)对于没有布局问题的匹配节点，进一步检测内容不一致。对于文本内容不一致的比较基于字符串相等比较，而对于可视化内容不一致的比较则通过图片比较以检测两张图片是否相同。

本发明实现了Web应用跨浏览器兼容性检测工具—X-Check。

为检测Web应用的兼容性问题，首先需要用户提交待测Web应用的URL地址，参考浏览器的类型和版本以及运行的操作***类型和版本信息，测试浏览器的类型和版本以及运行的操作***类型和版本信息。

在接收到上述请求后，发明通过事件序列收集、事件序列重放与页面数据收集，和兼容性检测三个步骤后报告检测出的各种不一致问题。实现方法具体步骤如下：

1.事件序列收集

为支持自动的事件序列收集，发明使用Web应用状态空间探测工具Crawljax(http://crawljax.com/)启动参考浏览器，对Web应用的页面进行探测，并在探测过程中捕获各种非确定性事件。具体过程如下：

1)在启动浏览器前，Crawljax首先配置参考浏览器填入Web代理的URL地址，以使浏览器通过代理访问Web应用。

2)代理负责拦截所有浏览器与服务端的请求和响应消息。如果返回的消息类型为html，Web代理还缓存请求和响应消息，保证在重放时访问相同的内容。

3)对于html响应消息，Web代理在向浏览器返回前，首先定位<head>标签的位置，并在<head>标签后***事件捕获模块(record.js)。

4)页面在浏览器加载完成后，Crawljax对Web应用进行探测，在探测过程中，事件捕获模块记录Web应用在运行时产生的各种非确定性事件，包括DOM事件(如：点击事件、键盘输入事件)、定时器事件、Ajax事件以及非确定的函数调用(如：随机数调用、日期函数调用)，并同时记录事件之间的因果关系。

2.事件序列重放与页面数据收集

1)为支持远程重放，首先需要在远程客户端中安装重放代理。重放代理实现为客户端的一个守护进程。当重放代理运行后，首先在重放服务器端进行注册，提供远程客户端中安装的操作***和浏览器信息，并等待接收重放服务器的指令；

2)重放服务器根据用户提供的参考浏览器平台信息和待测浏览器平台信息，与已经注册的远程客户端信息进行匹配。匹配成功后，重放服务器向指定的远程客户端发送重放指令，指令的内容包括：待测Web应用的URL，需要重放的事件序列ID；

3)远程客户端的重放代理接收到重放命令后，启动需要检测的浏览器，并配置浏览器通过Web代理访问应用，并由Web代理在返回的html消息中***事件重放模块重放指定的事件序列；

4)在重放过程中，不仅要收集变化的节点数据，包括坐标变化的节点，还要在每次页面变化时对页面进行截图。为在重放的过程中进行页面截图，选择使用Selenium(www.seleniumhq.org)来实现截图功能。Selenium支持几乎所有主流的浏览器，如IE、Firefox、Chrome和Safari。X-Check基于selenium实现了重放客户端，由重放客户端调用重放库中的方法进行事件重放，并根据收集的页面数据确定重放事件是否引起了页面的变化，如果页面发生改变则调用getScreenshotAs()获得页面截图。

由于频繁的页面信息采集会降低重放速度，采取如下的措施进行优化：对于连续的用户输入事件，重放组件在重放完一个事件后不进行页面信息收集，继续重放下一个用户输入事件。当待重放的事件不是用户输入事件时，对页面信息进行集中一次采集；对于连续的定时器事件，重放组件采用固定的事件间隔对页面信息进行采集，目前设定的事件间隔为5。

3.兼容性检测

基于收集到的页面信息，发明进一步进行兼容性检测。

1)检测器依次遍历测试浏览器中收集的重放事件序列，对于行为不一致，检测器检查事件在重放过程是否出现错误，以及对应的DOM树是否匹配；

2)为检测布局不一致，X-Check使用了X-PERT中采用的方法(参见：S.RoyChoudhary,M.R.Prasad,and A.Orso.X-PERT:Accurate identification of cross-browser issues in web applications.In Proceedings of the 2013InternationalConference on Software Engineering,pages 702–711.IEEE Press,2013)，根据节点坐标构建页面的布局图(Alignment Graph)，对于待检测的两个节点，首先判断待检测的两节点是否有相同的父节点，其次判断两节点与兄弟节点是否有相同的对齐关系；

3)为检测图片内容不一致，X-Check采用OpenCV(http://opencv.org/)来比较两个元素图片的相似性，首先根据元素坐标从页面截图中得到局部图片，然后转换为直方图，最后采用相关系数的方法比较两个元素的图片相似性，而对于文本内容不一致的比较基于字符串相等比较。当检测完毕后，X-Check将返回检测结果，并在页面截图上标识兼容性问题，以可视化的展示检测结果。

提供以上实施例仅仅是为了描述本发明的目的，而并非要限制本发明的范围。本发明的范围由所附权利要求限定。不脱离本发明的精神和原理而做出的各种等同替换和修改，均应涵盖在本发明的范围之内。

Claims (10)

1.一种面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于包括：Web代理模块、事件捕获模块、重放服务器、重放代理模块，事件重放模块、页面数据收集模块和兼容性检测模块；其中：

Web代理模块，负责协调客户端与Web应用服务端的交互，在运行时拦截客户端与服务器端的请求和响应消息，并对请求和响应内容进行检查；在事件捕获阶段，当参考浏览器请求页面时，由Web代理模块在返回的页面中***事件捕获模块；在事件重放阶段，当重放代理模块启动参考浏览器和待测浏览器时，由Web代理模块在返回的消息中***事件重放模块；

事件捕获模块，负责捕获并记录客户端与Web应用进行交互时产生的各种非确定性事件并形成事件序列，保存至重放服务器，所述非确定性事件包括DOM(文档对象模型)事件、浏览器内部事件及非确定的函数调用；DOM事件包括各种用户事件；浏览器内部事件包括定时器事件、Ajax消息；非确定函数调用包括随机数生成以及日期函数调用；并同时记录事件的因果关系；

重放服务器，根据事件捕获模块收集到的事件序列，负责向远程客户端发起重放请求；重放服务器首先接收远程客户端的注册请求，并根据用户指定的参考浏览器平台信息和待测浏览器平台信息，与已经注册的远程客户端信息进行匹配，匹配成功后，向指定的远程客户端发送重放指令，指令的内容包括：待测Web应用的URL，需要重放的事件序列的ID；远程客户端的重放代理模块接收到重放命令后，将启动需要检测的浏览器,包括参考浏览器和待测浏览器开始进行重放；

重放代理模块，负责向重放服务器发送注册请求，注册内容包括所在远程客户端上安装的浏览器平台信息，并接收来自重放服务器的重放请求，在重放指定的事件序列前，首先配置浏览器指定Web代理模块的URL地址，再打开浏览器访问指定的Web应用，由Web代理模块在返回页面中***事件重放模块；

事件重放模块，负责将事件捕获模块捕获到的的各种非确定性事件分别在参考浏览器和待测浏览器中进行重放；事件重放模块接收重放代理模块转发过来的事件序列ID，根据该ID向重放服务器请求待重放的事件序列并进行重放；每重放完一个事件，该模块调用页面数据收集模块进行页面数据采集；

页面数据收集模块，接收来自事件重放模块的通知，负责在重放过程中进行页面数据的收集，并将收集的页面数据送至兼容性检测模块；收集的页面数据包括：每个DOM节点的属性信息、节点的布局信息以及整个页面的截图信息；

兼容性检测模块，根据页面收集模块收集的页面数据，分别进行行为不一致、布局不一致和内容不一致检测，并给出检测报告。

2.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述Web代理模块实现如下：

(1)在事件捕获阶段，接收并向Web应用服务端转发来自参考浏览器的请求，如果请求中的响应消息的类型为“html”,则首先缓存请求和响应内容，然后在返回的响应消息中定位<head>的位置，并在<head>标签后***事件捕获模块，最后将插装后响应消息返回给参考浏览器；

(2)在事件重放阶段，对浏览器,包括参考浏览器和待测浏览器发送给Web应用服务端的请求进行检测，如果请求与缓存内容相同，则直接取出对应的响应消息，并在响应消息的头部***事件重放模块，返回给客户端；对于其他没有缓存的请求，则转发给Web应用服务端，在收到响应后直接返回给客户端。

3.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述事件捕获模块实现如下：

(1)对于DOM事件，在Window对象注册DOM事件的捕获函数，当DOM事件被触发时，捕获函数被调用以保存事件类型、目标元素的XPath信息；为获得事件之间的因果关系，保存DOM事件执行过程中注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

(2)对于定时器事件，被重写的setTimeout/setInterval函数和重写的定时器回调函数捕获，定时器回调函数通过setTimeout/setInterval函数进行注册；当该事件对应的定时器回调函数执行时，重写的定时器回调函数将保存事件类型，对应的source事件Id以及local ID；为获得事件之间的因果关系，同时保存定时器事件执行过程中可能注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

(3)对于Ajax事件，被专门为onreadystatechange事件注册的的事件捕获函数所捕获，当该事件对应的响应消息返回时，保存事件类型、对应的source事件ID、local ID和响应消息内容；为获得事件之间的因果关系，同时保存Ajax事件执行过程中可能注册的定时器事件、Ajax请求以及非确定函数调用的返回值；

(4)对于非确定性函数，包括日期和随机数生成，通过调用new Date()获得当前时间，调用Math.random()生成随机数；为了捕获这两个非确定性函数的调用，事件捕获模块封装了Date和Random的构造函数，以记录原始构造函数的返回值；

(5)此外，为了区分不同页面的事件，事件捕获模块还为当前访问的页面生成一个sequence id，当页面跳转时，触发beforeunload事件，首先上传当前页面捕获的非确定性事件，再将session中保存的sequence值加1，以开始保存在新的页面中捕获的非确定性事件。

4.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述重放服务器的具体实现如下：

(1)接收来自远程客户端的注册请求；

(2)对注册请求进行解析，提取远程客户端的信息<IP,BR,OS>，其中：IP为远程客户端的ip地址,BR表示远程客户端上安装的浏览器类型和版本信息，OS表示远程客户端上安装的操作***类型和版本信息；

(3)根据注册的远程客户端的信息，匹配用户指定的参考浏览器平台<BR,OS>和待测浏览器平台<BR,OS>；

(4)如果匹配成功，给远程客户端发送重放命令replay(logID)，将收集到的各种非确定性事件在指定的远程客户端中进行重放，其中logID代表指定的事件序列；

(5)如果匹配不成功，则报告没有匹配的待测浏览器平台。

5.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述重放代理模块的具体实现如下：每个远程客户端中都安装了重放代理，重放代理实现为一个守护进程，当守护进程启动后：

(1)首先向重放服务器进行注册远程客户端的配置信息<IP,BR,OS>，其中，IP表示本机的ip地址，BR表示安装的浏览器类型和版本，OS表示安装的操作***类型以及版本；

(2)接收来自重放服务器的重放命令；

(3)解析重放命令，提取待重放的事件序列ID，浏览器的类型和版本，待测Web应用的URL地址；

(4)配置Web代理地址，打开指定类型和版本的浏览器，并通过Web代理模块访问Web应用服务端。

6.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述事件重放模块的实现如下：

为支持在各种不同的浏览器中进行事件捕获，使用标准的JavaScript实现，并重写了定时器注册函数setTimeout/setInterval,Ajax请求对象XHR，以及随机函数调用Random()和日期函数Date()，具体的重放流程如下：

(1)根据事件序列ID向重放服务器请求待重放的事件序列，并保存到队列Q中；

(2)当队列不为空时，从队列头部取出事件；

(3)根据事件的不同类型，分别进行重放；

(4)如果事件类型为定时器事件，则首先根据事件ID和local ID得到事件捕获模块保存的事件处理函数H，再根据事件ID和local ID得到事件重放模块缓存的事件处理函数H’,检查H和H’是否相同，如果相同则直接调用事件处理函数H’进行重放；如果没有找到则标记该事件存在执行异常；

(5)如果事件类型为Ajax事件，则首先根据事件ID和local ID得到事件捕获模块得到保存的请求消息M，再根据事件ID和local ID得到事件重放模块缓存的请求消息M’，比较M和M’是否相同，如果相同则返回事件捕获模块保存的响应消息，并重放该事件；如果没有找到则标记该事件存在执行异常；

(6)如果事件类型为DOM事件，则首先根据事件重放模块保存的XPath信息定位目标元素，如果目标元素存在，则重放该事件，否则标记该事件存在执行异常；

(7)在事件重放过程中，如果遇到非确定函数调用，则根据当前重放事件的ID直接从保存的Random和Date列表中返回值，同时在列表中删除该值；若列表为空，则调用原生的Random和Date函数返回，同时标记该事件存在行为不一致；

(8)在事件重放结束后，通知页面信息采集模块抽取页面信息；

(9)为支持多页面Web应用的重放，重放模块向beforeunload事件注册回调函数，以在页面跳转时增加sequence id,每到达一个新页面，注入的重放模块会向服务器请求新页面的录制日志。

7.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述页面数据收集模块的具体实现如下：

(1)接收来自事件重放模块的通知，进行页面数据的收集；

(2)对DOM树进行遍历，保存每个DOM节点的属性信息，记为<Dr1,…Drn>；

(3)计算每个DOM节点的坐标信息，记为<Cr1,…,Crn>；

(4)对页面进行截屏Pr；

(5)从重放模块获得当前重放事件的Id；

(6)保存{Id,<Dr1,…,Drn>,<Cr1,…,Crn>,Pr}至数据库。

8.根据权利要求1所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述兼容性检测模块的具体实现如下：

(1)对于从不同待测浏览器收集到的页面数据，依次访问每个重放的非确定性事件，如果事件被标识存在执行异常，则将该事件加入到行为不一致集合中；若事件没有执行异常，则进一步对事件产生的DOM树进行匹配，如果存在不匹配的节点，则同样将事件归为行为不一致，并同时将不匹配的节点加入到行为不一致集合中；

(2)对于匹配的DOM树中的节点，进一步检测布局不一致；为检测布局不一致，首先对抽取的DOM树进行匹配，再根据DOM树中的节点的坐标构造布局图，通过检查匹配节点是否存在相同的父子关系和兄弟关系以发现布局不一致；

(3)对于没有布局问题的匹配节点，进一步检测内容不一致；对于文本内容不一致的比较基于字符串相等比较，而对于可视化内容不一致的比较则通过图片比较以检测两张图片是否相同。

9.根据权利要求8所述的面向浏览器兼容性检测的客户端Web应用捕获与重放***，其特征在于：所述的检测行为不一致过程为：依次访问每个重放的非确定性事件，如果事件被标识存在执行异常，则该事件存在行为不一致，将其加入到行为不一致集合中；如果事件不存在执行异常，则进一步对该事件重放后的DOM树进行匹配，如果存在不匹配的节点，也将该事件归为行为不一致，并同时将不匹配的节点加入到行为不一致集合中。

10.一种面向浏览器兼容性检测的客户端Web应用捕获与重放方法，其特征在于实现步骤如下：

(1)事件序列收集：首先配置参考浏览器通过Web代理访问Web应用，Web代理模块拦截浏览器与服务端的请求和响应消息，对于html类型的响应消息，首先缓存对应的请求和消息内容，然后在html页面的<head>标签后***事件捕获模块返回给浏览器；当Web应用在参考浏览器平台上运行时，事件捕获模块记录产生的各种非确定性事件，包括DOM事件、定时器事件、Ajax事件以及非确定的函数调用，并同时记录事件之间的因果关系，捕获的非确定性事件形成事件序列并上传至重放服务器；

(2)事件序列重放：重放服务器首先检查当前注册的远程客户端是否和用户选定的参考浏览器和测试浏览器平台相匹配；对于匹配的远程客户端，重放服务器向远程客户端上安装的重放代理模块发送重放指令，指令内容包括待重放的事件序列ID、浏览器的类型和版本信息；重放代理接收到指令后，首先对指定的浏览器进行配置设定Web代理的URL地址，然后打开浏览器通过Web代理模块访问Web应用，对于浏览器对服务端的html请求，Web代理直接从缓存中返回对应的响应消息，并在响应消息的<head>标签后***事件重放模块返回；事件重放模块根据重放代理转发的事件序列ID向重放服务器请求具体的待重放事件序列并进行重放，在重放定时器事件和Ajax事件之前，该模块首先检查该事件注册的回调函数是否与事件捕获阶段记录的相同；同时，在重放事件过程中，收集当前页面的数据，包括DOM节点信息、节点布局信息和页面截图信息；

(3)兼容性检测：基于收集到的页面信息，兼容性检测模块分别进行行为不一致、布局不一致和内容不一致检测，并生成兼容性问题报告。