Method for automatically extracting UI elements of Web page based on AI large model

Abstract

The invention relates to the technical field of artificial intelligence testing, discloses a method for automatically extracting UI elements of a Web page based on an AI large model, realizes automatic extraction of positioning information of the UI elements of the Web page of an embedded product, directly provides the positioning information to a Web testing framework for use, and solves the problems of low UI element extraction efficiency and insufficient adaptability in a traditional scheme. Playwright is used for obtaining page screenshots and HTML DOM information, after intelligent cleaning, the page screenshots and the HTML DOM information are transmitted to an AI model to analyze page structures, interactive elements such as buttons and input boxes are automatically recognized, and an optimal selector is generated; furthermore, page navigation and multi-page element collection are realized by combining an AI-driven automatic tool, and finally, an operation sequence is organized through a GUI (Graphical User Interface), so that automatic testing is quickly completed. According to the method, the problems of low efficiency and poor adaptability of a traditional method are solved, the accuracy and maintenance efficiency of Web testing are remarkably improved, and the method is suitable for dynamic and complex modern Web pages.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of artificial intelligence testing, and particularly relates to a method for automatically extracting UI elements of a Web page based on an AI large model. BACKGROUND

[0002] With the development of Internet technology and the popularity of embedded products, Web pages have become the main carrier for embedded devices to interact with users. Web page design presents the characteristics of dynamicization, componentization and multi-end adaptation. Elements are dynamically generated through front-end frameworks such as React and Vue, and complex visual interactions are built relying on technologies such as CSS3 and Canvas. At the same time, different resolution display terminals and browser environments need to be compatible, which makes the UI structure complexity of Web pages grow exponentially.

[0003] For Web page testing of embedded products, traditional UI element extraction methods mainly rely on manual writing of element positioning rules or automatic tools based on recording and playback methods, which require manual writing of complex scripts and locators. These methods are often inefficient and lack adaptability when faced with dynamically generated and structurally variable modern Web pages, further increasing the difficulty of automatic extraction, and the maintenance cost is also very high.

[0004] In recent years, breakthroughs in artificial intelligence (AI) technology, especially the emergence of multi-modal fusion large models such as Universal Language Model VL, have provided new solutions for the automated processing of Web page UI elements. Through the pre-training of massive data, these models can deeply understand the semantics and contextual relationships of text, images and multi-modal content, thereby significantly improving the performance of natural language processing (NLP) and computer vision (CV) tasks. In this context, it is possible to apply AI large models to the automated extraction of Web page UI elements. By combining visual features (such as element position, style, type) and semantic features (such as text content, attributes), UI elements (such as buttons, navigation menus, input boxes, etc.) can be more accurately identified. SUMMARY

[0005] The technical problem to be solved by the present application is to provide a method for automatically extracting Web page UI elements based on an AI large model, to realize the automatic extraction of embedded product Web page UI element positioning information, and to directly provide Web testing framework for use, solving the problems of low extraction efficiency and insufficient adaptability of traditional solutions.

[0006] The technical solution adopted by the present application to solve the above technical problems is: A method for automatically extracting Web page UI elements based on an AI large model, comprising the following steps: The Playwright automated testing framework was used to interact with the web page, enter the web login page, and obtain a screenshot and HTML DOM information of the web login page. Intelligent cleanup of the HTML DOM information; The cleaned HTML DOM information and the page screenshot are input into the multimodal AI vision model. The interactive UI elements are identified by analyzing the page structure, and an element positioning strategy is generated. Based on the element location strategy, and combined with automated tools, navigation between Web subpages is completed, subpage data is collected, and UI elements of each subpage are extracted. The UI elements of all pages are organized into an operation sequence through a GUI visual interface, which matches browser actions to generate executable web automation test scripts.

[0007] Furthermore, the intelligent cleaning includes: Tag-level cleanup: Delete <script>、<style>、<meta>类非UI标签；属性过滤：基于正则模式匹配与白名单保护，过滤无用属性，保留关键属性；空元素递归清理：递归删除无内容空标签，且保留、<hr>类具有语义意义的自闭合标签；注释和空白清理：移除HTML注释、多余空白字符及换行符；格式优化：根据AI分析场景需求，选择采用压缩或美化方式输出清理后的HTMLDOM信息。

[0008] 进一步的，所述可交互UI元素包括：输入框、链接、开关按钮、下拉框、图标及标签。

[0009] 进一步的，所述生成元素定位策略，包括：按照ID选择器＞name属性＞css选择器＞xpath 选择器＞标签选择器的优先级来生成元素定位策略。

[0010] 进一步的，所述多模态AI视觉大模型输出结构化JSON数据，包括：UI元素的css选择器、customname自定义名称、id、name 属性、value 值、xpath 路径、href 链接地址、src图片源地址、tag标签类型、text文本内容及type元素类型；且生成的xpath路径和css选择器能唯一标识对应UI元素。

[0011] 进一步的，所述自动化工具包括：Playwright与AI驱动的Browser Use浏览器自动化测试工具。

[0012] 进一步的，所述子页面间的导航方式包括：结合Playwright 基于登录页定位信息实现自动登录，进入Web主页后，由多模态AI视觉大模型提取主页导航菜单信息，再通过Browser Use工具实现子页面间的自动切换。

[0013] 进一步的，所述采集子页面数据并提取出各子页面UI 元素，包括：采集所有子页面的URL和页面截图，根据所有子页面的URL，结合Playwright获取所有子页面的HTML DOM信息，经过智能化清理后，将清理后的HTML DOM信息及页面截图传递给多模态AI视觉大模型分析页面结构并提取元素定位信息。

[0014] 进一步的，所述GUI可视化界面支持对操作序列的可视化编辑，且生成的Web自动化测试脚本可被Playwright框架解析执行。

[0015] 本发明的有益效果是：（1）提升UI元素提取效率，降低人工依赖：本发明通过Playwright自动化框架自动获取Web页面截图与HTML DOM信息，结合多模态AI视觉大模型智能识别可交互UI元素并生成最优定位策略，无需人工编写复杂定位规则或反复调试录制-回放脚本。相比传统方法，可快速完成从单页面到多导航页面的元素提取，尤其适配嵌入式产品Web页面多版本迭代场景，减少人工操作成本，提升提取效率。

[0016] （2）增强对动态、复杂Web页面的适应性：本发明通过智能化HTML清理保留核心信息，再利用AI 模型融合视觉特征与语义特征识别元素，突破传统方法对固定 DOM 属性的依赖。即使页面样式调整、元素动态加载，AI 仍能精准定位元素，降低定位器失效概率，提升测试脚本稳定性与页面适配能力。

[0017] （3）实现多页面协同自动化，覆盖全测试流程：本发明通过AI驱动的Browser Use工具自动识别导航菜单、切换页面，结合Playwright 完成自动登录与多子页面DOM采集，无需人工配置页面跳转逻辑或单独处理每个子页面，可一次性获取嵌入式产品Web页面（从登录页到各功能子页面）的元素信息，覆盖完整测试场景，提升测试完整性与连贯性。附图说明

[0018] 图1为本发明中基于AI大模型自动化提取Web页面UI元素的系统框架图。具体实施方式

[0019] 本发明旨在提供一种基于AI大模型自动化提取Web页面UI元素的方法，实现嵌入式产品Web页面UI元素定位信息的自动提取，直接提供给Web测试框架使用，解决传统方案中UI元素提取效率低、适应性不足的问题。其核心思想是：将Playwright自动化测试框架、HTML智能清理机制、多模态AI 视觉大模型与可视化工具深度融合，实现Web页面UI元素从提取、定位到自动化测试脚本生成的端到端智能化处理，突破传统方法对人工规则编写和固定 DOM结构的依赖，提升UI元素提取效率、定位准确性与测试流程适配性。

[0020] 在具体实现上，本发明采用下列手段实现上述核心思想：（1）自动化数据采集：利用Playwright框架自动与Web页面交互，同步获取页面截图（视觉信息）与 HTML DOM 信息（结构语义信息），替代传统人工截图或手动抓取 DOM 的低效方式，为后续AI分析提供完整、准确的原始数据。

[0021] （2）智能清理优化数据：通过标签级清理、属性过滤、空元素删除等五步净化流程，去除 DOM中对测试与AI分析无价值的冗余信息，保留核心有效信息，减少AI分析的噪声干扰，同时压缩数据体积以提升处理效率。

[0022] （3）多模态AI精准识别：将清理后的DOM信息（语义维度）与页面截图（视觉维度）输入多模态AI视觉大模型，借助模型对多模态信息的协同理解能力，智能识别按钮、输入框等可交互UI元素，并按ID 选择器＞name 属性＞CSS 选择器＞XPath 选择器＞标签选择器的优先级生成最优定位策略，解决动态生成、结构多变页面中元素定位不稳定的问题。

[0023] （4）全流程自动化闭环：基于AI提取的定位信息，结合Playwright完成自动登录、Browser Use工具实现导航页面自动切换，批量采集多页面数据并重复AI提取流程；最终通过GUI可视化界面组织元素操作序列，直接生成Playwright可解析的自动化测试脚本。

[0024] 图1展示了本发明中基于AI大模型自动化提取Web页面UI元素的系统框架，其为实现Web页面UI元素的提取提供系统支撑，参见图1，该系统框架包括用户层、预处理层、AI大模型核心层、数据处理层、框架层这五个核心层级，具体介绍如下：1.用户层：位于框架最顶端，是系统与用户的交互入口，主要功能是接收用户对Web页面UI元素提取及自动化测试的需求，同时为用户提供后续操作序列可视化编辑的交互界面，支撑用户发起提取任务、配置任务参数及查看结果。

[0025] 用户层中的Web页面数据接入模块，负责获取目标Web页面的原始数据，包括：HTML数据：Web页面的HTML DOM 源码信息，包含页面元素的结构、属性（如 ID、class、name等）及层级关系。

[0026] 页面截图：Web页面的视觉呈现图像，包含元素的位置、样式、文本内容等视觉特征。

[0027] 两类数据共同构成后续AI分析的原始数据源，为多模态信息融合识别奠定基础。

[0028] 2.预处理层：对Web页面数据接入层获取的原始数据进行去噪提纯处理，核心功能为HTML清洗：通过预设的五步净化流程（标签级清理、属性智能过滤、空元素递归清理、注释和空白清理、格式优化），删除非UI标签、过滤无用属性、移除HTML注释及冗余字符，仅保留对测试和 AI分析有价值的DOM信息，同时确保输出格式适配AI模型输入需求压缩或美化），减少后续AI分析的噪声干扰，提升数据处理效率。

[0029] 3.AI 大模型核心层：是整个系统的核心处理单元，基于预处理后的DOM 信息和页面截图双模态数据，实现三大关键功能：UI元素识别：融合视觉特征（截图）与语义特征（DOM），智能识别页面中输入框、链接、开关按钮、下拉框、图标、标签等可交互UI元素。

[0030] UI元素定位：针对识别出的每个UI元素，按ID 选择器＞name 属性＞CSS 选择器＞XPath选择器＞标签选择器的优先级生成最优定位策略，输出包含XPath、CSS 选择器、ID等信息的定位数据。

[0031] UI页面切换：结合AI驱动的Browser Use工具，基于识别出的导航菜单信息，自动触发浏览器页面切换操作，实现多导航页面的数据采集，支撑全页面元素提取需求。

[0032] 该层级通过多模态AI大模型（如通义千问 VL）的语义与视觉协同理解能力，突破传统方法对固定DOM结构的依赖，解决动态页面元素定位难题。

[0033] 4.数据处理层：对AI大模型核心层输出的结果进行后续加工，包含四项核心操作：JSON格式化：将提取的UI元素定位信息（如 css、id、xpath、text、type等）转换为结构化JSON数据，确保数据规范统一。

[0034] 元素去重：剔除重复或无效的元素定位数据，保障元素信息的唯一性与准确性。

[0035] 数据保存：存储格式化后的元素数据及采集的多页面URL、截图等信息，为后续操作提供数据支撑。

[0036] 组织操作序列：将所有页面的UI元素按测试逻辑关联为可执行的操作序列，定义元素对应的浏览器操作动作（如点击、输入、跳转）。

[0037] 该层级实现从原始元素数据到可落地测试逻辑 转化，为自动化测试脚本生成提供直接输入。

[0038] 5.框架层：其为整个系统的技术支撑，提供实现各层级功能所需的工具与模型支持，包含四类核心组件：Playwright：负责与Web页面交互（如打开浏览器、获取DOM与截图、执行自动登录操作），并解析执行最终生成的自动化测试脚本。

[0039] Browser Use：AI驱动的浏览器自动化测试工具，支撑UI页面自动切换与多页面数据的采集通义千问VL：多模态AI视觉大模型，为UI元素识别、定位提供核心算法能力。

[0040] Pyside6：用于构建GUI可视化界面，支撑用户层的交互操作。

[0041] 实施例：本实施例提供了一种基于AI大模型自动化提取Web页面UI元素的方法，通过结合Playwright与多模态AI大模型实现的Web UI元素的定位提取，具体实施过程如下：一、前期准备：定义元素模型与Web元素模板：在启动UI元素提取流程前，需先明确数据标准与配置模板，为后续流程提供统一的数据语言，避免因数据格式混乱导致AI分析偏差或测试脚本无法解析。

[0042] （1）定义UI元素模型：设计包含Web UI元素核心属性的模型，确保AI提取的元素信息完整、规范，可直接对接自动化测试框架。在一种示例性的实施方案中，定义的元素模型属性如表1所示：表1 元素模型属性表

[0043] （2）配置Web元素模板JSON文件：设计标准化JSON模板文件，统一管理测试任务的基础配置（如登录信息、设备类型）与输出数据（如页面列表、元素列表），实现一次配置，多次复用。在一种示例性的实施方案中，Web元素模板JSON文件的字段设计如下表2所示：表2 Web元素模板JSON文件字段

[0044] 二、单页面数据采集与预处理：登录页是嵌入式产品Web测试的必经入口，且元素结构相对固定（如用户名输入框、密码输入框、登录按钮），优先处理登录页可快速验证流程有效性，同时为后续多页面提取提供登录凭证。

[0045] （1）采集登录页原始数据：通过Playwright自动化测试框架实现登录页数据的自动采集，具体如下：通过Playwright启动浏览器，进入登录页面，获取页面截图，从而保存登录页完整视觉图像，包含元素的位置、样式、文本等视觉特征，为多模态AI模型提供视觉维度数据，并获取HTML DOM源码，包含元素的标签、属性、层级关系等结构语义特征，为多模态AI模型提供结构维度数据，确保元素定位信息可追溯至DOM根源。

[0046] （2）智能化清理HTML DOM信息：由于HTML DOM 源码中包含大量非UI相关信息，若直接输入多模态AI模型会占用资源、干扰元素识别，因此需要进行不必要信息的清理，在一种示例性的实施方案中，采用五步净化流程来进行清理，过程如下：步骤1.标签级别清理：遍历DOM树，删除<script>、<style>、<meta>等非UI标签，这些标签对于视觉呈现和用户交互没有直接影响，但会大量占用token空间，删除后可大幅减少AI模型的输入数据量，提升分析效率。

[0047] 步骤2.属性过滤：采用正则模式匹配+白名单保护的双重机制筛选元素属性：内置17种常见前端框架的属性模式，自动保留与UI相关的属性，简化AI分析维度；支持用户自定义属性白名单，适配个性化场景。

[0048] 步骤3.空元素递归清理：递归遍历DOM树，删除无文本内容、无子元素且无语义意义的空标签，但智能保留、、<hr>等具有语义意义的自闭合标签。通过删除空标签，避免AI误判元素层级关系；保留语义化自闭合标签则可确保页面视觉结构不被破坏，避免AI因缺失关键视觉元素导致定位偏差。

[0049] 步骤4.注释和空白清理：移除HTML注释、多余的空白字符及多余换行符，进一步减少数据量，同时避免注释文本干扰AI对UI元素的识别。

[0050] 步骤5.格式智能优化：根据AI模型特性选择输出格式：若模型对输入格式敏感度低，输出压缩格式以最大化减少 token 占用；若模型需清晰层级，输出美化格式以提升AI对元素结构的理解。

[0051] 三、AI驱动的单页面元素提取：将预处理后的清理后 DOM 信息+登录页截图输入多模态AI视觉大模型（如通义千问 VL），通过视觉与语义的协同分析，实现UI元素的精准识别与定位，在一种示例性的实施方案中，具体过程如下：（1）配置AI提示词：为确保AI模型输出符合测试需求的结构化数据，设计系统提示词+用户提示词的双层提示策略。

[0052] 系统提示词："你是一个专业的Web UI自动化测试专家，擅长从HTML源码中提取元素定位信息，返回JSON格式数据，不要输出```json```代码段”。

[0053] 用户提示词："请从图片上提取所有的元素，并分析以下HTML代码，精确识别目标元素并返回定位信息： {html}元素定位要求：1.图片上提取的所有元素（按钮、输入框、链接、开关按钮、下拉框、图标、标签等）；2.对于每个元素，请尽可能提供以下信息，使用有效的元素定位方式：- xpath: 元素的XPath路径（优先）- css: CSS选择器（备选）- id: 元素ID（如果存在）- name: 元素name属性（如果存在）- text: 元素包含的文本（对于按钮等元素）- type: 元素类型（如input, button等）注意：确保xpath / css能够唯一标识元素，每一项元素定位数据不要超过200个字符返回格式要求：返回JSON格式数据，不要输出```json```代码段:"css": "CSS选择器","customname": "元素自定义名称","id": "元素ID","name": "元素name属性","value": "元素值","xpath": "元素XPath路径",#不要使用图片加密链接"href": "链接地址","src": "图片源地址", #不要使用图片加密链接"tag": "HTML标签类型","text": "元素文本内容","type": "元素类型"”（2）AI分析与元素定位生成：将提示词、清理后DOM信息、登录页截图一同输入多模态AI视觉大模型，模型基于截图识别元素的视觉特征，初步分类元素类型，并基于清理后的DOM信息，查找与视觉特征对应的标签，提取该标签的属性；按照提示词要求生成JSON格式的元素定位信息。

[0054] 四、多子页面导航及UI元素提取：嵌入式产品Web页面通常包含登录页-主页-功能子页面的多层级结构，需自动完成页面导航与全量元素提取，避免人工切换页面的低效操作。

[0055] 基于AI提取的登录页元素定位信息，通过Playwright执行自动化操作：输入预配置的用户名和密码，点击登录按钮跳转至Web主页。这里是利用前期提取的登录页元素信息与模板中的登录凭证，实现无感化登录，避免人工输入导致的流程中断。

[0056] 在进入Web主页后，获取主页截图，通过多模态AI视觉大模型识别截图获取导航菜单列表，遍历所有的导航菜单列表，通过调用AI驱动的浏览器自动化测试工具Browser Use去实现浏览器交互操作，自动点击导航菜单，切换Web页面，直至提取到所有导航页面的URL信息。

[0057] AI模型根据所有导航页URL，结合playwright实现获取所有页面的HTML DOM信息，经过HTLM清理后，将DOM信息及截图传递给多模态AI视觉大模型分析页面结构并提取元素定位信息。

[0058] 五、生成可执行的自动化测试脚本：通过GUI可视化界面组织所有页面（包含登录页面、主页和各子页）的UI元素形成操作序列，匹配浏览器操作动作以生成可执行的Web自动化测试脚本，所述GUI可视化界面支持对操作序列的可视化编辑，且生成的Web自动化测试脚本可被Playwright框架解析执行。通过可视化操作降低技术门槛，非专业测试人员也能快速构建测试流程，避免传统方法需手动编写脚本代码的问题。

[0059] 尽管已经描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，均未脱离本发明的保护范围。< / script>

Claims

1. A method for automatically extracting UI elements of a web page based on an AI large model, characterized in that, The method comprises the following steps: interacting with a web page by using a Playwright automation test framework, entering a web login page, and obtaining a screenshot and HTML DOM information of the web login page; intelligently cleaning the HTML DOM information; inputting the cleaned HTML DOM information and the page screenshot into a multimodal AI visual large model to identify interactive UI elements by analyzing the page structure and generate element positioning strategies; based on the element positioning strategies, combining an automation tool to complete navigation between web subpages, collecting subpage data and extracting UI elements of each subpage; organizing UI elements of all pages to form an operation sequence through a GUI visual interface, matching browser operation actions to generate an executable web automation test script.

2. The method for automatically extracting UI elements of a Web page based on an AI large model according to claim 1, wherein, The intelligent cleaning comprises: Tag level cleanup: delete <script>、<style>、<meta>类非UI标签；属性过滤：基于正则模式匹配与白名单保护，过滤无用属性，保留关键属性；空元素递归清理：递归删除无内容空标签，且保留、<hr>类具有语义意义的自闭合标签；注释和空白清理：移除HTML注释、多余空白字符及换行符；格式优化：根据AI分析场景需求，选择采用压缩或美化方式输出清理后的HTML DOM信息。3.如权利要求1所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述可交互UI元素包括：输入框、链接、开关按钮、下拉框、图标及标签。4.如权利要求1所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述生成元素定位策略，包括：按照ID选择器＞name属性＞css选择器＞xpath 选择器＞标签选择器的优先级来生成元素定位策略。5.如权利要求1所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述多模态AI视觉大模型输出结构化JSON数据，包括：UI元素的css选择器、customname自定义名称、id、name 属性、value 值、xpath 路径、href 链接地址、src图片源地址、tag标签类型、text文本内容及type元素类型；且生成的xpath路径和css选择器能唯一标识对应UI元素。6.如权利要求1所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述自动化工具包括：Playwright与AI驱动的Browser Use浏览器自动化测试工具。7.如权利要求1所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述子页面间的导航方式包括：结合Playwright 基于登录页定位信息实现自动登录，进入Web主页后，由多模态AI视觉大模型提取主页导航菜单信息，再通过Browser Use工具实现子页面间的自动切换。8.如权利要求7所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述采集子页面数据并提取出各子页面UI 元素，包括：采集所有子页面的URL和页面截图，根据所有子页面的URL，结合Playwright获取所有子页面的HTML DOM信息，经过智能化清理后，将清理后的HTML DOM信息及页面截图传递给多模态AI视觉大模型分析页面结构并提取元素定位信息。9.如权利要求1-8任意一项所述的一种基于AI大模型自动化提取Web页面UI元素的方法，其特征在于，所述GUI可视化界面支持对操作序列的可视化编辑，且生成的Web自动化测试脚本可被Playwright框架解析执行。< / script>

Images