[发明专利]一种高效的Web应用跨浏览器布局兼容性检测系统及方法

权利要求书

1.一种高效的Web应用跨浏览器布局兼容性检测系统，其特征在于包括：数据处理模块、节点匹配模块、Alignment GraphAG图构造模块和节点比较模块，其中：

数据处理模块，负责处理从参考浏览器和待测浏览器收集的页面数据；该模块通过比较相邻两个事件的数据，得到每个事件中变化的节点和变化的区域，所述变化的节点包括：增加的节点、删除的节点、坐标变化的节点、属性变化的节点、父节点改变的节点和在父节点中次序变化的节点；将变化的节点送至节点匹配模块，变化的区域送于AG图构造模块；

节点匹配模块，基于数据处理模块分别为参考浏览器和待测浏览器处理得到的每个事件发生后的变化节点信息，匹配参考浏览器和待测浏览器中同一个事件中变化的节点；该模块包括两个步骤：按层完全匹配、全局最相似匹配，所述按层完全匹配指的是待测浏览器中待匹配节点与参考浏览器中同一层的节点进行相似度比较，直到找到完全一样的节点；所述全局最相似匹配指的是参考浏览器和待测浏览器中未在上一步骤中完成匹配的节点相互间找到最相似的节点，作为相匹配的节点；

Alignment GraphAG图构造模块，负责对每个事件中变化的区域构造AlignmentGraphAG图，得到每个节点在布局上的父节点和兄弟节点；

节点比较模块，基于AG图构造模块为参考浏览器和待测浏览器变化区域构造的Alignment GraphAG图,以及节点匹配模块为参考浏览器和待测浏览器变化区域计算的节点匹配信息，比较相匹配节点的父子关系和兄弟关系是否相同，如果有相同的父子和兄弟关系，则没有布局兼容问题，否则，两个节点存在布局兼容性问题。

2.根据权利要求1所述的高效的Web应用跨浏览器布局兼容性检测系统，其特征在于：所述数据处理模块的具体实现如下：

(1)在Web应用页面生成时，为每个新创建的节点分配id，数据处理模块根据id得到相邻事件中的同一节点，首先通过比较相邻两个事件的数据得到以下六种变化的节点，

增加的节点，该节点id不在前一事件仅在后一事件中；

删除的节点，该节点id不在后一事件仅在前一事件中；

坐标变化的节点，该节点在前后事件中的坐标不同；

属性变化的节点，该节点在前后事件中的节点属性不同，节点属性包括class、style；

父节点改变的节点，体现在该节点在前后事件中Xpath的前缀发生变化；

在父节点中次序变化的节点，体现在该节点在前后事件中Xpath的序号发生变化；

(2)得到上述六种变化的节点，然后根据这些事件中变化的节点得到变化的区域；

(21)遍历所有事件中变化的节点，并根据节点之间的包含关系得到事件中变化区域的根节点，每个节点在生成的页面中由一个矩形进行表示，该矩形的位置由其在页面中所在左上角坐标和右下角坐标确定，如果节点A代表的矩形包含节点B代表的矩形，则保留A作为根节点，A继续进行比较，B则不再比较；

节点之间的包含关系计算如下：设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>＝yb1,且ya2<＝yb2，则A包含B；

(22)步骤(21)得到的根节点属于事件中变化的节点，为了能够在后续检测中比较该根节点的父子关系和兄弟关系，根据坐标找到这些根节点的父节点，规则是该节点满足两个条件，一是该节点的坐标包含根节点，二是该节点是所有满足条件一的节点中面积最小的；

(23)步骤(22)得到的父节点作为事件中变化的区域最终的根节点，接着遍历所有节点，得到事件中变化的区域内的节点，该节点包括未变化的节点，规则是某一节点被根节点包含，则该节点属于该事件中变化区域。