基于CSS样式预渲染对比的UI自动化方法及相关装置.pdf

《基于CSS样式预渲染对比的UI自动化方法及相关装置.pdf》由会员分享，可在线阅读，更多相关《基于CSS样式预渲染对比的UI自动化方法及相关装置.pdf（14页完成版）》请在专利查询网上搜索。

1、(19)国家知识产权局(12)发明专利申请(10)申请公布号 (43)申请公布日 (21)申请号 202410015534.5(22)申请日 2024.01.05(71)申请人 易方信息科技股份有限公司地址 510000 广东省广州市番禺区大学城中心北大街66号402室(72)发明人 曹立品丁一黄海亮白剑张海林鲁和平李长杰陈焕然李乐王浩洪行健冷冬李尚然(74)专利代理机构 广东广盈专利商标事务所(普通合伙)44339专利代理师 李俊(51)Int.Cl.G06F 16/957(2019.01)G06F 8/38(2018.01)(54)发明名称基于CSS样式预渲染对比的UI自动化方法及相关装置。

2、(57)摘要本发明公开了一种基于CSS样式预渲染对比的UI自动化方法及相关装置，其中，所述方法包括：基于前端代码仓库获取代码文件，并对所述代码文件进行解析，获得标签数据库和样式数据库；基于所述标签数据库和样式数据库构建预渲染页面；基于自动化执行代码获取元素截图；基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。本发明不仅可以更准确且快速地定位页面元素，并且降低了维护成本和提高了代码执行的稳定性。权利要求书2页 说明书9页 附图2页C。

3、N 117520690 A2024.02.06CN 117520690 A1.一种基于CSS样式预渲染对比的UI自动化方法，其特征在于，所述方法包括：基于前端代码仓库获取代码文件，并对所述代码文件进行解析，获得标签数据库和样式数据库；基于所述标签数据库和样式数据库构建预渲染页面；基于自动化执行代码获取元素截图；基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。2.根据权利要求1所述的基于CSS样式预渲染对比的UI自动化方法，其特征在。

4、于，所述代码文件包括HTML文件和CSS文件。3.根据权利要求1所述的基于CSS样式预渲染对比的UI自动化方法，其特征在于，所述对所述代码文件进行解析，获得标签数据库和样式数据库，包括：对代码文件中的HTML文件进行结构解析，获得HTML标签和HTML标签对应的属性；基于所述HTML标签和HTML标签对应的属性构建标签数据库；提取代码文件中CSS文件的CSS类名和CSS样式描述，并基于所述CSS类名和CSS样式描述构建样式数据库。4.根据权利要求1所述的基于CSS样式预渲染对比的UI自动化方法，其特征在于，所述基于所述标签数据库和样式数据库构建预渲染页面，包括：创建HTML文件，利用标签数据库。

5、中的标签信息根据预设顺序对HTML文件中的页面进行渲染，并基于样式数据库中的样式信息对所述标签信息进行样式渲染，获得预渲染页面。5.根据权利要求1所述的基于CSS样式预渲染对比的UI自动化方法，其特征在于，所述基于自动化执行代码获取元素截图，包括：基于自动化执行代码对所操作的元素区域进行截图，获得元素截图。6.根据权利要求1所述的基于CSS样式预渲染对比的UI自动化方法，其特征在于，所述基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构，包括：基于所述元素截图对所述预渲染页面搜寻满足预设相似度阈值的元素；基于满足预设相似度阈值的元素从所述标签数据库中获取。

6、对应的标签结构。7.根据权利要求1所述的基于CSS样式预渲染对比的UI自动化方法，其特征在于，所述基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务，包括：基于对应的标签结构利用XPath表达式的语法规则构建元素表达式，所述元素表达式用于定位页面元素；将所述元素表达式返回至所述自动化执行代码；基于已返回元素表达式的自动化执行代码利用find_element方法搜寻DOM节点；基于WebDriver驱动原理操作所述DOM节点进行自动化任务。8.一种基于CSS样式预渲染对比的UI自动化装置，其特征在于，所述装置包括：数据库创建模。

7、块，用于基于前端代码仓库获取代码文件，并对所述代码文件进行解析，权利要求书1/2 页2CN 117520690 A2获得标签数据库和样式数据库；预渲染页面构建模块，用于基于所述标签数据库和样式数据库构建预渲染页面；元素截图获取模块，用于基于自动化执行代码获取元素截图；视觉样式匹配模块，用于基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；自动化任务模块，用于基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。9.一种计算机设备，所述计算机设备包括处理器及存储器，其特征在于，所述存储器。

8、用于存储指令，所述处理器用于调用所述存储器中的指令，使得所述计算机设备执行如权利要求1至权利要求7中任一项所述的基于CSS样式预渲染对比的UI自动化方法。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储计算机指令，当所述计算机指令在计算机设备上运行时，使得所述计算机设备执行如权利要求1至权利要求7中任一项所述的基于CSS样式预渲染对比的UI自动化方法。权利要求书2/2 页3CN 117520690 A3基于CSS样式预渲染对比的UI自动化方法及相关装置技术领域0001本发明涉及计算机技术领域，尤其涉及一种基于CSS样式预渲染对比的UI自动化方法及相关装置。背景技术0002传。

9、统的UI自动化测试中，我们要定位一个元素表达式，通常借助浏览器的开发者工具进行元素定位和编写，所有的元素都要通过手动查找的方式去书写，而在传统的元素定位方法中，通常采用仅基于xpath的定位方法，而xpath元素表达式的组成通常是依赖了元素的class属性，class属性在前端工程学中，通常是一类CSS代码的代称，CSS又是前端样式的关键组成部分，因此，仅基于xpath的定位方法的不确定性和错误率较高，对于传统方法而言，手动寻找和编写元素表达式是耗时且易出错的，该方法可能会因页面变动而失效，影响UI自动化的准确性，并且前端样式的频繁变化可能导致测试脚本失效，测试脚本的频繁更新也会带来更高的维护。

10、成本。发明内容0003本发明的目的在于克服现有技术的不足，本发明提供了一种基于CSS样式预渲染对比的UI自动化方法及相关装置，不仅可以更准确且快速地定位页面元素，并且降低了维护成本和提高了代码执行的稳定性。0004为了解决上述技术问题，本发明提供了一种基于CSS样式预渲染对比的UI自动化方法，所述方法包括：基于前端代码仓库获取代码文件，并对所述代码文件进行解析，获得标签数据库和样式数据库；基于所述标签数据库和样式数据库构建预渲染页面；基于自动化执行代码获取元素截图；基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；基于对应的标签结构构建元素表达式，并基。

11、于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。0005可选的，所述代码文件包括HTML文件和CSS文件。0006可选的，所述对所述代码文件进行解析，获得标签数据库和样式数据库，包括：对代码文件中的HTML文件进行结构解析，获得HTML标签和HTML标签对应的属性；基于所述HTML标签和HTML标签对应的属性构建标签数据库；提取代码文件中CSS文件的CSS类名和CSS样式描述，并基于所述CSS类名和CSS样式描述构建样式数据库。0007可选的，所述基于所述标签数据库和样式数据库构建预渲染页面，包括：创建HTML文件，利用标签数据库中的标签信息根据预设顺序对H。

12、TML文件中的页面说明书1/9 页4CN 117520690 A4进行渲染，并基于样式数据库中的样式信息对所述标签信息进行样式渲染，获得预渲染页面。0008可选的，所述基于自动化执行代码获取元素截图，包括：基于自动化执行代码对所操作的元素区域进行截图，获得元素截图。0009可选的，所述基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构，包括：基于所述元素截图对所述预渲染页面搜寻满足预设相似度阈值的元素；基于满足预设相似度阈值的元素从所述标签数据库中获取对应的标签结构。0010可选的，所述基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行。

13、代码获取DOM节点，基于所述DOM节点进行自动化任务，包括：基于对应的标签结构利用XPath表达式的语法规则构建元素表达式，所述元素表达式用于定位页面元素；将所述元素表达式返回至所述自动化执行代码；基于已返回元素表达式的自动化执行代码利用find_element方法搜寻DOM节点；基于WebDriver驱动原理操作所述DOM节点进行自动化任务。0011另外，本发明还提供了一种基于CSS样式预渲染对比的UI自动化装置，所述装置包括：数据库创建模块，用于基于前端代码仓库获取代码文件，并对所述代码文件进行解析，获得标签数据库和样式数据库；预渲染页面构建模块，用于基于所述标签数据库和样式数据库构建预渲。

14、染页面；元素截图获取模块，用于基于自动化执行代码获取元素截图；视觉样式匹配模块，用于基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；自动化任务模块，用于基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。0012另外，本发明还提供了一种计算机设备，所述计算机设备包括处理器及存储器，所述存储器用于存储指令，所述处理器用于调用所述存储器中的指令，使得所述计算机设备执行上述的基于CSS样式预渲染对比的UI自动化方法。0013另外，本发明还提供了一种计算机可读存储介质，所述计算机可读存储介。

15、质存储计算机指令，当所述计算机指令在计算机设备上运行时，使得所述计算机设备执行上述的基于CSS样式预渲染对比的UI自动化方法。0014在本发明实施例中，通过视觉样式匹配和标签数据库的应用，可以更准确且快速地定位页面元素，尤其适合复杂的页面结构，能够减少传统定位方法的不确定性和错误率，并且基于视觉样式而非特定框架的内部结构，使得对新技术和现有技术都具有很好的兼容性，通过自动化执行代码可以更灵活地适应页面变化，提高稳定性，并且由于构建的元素表达式，减少了因页面更新而频繁修改执行代码的需求，通过元素截图和视觉样式匹配可以更好地处理动态内容和复杂的用户交互，提高了元素定位的效率和准确性，降低了维护成本。

16、。说明书2/9 页5CN 117520690 A5附图说明0015为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见的，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。0016图1是本发明实施例中的基于CSS样式预渲染对比的UI自动化方法的流程示意图；图2是本发明实施例中的基于CSS样式预渲染对比的UI自动化装置的结构组成示意图；图3是本发明实施例中的计算机设备的结构组成示意图。具体实施方式0017下面将结合本发明实施例中的附图，对本发明实施。

17、例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。0018实施例一请参阅图1，图1是本发明实施例中的基于CSS样式预渲染对比的UI自动化方法的流程示意图。0019如图1所示，一种基于CSS样式预渲染对比的UI自动化方法，所述方法包括：S11：基于前端代码仓库获取代码文件，并对所述代码文件进行解析，获得标签数据库和样式数据库；在本发明具体实施过程中，所述代码文件包括HTML文件和CSS文件。0020进一步的，所述对所述代码文件进行解。

18、析，获得标签数据库和样式数据库，包括：对代码文件中的HTML文件进行结构解析，获得HTML标签和HTML标签对应的属性；基于所述HTML标签和HTML标签对应的属性构建标签数据库；提取代码文件中CSS文件的CSS类名和CSS描述样式，并基于所述CSS类名和CSS描述样式构建样式数据库。0021具体的，从前端代码仓库中选用相应的代码拉取指令获取对应的代码文件，代码文件包括超文本标记语言（Hyper Text Markup Language，HTML）文件和层叠样式表（Cascading Style Sheets，CSS）文件，HTML文件和CSS文件是构建用户界面（Uesr Interface，。

19、UI）的两个基本要素，它们紧密相连，相互依存，让界面实现所需要的布局样式，HTML文件用于描述界面的内容、结构和语义，而CSS文件则用于描述界面的样式、布局和表现；对代码文件中的HTML文件进行结构解析，通过正则表达式来查找并提取HTML标签，HTML标签包括标题标签、段落标签、分区标签和图像标签等，对HTML标签进行解析，便可得到其对应的属性，使用关键字获取HTML标签的元素对象，根据HTML标签的元素对象使用attr()函数获取HTML标签对应的属性，HTML标签对应的属性包括宽度、边距、背景和颜色等；基于所述HTML标签和HTML标签对应的属性构建标签数据库，对HTML标签和HTML标签。

20、对应的属性进行匹配，利用预设数据库创建工具对每一个HTML标签及其对应的属性构建数据库，进而可以得到标签数据库；提取代码文件中CSS文件的CSS类名和CSS样式描述，使用CSS选择器获取CSS类名，CSS类名包括布局类名和元素相关类名等，通过样式引入语句查找CSS类名对说明书3/9 页6CN 117520690 A6应的CSS样式描述，并基于所述CSS类名及其对应的CSS样式描述利用预设数据库创建工具构建样式数据库，通过拉取HTML和CSS文件以创建标签数据库和样式数据库能够允许更容易地扩展页面的相关操作。0022S12：基于所述标签数据库和样式数据库构建预渲染页面；在本发明具体实施过程中，所。

21、述基于所述标签数据库和样式数据库构建预渲染页面，包括：创建HTML文件，利用标签数据库中的标签信息根据预设顺序对HTML文件中的页面进行渲染，并基于样式数据库中的样式信息对所述标签信息进行样式渲染，获得预渲染页面。0023具体的，创建一个新的HTML文件，根据标签数据库将标签信息按预设顺序渲染到HTML文件中的页面上，同时使用样式数据库中的样式信息为标签渲染样式，CSS解释器能够为标签语言提供样式描述，因此使用CSS解释器为标签数据库中的标签渲染上样式信息，即将样式信息定义在标签信息元素的相关属性中，从而为界面的布局提供依据，通过样式信息与标签信息的渲染结合生成渲染树，渲染树可网罗页面上的相关。

22、样式内容，布局渲染树，通过渲染树的布局确定渲染页面所需的节点，通过页面所需节点确定每个渲染样式的标签在界面上的具体位置，输出每个经过样式渲染的相关标签的布局，将其渲染至页面中，从而完成页面的预渲染，获得预渲染页面。0024S13：基于自动化执行代码获取元素截图；在本发明具体实施过程中，所述基于自动化执行代码获取元素截图，包括：基于自动化执行代码对所操作的元素区域进行截图，获得元素截图。0025具体的，需要说明的是，对于自动化执行代码的截图操作，针对要操作的元素不进行实际定位，而是对元素区域进行截图，通过自动化执行代码定位到指定的元素区域上，根据定位到的元素区域，使用对应的元素对象属性获取其位置。

23、和尺寸信息，动态调整截图窗口的大小，确保要截图的元素在可见区域内，而后便可对所操作的元素区域进行截图，获得对应的元素截图，通过自动化执行代码可以更灵活地适应页面变化，提高运行的稳定性和准确度。0026S14：基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；在本发明具体实施过程中，所述基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构，包括：基于所述元素截图对所述预渲染页面搜寻满足预设相似度阈值的元素；基于满足预设相似度阈值的元素从所述标签数据库中获取对应的标签结构。0027具体的，根据所要操作的元素截图在预渲染。

24、页面上进行视觉样式匹配，即进行预渲染页面的样式比对，可通过选取对应的样式规则，根据选择器利用对应的样式规则得到元素的索引信息，根据相关索引信息搜索满足预设相似度阈值的元素，视觉样式匹配将样式应用于界面的元素，根据视觉样式匹配使用预设组合的选择器来定位要应用样式的元素，若找到满足相似度阈值的元素，便从标签数据库中返回与该元素对应的标签结构，即针对页面进行涉及元素的视觉样式匹配，与预渲染组合样式进行匹配，从而分析推断出元素可能包含的类型，通过视觉样式匹配和标签数据库的应用，可以更准确且快速地定位页面元素，这种方法尤其适合复杂的页面结构，能够减少传统定位方法的不确定性和错误率，并说明书4/9 页7C。

25、N 117520690 A7且传统的自动化方法在处理复杂的用户交互和动态内容时可能会遇到困难，因此通过截图和视觉匹配可以更好地处理这类场景，提供更为准确的结果。0028S15：基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。0029在本发明具体实施过程中，所述基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务，包括：基于对应的标签结构利用XPath表达式的语法规则构建元素表达式，所述元素表达式用于定位页面元素；将所述元素表达式返回至所述自动化执行代码；。

26、基于已返回元素表达式的自动化执行代码利用find_element方法搜寻DOM节点；基于WebDriver驱动原理操作所述DOM节点进行自动化任务。0030具体的，根据得到的标签结构与XPath表达式的语法规则构建用于定位页面元素的元素表达式，元素表达式可通过在页面选取对应的节点来定位所要求的页面元素，XPath是一种用于在界面中定位元素的语言，XPath表达式的语法规则由一系列路径表达式组成，分别为绝对路径表达式、相对路径表达式、谓语、通配符和轴等，使用XPath表达式的相关语法规则和对应的标签结构构建元素表达式能够更好的定位元素，将构建的元素表达式返回至自动化执行代码，而后自动化执行代码使。

27、用find_element方法搜寻文档对象模型（Document Object Model，DOM）节点，find_element方法是一种元素定位方法，通过元素表达式查找DOM节点，DOM节点也可表示为DOM元素，DOM节点的作用是将界面转化为一个对象，进而可以对其进行各种操作，根据WebDriver驱动原理操作所述DOM节点进行自动化任务，WebDriber驱动原理是模拟用户的行为，进而对目标对象执行各种操作，通过WebDriber驱动原理能够将相应的操作转换为计算机能够理解的命令，再通过操作DOM节点实现自动化任务，依赖于视觉样式匹配和动态生成的元素表达式，不仅减少了元素表达式编写的时间。

28、，提高了元素定位的准确率，并且能够减少了因页面更新而频繁修改脚本的需求，自动化地执行相关操作和检查页面的内容，可以做到动态地改变页面外观和行为，能够更灵活地适应页面变化。0031在本发明实施例中，通过视觉样式匹配和标签数据库的应用，可以更准确且快速地定位页面元素，尤其适合复杂的页面结构，能够减少传统定位方法的不确定性和错误率，并且基于视觉样式而非特定框架的内部结构，使得对新技术和现有技术都具有很好的兼容性，通过自动化执行代码可以更灵活地适应页面变化，提高稳定性，并且由于构建的元素表达式，减少了因页面更新而频繁修改执行代码的需求，通过元素截图和视觉样式匹配可以更好地处理动态内容和复杂的用户交互，。

29、提高了元素定位的效率和准确性，降低了维护成本。0032实施例二请参阅图2，图2是本发明实施例中的基于CSS样式预渲染对比的UI自动化装置的结构组成示意图。0033如图2所示，一种基于CSS样式预渲染对比的UI自动化装置，所述装置包括：数据库创建模块21：用于基于前端代码仓库获取代码文件，并对所述代码文件进行解析，获得标签数据库和样式数据库；在本发明具体实施过程中，所述代码文件包括HTML文件和CSS文件。说明书5/9 页8CN 117520690 A80034进一步的，所述对所述代码文件进行解析，获得标签数据库和样式数据库，包括：对代码文件中的HTML文件进行结构解析，获得HTML标签和HTM。

30、L标签对应的属性；基于所述HTML标签和HTML标签对应的属性构建标签数据库；提取代码文件中CSS文件的CSS类名和CSS描述样式，并基于所述CSS类名和CSS描述样式构建样式数据库。0035具体的，从前端代码仓库中选用相应的代码拉取指令获取对应的代码文件，代码文件包括超文本标记语言（Hyper Text Markup Language，HTML）文件和层叠样式表（Cascading Style Sheets，CSS）文件，HTML文件和CSS文件是构建用户界面（Uesr Interface，UI）的两个基本要素，它们紧密相连，相互依存，让界面实现所需要的布局样式，HTML文件用于描述界面的内。

31、容、结构和语义，而CSS文件则用于描述界面的样式、布局和表现；对代码文件中的HTML文件进行结构解析，通过正则表达式来查找并提取HTML标签，HTML标签包括标题标签、段落标签、分区标签和图像标签等，对HTML标签进行解析，便可得到其对应的属性，使用关键字获取HTML标签的元素对象，根据HTML标签的元素对象使用attr()函数获取HTML标签对应的属性，HTML标签对应的属性包括宽度、边距、背景和颜色等；基于所述HTML标签和HTML标签对应的属性构建标签数据库，对HTML标签和HTML标签对应的属性进行匹配，利用预设数据库创建工具对每一个HTML标签及其对应的属性构建数据库，进而可以得到标。

32、签数据库；提取代码文件中CSS文件的CSS类名和CSS样式描述，使用CSS选择器获取CSS类名，CSS类名包括布局类名和元素相关类名等，通过样式引入语句查找CSS类名对应的CSS样式描述，并基于所述CSS类名及其对应的CSS样式描述利用预设数据库创建工具构建样式数据库，通过拉取HTML和CSS文件以创建标签数据库和样式数据库能够允许更容易地扩展页面的相关操作。0036预渲染页面构建模块22：用于基于所述标签数据库和样式数据库构建预渲染页面；在本发明具体实施过程中，所述基于所述标签数据库和样式数据库构建预渲染页面，包括：创建HTML文件，利用标签数据库中的标签信息根据预设顺序对HTML文件中的页。

33、面进行渲染，并基于样式数据库中的样式信息对所述标签信息进行样式渲染，获得预渲染页面。0037具体的，创建一个新的HTML文件，根据标签数据库将标签信息按预设顺序渲染到HTML文件中的页面上，同时使用样式数据库中的样式信息为标签渲染样式，CSS解释器能够为标签语言提供样式描述，因此使用CSS解释器为标签数据库中的标签渲染上样式信息，即将样式信息定义在标签信息元素的相关属性中，从而为界面的布局提供依据，通过样式信息与标签信息的渲染结合生成渲染树，渲染树可网罗页面上的相关样式内容，布局渲染树，通过渲染树的布局确定渲染页面所需的节点，通过页面所需节点确定每个渲染样式的标签在界面上的具体位置，输出每个经。

34、过样式渲染的相关标签的布局，将其渲染至页面中，从而完成页面的预渲染，获得预渲染页面。0038元素截图获取模块23：用于基于自动化执行代码获取元素截图；在本发明具体实施过程中，所述基于自动化执行代码获取元素截图，包括：基于自动化执行代码对所操作的元素区域进行截图，获得元素截图。0039具体的，需要说明的是，对于自动化执行代码的截图操作，针对要操作的元素不进行实际定位，而是对元素区域进行截图，通过自动化执行代码定位到指定的元素区域上，根说明书6/9 页9CN 117520690 A9据定位到的元素区域，使用对应的元素对象属性获取其位置和尺寸信息，动态调整截图窗口的大小，确保要截图的元素在可见区域内。

35、，而后便可对所操作的元素区域进行截图，获得对应的元素截图，通过自动化执行代码可以更灵活地适应页面变化，提高运行的稳定性和准确度。0040视觉样式匹配模块24：用于基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构；在本发明具体实施过程中，所述基于所述元素截图对所述预渲染页面进行视觉样式匹配，并基于视觉样式匹配结果获取对应的标签结构，包括：基于所述元素截图对所述预渲染页面搜寻满足预设相似度阈值的元素；基于满足预设相似度阈值的元素从所述标签数据库中获取对应的标签结构。0041具体的，根据所要操作的元素截图在预渲染页面上进行视觉样式匹配，即进行预渲染页面的样式。

36、比对，可通过选取对应的样式规则，根据选择器利用对应的样式规则得到元素的索引信息，根据相关索引信息搜索满足预设相似度阈值的元素，视觉样式匹配将样式应用于界面的元素，根据视觉样式匹配使用预设组合的选择器来定位要应用样式的元素，若找到满足相似度阈值的元素，便从标签数据库中返回与该元素对应的标签结构，即针对页面进行涉及元素的视觉样式匹配，与预渲染组合样式进行匹配，从而分析推断出元素可能包含的类型，通过视觉样式匹配和标签数据库的应用，可以更准确且快速地定位页面元素，这种方法尤其适合复杂的页面结构，能够减少传统定位方法的不确定性和错误率，并且传统的自动化方法在处理复杂的用户交互和动态内容时可能会遇到困难，。

37、因此通过截图和视觉匹配可以更好地处理这类场景，提供更为准确的结果。0042自动化任务模块25：用于基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务。0043在本发明具体实施过程中，所述基于对应的标签结构构建元素表达式，并基于所述元素表达式利用自动化执行代码获取DOM节点，基于所述DOM节点进行自动化任务，包括：基于对应的标签结构利用XPath表达式的语法规则构建元素表达式，所述元素表达式用于定位页面元素；将所述元素表达式返回至所述自动化执行代码；基于已返回元素表达式的自动化执行代码利用find_element方法搜寻DOM。

38、节点；基于WebDriver驱动原理操作所述DOM节点进行自动化任务。0044具体的，根据得到的标签结构与XPath表达式的语法规则构建用于定位页面元素的元素表达式，元素表达式可通过在页面选取对应的节点来定位所要求的页面元素，XPath是一种用于在界面中定位元素的语言，XPath表达式的语法规则由一系列路径表达式组成，分别为绝对路径表达式、相对路径表达式、谓语、通配符和轴等，使用XPath表达式的相关语法规则和对应的标签结构构建元素表达式能够更好的定位元素，将构建的元素表达式返回至自动化执行代码，而后自动化执行代码使用find_element方法搜寻文档对象模型（Document Object。

39、 Model，DOM）节点，find_element方法是一种元素定位方法，通过元素表达式查找DOM节点，DOM节点也可表示为DOM元素，DOM节点的作用是将界面转化为一个对象，进而可以对其进行各种操作，根据WebDriver驱动原理操作所述DOM节点进行自动化任务，WebDriber驱动原理是模拟用户的行为，进而对目标对象执行各种操作，通过WebDriber驱动原理能够将相应的操作转换为计算机能够理解的命令，再通过操作DOM节点实现自动化说明书7/9 页10CN 117520690 A10任务，依赖于视觉样式匹配和动态生成的元素表达式，不仅减少了元素表达式编写的时间，提高了元素定位的准确率，。

40、并且能够减少了因页面更新而频繁修改脚本的需求，自动化地执行相关操作和检查页面的内容，可以做到动态地改变页面外观和行为，能够更灵活地适应页面变化。0045在本发明实施例中，通过视觉样式匹配和标签数据库的应用，可以更准确且快速地定位页面元素，尤其适合复杂的页面结构，能够减少传统定位方法的不确定性和错误率，并且基于视觉样式而非特定框架的内部结构，使得对新技术和现有技术都具有很好的兼容性，通过自动化执行代码可以更灵活地适应页面变化，提高稳定性，并且由于构建的元素表达式，减少了因页面更新而频繁修改执行代码的需求，通过元素截图和视觉样式匹配可以更好地处理动态内容和复杂的用户交互，提高了元素定位的效率和准确。

41、性，降低了维护成本。0046本发明实施例提供的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该程序被处理器执行时实现上述实施例中任意一个实施例的基于CSS样式预渲染对比的UI自动化方法。其中，所述计算机可读存储介质包括但不限于任何类型的盘（包括软盘、硬盘、光盘、CDROM、和磁光盘）、ROM（ReadOnly Memory，只读存储器）、RAM（Random AcceSS Memory，随即存储器）、EPROM（EraSable Programmable ReadOnly Memory，可擦写可编程只读存储器）、EEPROM（Electrically EraSable Pr。

42、ogrammableReadOnly Memory，电可擦可编程只读存储器）、闪存、磁性卡片或光线卡片。也就是，存储设备包括由设备（例如，计算机、手机）以能够读的形式存储或传输信息的任何介质，可以是只读存储器，磁盘或光盘等。0047实施例三请参阅图3，图3是本发明实施例中的计算机设备的结构组成示意图。0048本发明实施例还提供了一种计算机设备，如图3所示，所述计算机设备包括存储器31、处理器33以及存储在存储器31中并可在处理器33上运行的计算机程序32。本领域技术人员可以理解，图3示出的计算机设备并不构成对所有设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件。存储器31可用于存储。

43、计算机程序32以及各功能模块，处理器33运行存储在存储器31的计算机程序32，从而执行设备的各种功能应用以及数据处理。存储器可以是内存储器或外存储器，或者包括内存储器和外存储器两者。内存储器可以包括只读存储器(ROM)、可编程 ROM(PROM)、电可编程ROM(EPROM)、电可擦写可编程ROM(EEPROM)、快闪存储器、或者随机存储器。外存储器可以包括硬盘、软盘、ZIP盘、U盘、磁带等。处理器33可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器 (Digital Signal Processor，DSP)、专用集成电路 。

44、(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列 (FieldProgrammable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器、单片机或者处理器33也可以是任何常规的处理器等。本发明所公开的处理器和存储器包括但不限于这些类型的处理器和存储器。本发明所公开的处理器和存储器只作为例子而非作为限定。0049作为一个实施例，所述计算机设备包括：一个或多个处理器33，存储器31，一个或多个计算机程序32，其中所述一个或多个应用程序32被存储在存储器31中并被配。

45、置为由所说明书8/9 页11CN 117520690 A11述一个或多个处理器33执行，所述一个或多个计算机程序32配置用于执行上述任意一实施例中的基于CSS样式预渲染对比的UI自动化方法，具体实施过程请参阅上述实施例，在此不在赘述。0050在本发明实施例中，通过视觉样式匹配和标签数据库的应用，可以更准确和快速地定位页面元素，尤其适合复杂的页面结构，能够减少传统定位方法的不确定性和错误率，并且基于视觉样式而非特定框架的内部结构，使得对新技术和现有技术都具有很好的兼容性，通过自动化执行代码可以更灵活地适应页面变化，提高稳定性，并且由于构建的元素表达式，减少了因页面更新而频繁修改执行代码的需求，通。

46、过元素截图和视觉样式匹配可以更好地处理动态内容和复杂的用户交互，提高了元素定位的效率和准确性，降低了维护成本。0051另外，以上对本发明实施例所提供的基于CSS样式预渲染对比的UI自动化方法及相关装置进行了详细介绍，本文中应采用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。说明书9/9 页12CN 117520690 A12图 1说明书附图1/2 页13CN 117520690 A13图 2图3说明书附图2/2 页14CN 117520690 A14。