一种高效的Web应用跨浏览器布局兼容性检测系统及方法与流程

文档序号:11155553阅读:来源:国知局

技术特征:

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

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

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

AG图构造模块,负责对每个事件中变化的区域构造AG图,得到每个节点在布局上的父节点和兄弟节点;

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

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)得到的父节点作为事件中变化的区域最终的根节点,接着遍历所有节点,得到事件中变化的区域内的节点,该节点包括未变化的节点,规则是某一节点被根节点包含,则该节点属于该事件中变化区域。

3.根据权利要求1所述的高效的Web应用跨浏览器布局兼容性检测系统,其特征在于:所述节点匹配模块的具体实现如下:

分别将参考浏览器和待测浏览器中变化的节点作为各自的待匹配节点,

(1)按层完全匹配,按照DOM树从上至下遍历参考浏览器中变化的节点A,在待测浏览器中选取与A的父节点PA相匹配的节点PB,将节点A与PB在DOM树中的子节点进行比较,如果找到节点B与A完全一样,即相似度为1,则A与B相匹配存入匹配表,并将A与B分别移出待匹配列表;

(2)全局最相似匹配,遍历参考浏览器待匹配列表的节点A,在待测浏览器的待匹配列表中选取与A相似度最高的节点B且二者的相似度高于阈值,即A与B相匹配存入匹配表,并将A与B分别移出待匹配列表;

(3)参考浏览器和待测浏览器的待匹配列表中剩余的节点,即为不匹配的节点。

4.根据权利要求1所述的高效的Web应用跨浏览器布局兼容性检测系统,其特征在于:所述AG图构造模块的具体实现如下:

(1)AG图描述页面中元素的两种结构关系:父子关系和兄弟关系。对于两个节点A和B,如果A是包含B的所有节点中面积最小的节点,则A是B的父亲,B是A的孩子,节点A的所有孩子节点之间的关系即为兄弟关系。为构造AG图,首先按照节点面积从小到大的顺序遍历变化区域内的节点,对于每一个遍历的节点A,遍历后续节点,找到第一个包含A的节点即为A的父节点P,根据P和A的坐标计算二者的父子关系,并将A存入P的子节点列表中;

(2)再次遍历变化区域内的所有父节点P,得到P的子节点列表CL,将CL内所有节点两两构造成兄弟,并根据坐标计算二者的兄弟关系;

(3)经历上述两个步骤,每个节点中有父子关系列表和兄弟关系列表。

5.根据权利要求1所述的高效的Web应用跨浏览器布局兼容性检测系统,其特征在于:所述节点比较模块的具体实现如下:

(1)遍历参考浏览器变化的节点A,查询从节点匹配模块输出的匹配表,得到相匹配的节点B;

(2)查询AG图构造模块分别为节点A和节点B构建的父子关系,并进行比较,如果A和B有相同的父子关系,则不存在布局兼容性问题,否则存在布局兼容性问题;

(3)查询AG图构造模块分别为节点A和节点B构建的兄弟关系,并进行比较,A和B有相同的兄弟关系,则不存在布局兼容性问题,否则存在布局兼容性问题。

6.一种高效的Web应用跨浏览器布局兼容性检测方法,其特征在于实现步骤如下:

(1)页面数据的处理:分别对参考浏览器和待测浏览器的页面数据进行处理,得到每个事件中变化的区域和变化的节点,对于每个事件,首先得到该事件发生前和发生后页面数据,将页面数据中的节点按照id映射成Map表,然后遍历该事件发生前的页面数据节点id,在该事件发生后的页面数据Map表中找到对应的节点,如果找不到则记录当前节点为被删除的节点并从事件发生前的页面数据Map表中删除,找到则按照上述几种类型判断该节点是否有变化并分别从事件发生前后的页面数据Map表中删除该节点;遍历结束后,如果该事件发生后的页面数据Map表中还存在节点,则记录这些节点为增加的节点;接着根据坐标对这些变化的节点进行合并得到变化区域的根节点;然后为这些根节点找到布局上的父节点,作为变化区域最终的根节点;重新遍历当前事件的节点,找到各变化区域内的所有节点,规则是该节点被变化区域的根节点所包含;最终经过页面数据的处理得到了各个事件变化的节点和变化的区域;

(2)变化节点的匹配,对参考浏览器和待测浏览器的同一事件中变化的节点进行匹配;将变化的节点作为待匹配节点,并生成待匹配节点列表,首先进行按层完全匹配,将完全匹配上的节点移出待匹配节点列表,接着对剩余待匹配节点进行全局最相似匹配,将匹配上的节点移出待匹配列表;最终得到节点匹配表;

(3)变化区域的AG图构造,AG图构造模块通过事件发生后各个变化区域内的节点坐标构造AG图,AG图由各节点的父子关系和兄弟关系构成;

(4)变化节点的比较,对参考浏览器和待测浏览器的同一事件中变化的节点进行比较,遍历参考浏览器中变化的节点A,从节点匹配表中得到相匹配的节点B,接着再出对应的AG图中分别得到A和B的父子关系和兄弟关系并进行比较,最终得到A和B的布局不兼容性问题。

当前第2页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1