一种页面样式污染检测方法、装置、设备和介质与流程

本申请涉及计算机，特别是涉及一种页面样式污染检测方法、装置、设备和介质。

背景技术：

1、目前，在页面开发完成后，经常会涉及页面样式更改的场景，然而页面样式更改可能会导致页面样式污染，例如，a页面开发完成后，a页面的样式已经确定，然而开发b页面时，由于引入全局样式，导致a页面已确定的样式被覆盖，由此产生页面样式污染，再例如，a页面包含的组件a1和a2发生样式变更，导致a页面样式发生变更，由此产生页面样式污染。

2、页面样式污染为用户带来不好地视觉感受，影响用户体验，因此，目前急需一种对页面样式污染进行检测的方法。

技术实现思路

1、有鉴于此，本申请提供了一种页面样式污染检测方法、装置、设备和介质，用于确定页面样式是否受到污染，其技术方案如下：

2、一种页面样式污染检测方法，包括：

3、获取原始页面的界面切图和原始页面包含的各元素节点的属性信息；

4、在原始页面上加载外部文件后，获取变更页面的界面切图和变更页面包含的各元素节点的属性信息；

5、对原始页面的界面切图和变更页面的界面切图进行图形相似度检测，以初步确定加载外部文件是否使原始页面的样式受到污染；

6、在原始页面的样式未受到污染的情况下，根据原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息是否一致，确定加载外部文件是否使原始页面的样式受到污染。

7、可选的，对原始页面的界面切图和变更页面的界面切图进行图形相似度检测，以初步确定加载外部文件是否使原始页面的样式受到污染，包括：

8、采用图形相似度检测算法计算原始页面的界面切图和变更页面的界面切图的图形相似度；

9、判断图形相似度是否小于预设的相似度阈值；

10、若是，则初步确定加载外部文件使原始页面的样式受到污染，否则，初步确定加载外部文件使原始页面的样式未受到污染。

11、可选的，图形相似度检测算法包括以下算法中的一种或多种：余弦相似度检测算法、哈希算法、直方图检测算法和深度学习算法。

12、可选的，一元素节点的属性信息包括该元素节点的位置属性和样式属性；

13、根据原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息是否一致，确定加载外部文件是否使原始页面的样式受到污染，包括：

14、在原始页面包含的各元素节点的位置属性和变更页面包含的各元素节点的位置属性一致，且原始页面包含的各元素节点的样式属性和变更页面包含的各元素节点的样式属性一致的情况下，确定加载外部文件使原始页面的样式未受到污染，否则，确定加载外部文件使原始页面的样式受到污染。

15、可选的，一元素节点的位置属性包括该元素节点在对应页面所对应的文档对象模型dom树中的父节点、子节点和兄弟节点；

16、一元素节点的样式属性包括该元素节点的类型和样式。

17、可选的，外部文件包括视图逻辑层文件和样式控制层文件；

18、获取变更页面包含的各元素节点的属性信息，包括：

19、在原始页面上加载视图逻辑层文件后，获取第一变更页面包含的各元素节点的属性信息，并在原始页面上加载样式控制层文件后，获取第二变更页面包含的各元素节点的属性信息；

20、根据原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息是否一致，确定加载外部文件是否使原始页面的样式受到污染，包括：

21、在原始页面包含的各元素节点的属性信息和第一变更页面包含的各元素节点的属性信息一致的情况下，确定加载视图逻辑层文件使原始页面的样式未受到污染，否则，确定加载视图逻辑层文件使原始页面的样式受到污染；

22、在原始页面包含的各元素节点的属性信息和第二变更页面包含的各元素节点的属性信息一致的情况下，确定加载样式控制层文件使原始页面的样式未受到污染，否则，确定加载样式控制层文件使原始页面的样式受到污染。

23、可选的，还包括：

24、在确定出原始页面的样式受到污染的情况下，将表征原始页面的样式受到污染的通知信息，和/或原始页面的界面切图和变更页面的界面切图的相似度低的第一检测结果，和/或原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息不一致的第二检测结果发送至客户端。

25、一种页面样式污染检测装置，包括：

26、第一信息获取单元，用于获取原始页面的界面切图和原始页面包含的各元素节点的属性信息；

27、第二信息获取单元，用于在原始页面上加载外部文件后，获取变更页面的界面切图和变更页面包含的各元素节点的属性信息；

28、图形相似度检测单元，用于对原始页面的界面切图和变更页面的界面切图进行图形相似度检测，以初步确定加载外部文件是否使原始页面的样式受到污染；

29、dom树结构检测单元，用于在原始页面的样式未受到污染的情况下，根据原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息是否一致，确定加载外部文件是否使原始页面的样式受到污染。

30、一种页面样式污染检测设备，包括存储器和处理器；

31、存储器，用于存储程序；

32、处理器，用于执行程序，实现如上述任一项的页面样式污染检测方法的各个步骤。

33、一种可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时，实现如上述任一项的页面样式污染检测方法的各个步骤。

34、经由上述的技术方案可知，本申请提供的页面样式污染检测方法，首先获取原始页面的界面切图和原始页面包含的各元素节点的属性信息，并在原始页面上加载外部文件后，获取变更页面的界面切图和变更页面包含的各元素节点的属性信息，然后对原始页面的界面切图和变更页面的界面切图进行图形相似度检测，以初步确定加载外部文件是否使原始页面的样式受到污染，最后在原始页面的样式未受到污染的情况下，根据原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息是否一致，确定加载外部文件是否使原始页面的样式受到污染。本申请能够根据变更前后的页面的界面切图和元素节点属性信息，确定出加载外部文件是否会使原始页面的样式受到污染，从而能够仅将未受到样式污染的页面展示给用户，提高了用户体验。

技术特征：

1.一种页面样式污染检测方法，其特征在于，包括：

2.根据权利要求1所述的页面样式污染检测方法，其特征在于，所述对所述原始页面的界面切图和所述变更页面的界面切图进行图形相似度检测，以初步确定加载所述外部文件是否使所述原始页面的样式受到污染，包括：

3.根据权利要求2所述的页面样式污染检测方法，其特征在于，所述图形相似度检测算法包括以下算法中的一种或多种：余弦相似度检测算法、哈希算法、直方图检测算法和深度学习算法。

4.根据权利要求1所述的页面样式污染检测方法，其特征在于，一元素节点的属性信息包括该元素节点的位置属性和样式属性；

5.根据权利要求4所述的页面样式污染检测方法，其特征在于，一元素节点的位置属性包括该元素节点在对应页面所对应的文档对象模型dom树中的父节点、子节点和兄弟节点；

6.根据权利要求1所述的页面样式污染检测方法，其特征在于，所述外部文件包括视图逻辑层文件和样式控制层文件；

7.根据权利要求1所述的页面样式污染检测方法，其特征在于，还包括：

8.一种页面样式污染检测装置，其特征在于，包括：

9.一种页面样式污染检测设备，其特征在于，包括存储器和处理器；

10.一种可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现如权利要求1～7任一项所述的页面样式污染检测方法的各个步骤。

技术总结
本申请提供了页面样式污染检测方法、装置、设备和介质，可应用于页面测试领域或金融领域。方法包括：获取原始页面的界面切图和原始页面包含的各元素节点的属性信息；在原始页面上加载外部文件后，获取变更页面的界面切图和变更页面包含的各元素节点的属性信息；对原始页面的界面切图和变更页面的界面切图进行图形相似度检测，以初步确定加载外部文件是否使原始页面的样式受到污染；在原始页面的样式未受到污染的情况下，根据原始页面包含的各元素节点的属性信息和变更页面包含的各元素节点的属性信息是否一致，确定加载外部文件是否使原始页面的样式受到污染。本申请能够确定出加载外部文件是否会使原始页面的样式受到污染，提高了用户体验。

技术研发人员：孙华强
受保护的技术使用者：中银金融科技有限公司
技术研发日：
技术公布日：2024/1/13