CN109684220A - 一种基于事件回放的浏览器兼容性分析方法 - Google Patents

Abstract

在事件捕获阶段记录参考浏览器平台运行时产生的各种非确定性事件，并在重放阶段在测试浏览器平台中进行远程重放，监测每个事件发生前后DOM节点数据变化，检测事件引起变化的DOM节点。从而保证了Web应用在不同的浏览器环境中有相同的执行，提高了检测结果的准确性。

Description

一种基于事件回放的浏览器兼容性分析方法

技术领域

本发明涉及一种基于事件回放的浏览器兼容性分析方法，属于软件技术领域。

背景技术

随着互联网技术的快速发展，Web应用正在成为重要的信息获取和交流平台。应用开发者希望应用能在各种主流的浏览器平台上表现一致，但由于浏览器实现技术的差异以及对标准支持程度的不同，导致Web应用在不同的浏览器平台上运行时可能出现行为和页面展现方面的不一致，称为跨浏览器的不兼容问题。浏览器兼容性分为三类：行为不一致、结构不一致和内容不一致（S. Roy Choudhary, M. R. Prasad, and A. Orso. X-pert:Accurate identification of cross-browser issues in Web applications. InProceedings of the 2013 International Conference on Software Engineering,pages 702–711. IEEE Press, 2013.）。行为不一致是页面中元素的功能失效，例如，点击链接页面无法跳转，点击按钮页面没有反应。结构不一致是页面中元素在结构布局方面的问题。内容不一致分为文本内容不一致和可视内容不一致，其中，文本不一致是元素内部的文本不同，可视内容不一致是元素在可视化方面的不同。

为自动检测跨浏览器不兼容问题，目前工业界和学术界已经提出了很多的方法和工具（http://app.browserbite.com/）。常见的方法是，在页面抓取阶段，在不同的浏览器上对Web应用进行自动的探测，并抽取页面相关数据，包括DOM树信息、布局信息以及页面截图信息；在页面比较阶段，通过对收集的页面数据进行比较，以发现各种跨浏览器的不一致问题（S. R. Choudhary, M. R. Prasad, and A. Orso. Crosscheck: Combiningcrawling and differencing to better detect cross-browser incompatibilities inWeb applications. In Software Testing, Verification and Validation (ICST),2012 IEEE Fifth International Conference on, pages 171–180. IEEE, 2012.）。但当前方法仅考虑了用户交互事件，而忽略了浏览器内部事件，如随机数、日期、定时器等，无法保证在不同的浏览器上有相同的执行，导致检测结果产生大量的误报或漏报。

发明内容

本发明的目的：保证Web应用在不同的浏览器环境中有相同的执行，以提高检测结果的准确性。

本发明的原理：监测每个事件发生前后DOM节点数据变化，检测事件引起变化的DOM节点。

本发明技术解决方案：一种基于事件回放的浏览器兼容性分析方法，其特点在于实现步骤如下：

第一步，事件序列收集：捕获Web应用在参考浏览器访问时产生的各种非确定性事件，如点击、按键，和浏览器内部事件，如定时器、随机数的产生。

第二步，远程重放：根据用户选择的被测浏览器，通过远程控制器在不同的浏览器重放事件序列。

在被测浏览器平台上安装重放客户端，用以接收服务器的重放命令，给Web应用注入重放模块，并在浏览器中重放事件序列。在重放事件序列前，重写浏览器源码中的setInterval/setTimeout、XHR、random和date等相关函数。重写的setInterval/setTimeout函数会记录注册的回调函数，当重放定时器事件时，将会按顺序执行回调函数。对于XHR函数，直接从捕获日志里获取send/open函数的返回值和应答内容，而无需跟服务器进行交互。当Web应用调用Random和date构造函数时，直接从日志中返回相应的值。每到达一个新页面，注入的重放模块会向服务器请求新页面的录制日志。

第三步，页面数据收集：在重放事件时，收集当前页面的信息，包括变化的DOM节点信息、节点布局信息和页面截图信息。

收集当前的页面信息，如DOM节点信息、节点布局信息和页面截图。目前主流的Web2.0应用多采用Ajax技术与服务端进行通信，并且尽可能将计算在客户端完成，因此用户事件通常只会导致页面的局部信息发生更新。如果在每个事件发生时都采集所有的DOM节点和布局信息，就会收集到很多的冗余信息，这不仅会导致冗余的兼容性问题报告，还会消耗浏览器的内存资源。为了解决上述问题，在重放每个事件后，仅收集变化的DOM节点信息和布局信息。在重放负载事件后，extractDom函数收集所有的DOM信息，并调用getScreenshots函数对当前页面进行截图，接着观察DOM节点的变化。

然而，只能捕获DOM树中变化的节点，而不能捕获坐标变化的节点。在某些场景下，节点信息的变化可能导致其邻近节点的坐标变化，邻近节点包括父节点和兄弟节点。当一个新的课程添加到列表中，列表的高度会增加，也就是它的父节点的坐标受到了影响，而只捕获到新加入的节点(1个<tr>元素，2个<td>元素)。为了采集到所有坐标和信息变化的节点，调用extractCoordChangeNodes函数获取坐标变化的DOM节点。如果事件重放后DOM节点发生变化，则对当前页面进行截图。所有收集到的数据保存在列表中, 这些数据用于进行Web应用的跨浏览器兼容性检测。

为了计算得到坐标变化的节点，为每个节点添加唯一ID，并维护一个全局的映射表<ID，坐标>。对于每个变化的节点，先在图中更新坐标，然后调用computeAffectedParent函数从该节点向上找到一个坐标没有变化的祖先节点并保存。处理完每个节点后，调用findCommonParents函数对节点进行合并并保存。合并条件为当一个节点为另一个节点的祖先节点时，保存祖先节点。对每个节点再调用traverseChildren函数得到所有坐标变化的子节点并加入。在遍历子节点时，更新已遍历的节点坐标。该算法先向上查找父节点，再向下查找变化的子节点，是为了不仅能收集到坐标变化的父节点，也能收集到由于某一节点信息变动而影响了坐标的兄弟节点和子节点。

第四步，兼容性检测和错误报告：对采集到的数据进行浏览器兼容性检测，并生成兼容性问题报告。

（1）行为浏览器兼容性检测：为了检测行为的兼容性问题，对于重放的事件序列考虑以下三种情况：重放的页面数不同，例如，某个页面的最后一个事件失效，没有让应用跳转到下个页面，就会导致最终重放得到的页面数不同；对于同一个页面的事件序列成功重放的事件数目不同，例如，某个事件重放时出现错误，导致后续事件无法继续重放；重放事件产生的变化的DOM节点不同，即变化的DOM节点不能完全匹配。如果是负载事件，则比较整个DOM树的节点，如果是其他事件则只比较变化的节点。

（2）结构浏览器兼容性检测：比较了两个相邻图的差异，对于负载事件，首先调用getDOMTree函数得到DOM树后，调用extractAG函数为DOM树构造排列图。在比较两个排列图前，首先调用matchDOM函数进行匹配，匹配结果存储在映射表里，再调用compareAG函数对相匹配的节点的结构进行比较，得到结构浏览器兼容性。方法getCoordChangeNodes函数得到坐标变化的节点，getMutateNodes函数得到DOM树中变化的节点，updateAG函数更新排列图，并收集由于重放当前事件而引起结构变化的节点，存储在各自的排列图中。然后调用matchDOM函数进行匹配，并更新全局的匹配映射表。最后比较排列图中结构变化的节点，得到结构浏览器兼容性。

（3）内容浏览器兼容性检测：内容不一致包含可视内容的不一致和文本内容不一致。可视内容不一致指页面某个元素的外观不同，如一个元素的文本样式或背景的不同。根据元素坐标从页面的截图中得到元素图片，然后比较图片的相似性，相似性低的元素加入到浏览器兼容性列表中。文本内容浏览器兼容性表示某个元素在两个浏览器上的文本不同，对相匹配的文本节点进行文本值的比较，不相等即为文本内容不一致。

本发明与现有技术相比具有如下优点：在事件捕获阶段记录参考浏览器平台运行时产生的各种非确定性事件，并在重放阶段在测试浏览器平台中进行远程重放，通过在重放过程中采集页面信息，保证了检测结果的准确性。

附图说明

图1为方法执行流程图。

具体实施方式

以下结合具体实施例和附图对本发明进行详细说明，如图1所示，本发明实施例方法流程：

采用代理服务器拦截Web应用的HTTP请求和应答，当返回消息的类型是html时插入捕获/重放库。此外，代理服务器还将缓存所有应答，保证在重放时访问相同的内容。

远程重放客户端接收服务器的指令，重放服务器指定的事件序列。重放客户端可以作为浏览器的扩展也可以作为一个守护进程。在重放过程中，不仅要收集变化的节点数据，包括坐标变化的节点，还要在每次页面变化时对页面进行截图。

实现了重放客户端，由重放客户端调用重放库中的方法重放事件，并根据重放结果确定页面是否发生变化，如果页面改变则调用getScreenshotAs函数获得页面截图。采用OpenCV来比较两个元素的图片的相似性，首先根据元素坐标从页面截图中得到元素的图片，然后转换为直方图，最后采用相关系数的方法比较两个元素的图片相似性。。

Claims (1)

1.一种基于事件回放的浏览器兼容性分析方法，方法特征在于实现步骤如下：

第一步，事件序列收集：捕获Web应用在参考浏览器平台运行时产生的各种非确定性事件，包括用户事件，如点击、按键，和浏览器内部事件，如定时器、随机数的产生；

第二步，远程重放：根据用户选择的被测浏览器平台，通过远程控制器在不同的浏览器平台重放事件序列；

第三步，页面数据收集：在重放事件时，收集当前页面的信息，包括变化的DOM节点信息、节点布局信息和页面截图信息；

第四步，兼容性检测和错误报告：对采集到的数据进行浏览器兼容性检测，并生成兼容性问题报告。