2025QECon全球软件质量效能大会：基于LLM和数据驱动的WEB UI自动化实践

基于LLM和数据驱动的WEB

UI自动化实践傅景良&程天阳｜腾讯高级测试开发工程师北京科技大学硕士毕业，曾就职于Oracle、EMC，从事测试开发和质量保障工作。2015年加入腾讯广告

，主要负责腾讯广告工程效能和自动化测试体系相关建设，曾打造围绕主干开发模式相关的git客户端辅助工具、持续交付系统、

DIFF回归工具、

ECPM还原和校验、大数据统一对账工具等重要系统，目前专注于建设AI辅助WebUI自动化回归测试建设，以及AI在测试领域的探索与应用。傅景良腾讯高级测试开发工程师目录CONTENTS02

基于混元大模型的用例生成与执行03

基于用户操作录制的用例进化01

WebUI自动化的现状与痛点04

总结与展望PART

01WebUI自动化的现状与痛点

一个成功挽救线上事故的案例某天晚上，测试同学收到自动化测试平台告警，当天运行的AI自动化测试的结果中，广告创意创编页面有一个异常的白屏报错千亿广告系统可靠性保障——质量与效率的平衡挑战 WebUI自动化面临主要痛点理想是高可用、低维护，现实却是高成本、低效率。元素定位不稳定通过xpath、坐标、动态的ID或class等来实现的元素定位方式，稳定性相对较差，很容易受到非功能变化的影响而大面积失败环境依赖强、执行效率对

试环境要求高，执行速度慢，问题排查难度大，进一步影响了自动化的信心和推广用例编写维护成本高传统WebUI自动化测试脚本维护高度依赖人工干预，模块化设计不理想时，页面变更都需要大量调整脚本核心痛点问题解决方案描述1.

脚本编写与维护成本高PageObject

Model

(页面对象模型，简称POM)模块化设计模式通过将页面操作、组件逻辑与业务流程分离，采用模块化设计来提升代码复用率。基础操作（如元素查找、截图）封装在Base层，通用控件（如表格、日期选择器）抽象在Component层。数据驱动测试将测试用例与数据分离，减少因数据变化导致的脚本修改，降低维护复杂度。2.

元素定位稳定性不足复合定位策略采用"CSS选择器+属性过滤+相对定位"的组合策略，例如

使用input[data-testid='search']:nth-child(2)，相较于传统的XPath定位，稳定性显著提升，尽管此方法只能部分缓

解问题。元素指纹技术通过计算元素的特征哈希值（包括父节点路径、文本内容、相邻元素属性），生成唯一标识码，即使DOM结构发生变化，也能准确定位目标元素，但是这个方法复杂度较高。脚本维护仍然依赖人工采用模块化设计和数据驱动，页面结构或业务流程发生较大变动时，需投入较多精力深入分析和调整脚本元素定位仍然易受前端变更影响面对频繁的UI重构、动态渲染或

A/B测试等场景，定位策略仍可能

失效

传统工程化解决方案0201方法范围思路是否训练LLM自动化（腾讯会议）APP&桌面客户端

UI分析UI控件树，并将可操作控件输入给模型进行决策。是UAT（微信支付）APP

UI模型根据UI控件树决策当前操作与总体进度，执行成功后得到UI自动化

用例。是AppAgent（PCG）APP

UI通过控件树信息来标注页面截图，增强页面感知。否MobileAgent（阿里）APP

UI纯视觉方案，使用目标检测模型标注页面元素，增强页面感知，引入多

Agent进行规划、决策、反思。否MidScene（字节）桌面浏览器结合DOM树结构与视觉信息，解析自然语言指令否AUITestAgent（美团）APP

UI基于控件树标注页面截图，并通过Agent完成自动化交互到检查整个过

程。否Browser

Use桌面浏览器基于HTML来理解页面，支持LLM与VLM。自动进行任务拆分、结果反

思。否Playwright

MCP桌面浏览器通过MCP协议将

Playwright浏览器自动化能力封装成标准化工具接口，让模型能够通过结构化的消息调用浏览器操作。否 LLM创新解决方案LLM创新方案的局限性复杂页面准确率不足当前复杂业务场景下自动化测试准确率普遍不足75%，难以满足高质量需求外部模型数据合规风险外部模型引入存在数据合规风险，可能引发企业信息安全问题WebUI测试断言不仅需校验页面元素，还要精准验证业务流程和数据一致性。AIGC断言生成能力有限，人工编写效率低下。断言生成能力有限PART

02基于混元大模型的用例生成与执行

技术方案选型纯文本模型（

LLM）方案VS多模态模型（VLM）方案

✅纯文本模型（LLM）方案原理：基于DOM/可访问性树的推理优点：1.

文本理解深入，可以进行复杂的语言理解、推理、生成任务2.

数据标注与训练成本低3.

输入token

少缺点：1.

缺少视觉上下文理解，

UI变化适应度差、复杂场景难以处理2.

依赖良好的HTML结构典型工作：Playwright

MCP快照模式多模态模型（

VLM）方案原理：融合视觉和文本的推理优点：1.

视觉上下文理解，更好适应

UI变化，并且可以识别视觉上的异常2.

上限高，更符合实际使用场景缺点：1.

数据标注与训练成本高2.

需要额外进行视觉定位3.

输入token

多典型工作：

browser-use整体架构设计

感知引擎

-网页结构与状态理解要素二：文本与层次信息补充要素一：可操作元素获取与截图增强1.判断可交互：ARIA角色+事件

+tabindex

+

标签类型

+xpath/CSS定位2.判断可操作：disabled

+readonly

+CSS

+父级状态

+is_display1.

文本获取l

可见文本：innerTextl

重要属性：title、aria-lablel、alt、placeholderl

输入框内容：valuel

隐藏文本和附近文本2.

角色获取：ARIArole+computedRole+标签名3.

层级关系获取：xpath判断选中状态：checked、selected、aria-selected、CSSactive等要素三：元素状态获取观察：“

当前已经选中了多个投放渠道，包括「微信视频号」（已选择）、「微信公众号与小程序」（已选择）和「腾讯平台与内容媒体」（已选择）

”思考：

观察当前页面状态，我可以看到「腾讯平台与内容媒体」的复选框已经处于选中状态。这意味着该版位已经被选择，符合了当前任务的要求。

当前任务目标已经实现，不需要进行任何点击或选择操作。操作：stop()

决策引擎

-任务规划和操作推理任务：选中腾讯平台与内容媒体版位

训练方案

-Teacher-Student迭代式工作流Teacher

AI监督微调混元：

提示词生成

→教师响应→学生微调→模型评估提示词（prompt模版）你是一个UI交互数据生成专家，负责为UI操作Agent生成高质量的训练数据。请根据以下场景信息，生成符合要求的训练样本:###输入信息###-**任务描述**：<task_description>-准备执行的操作(**务必不要在输出中透露**):

<current_operation>###截图说明###为了让你更好感知页面的内容,网页上可以交互的UI元素已经用标号与红框标记，每个可交互元素的标号都位于元素的中心，元素的其他信息如下:```<accessible_names>```<history_prompt>###总体进度###你对当前总体进度的把握为:<completed_contents>###输出要求###生成一个标准JSON格式的输出，包含以下字段:1."Observation":xxx2."Thought":

xxx3.

###重要提示###xxx###示例输出###```json{"Observation":"页面显示广告投放管理界面，当前正在进行「版位选择」设置。页面左侧是版位选择区域，已选择了「选择特定版位」模式（而非「自动版位」）。当前已选中的版位包括「腾讯平台与内容媒体」和「优量汇」，xxx", 训练流程

-step

1

：提示词生成和页面快照历史操作：已成功点击标号为10的元素，选择了微信小程序作为推广产品。当前操作：(click,11)点击推广产品中“微信小程序”，然后点击“请输入推广的小程序原始ID”，列表框随便选择，优先点击“唯品会特卖”任务要求操作记录页面信息页面截图任务描述：点击推广产品中“微信小程序”，然后点击“请输入推广的小程序原始ID”，列表框随便选择，优先点击“唯品会特卖”页面状态：{"accessible_names":{"1":

"引用已有广告",

"2":

"营销目的_商品销售","3":

"营销目的_品牌宣传","4":

"营销目的_加粉互动","5":

"营销目的_线索留资",

"6":

"营销目的_用户增长","7":

"推广产品_Android应用","8":

"推广产品_iOS应用","9":

"推广产品_快应用","10":

"推广产品_微信小程序","11":

"请输入推广的小程序原始ID"...}总体进度：已成功点击标号为10的元素，选择了微信小程序作为推广产品。准备执行的操作：点击标号为11的元素，打开小程序ID选择列表。

训练流程

-step2：Teacher模型生成响应输入其他要求：-你的分析过程应该呈现为"思考并推导出最佳操作"，而不是已知正确答案-一定不要在输出中直接引用或透露"准备执行的操作"信息-分析应该展现为通过观察页面、理解任务和评估可能选项后得出的结论-确保JSON格式严格正确，可被程序直接解析-输出中不要带具体的标号-输出尽可能精简,遵循书面化表达思考：对操作的完整分析过程，应包括:-基于任务目标和当前状态，分析应该执行什么操作-任务可能包含一个或多个操作，当前执行其中的一步操作-评估各个可交互元素与当前任务步骤的相关性-逻辑推导为什么某个特定操作最适合当前情况-对目标元素当前状态的评估，如已满足任务要求则解释为何无需操作-输出中不要带具体的标号观察：对页面的详细观察，应重点关注:-页面当前状态与布局-与任务相关的UI元素及其状态-任务的未完成部分-页面上可用交互选项-输出中不要带具体的标号生成要求输出{"question":"你是一名网页操作agent,你对网页的操作非常熟悉.###任务背景###-输入的图片是图一IMAGE#1_test_case_10_1_1_labeled.png-**任务描述**：关闭高价值人群探索开关,然后出价设置为4.12###截图说明###为了让你更好感知页面的内容,网页上可以交互的UI元素已经用从1到22的标号与红框标记...

(省略）

```###输出要求###你需要结合所有上述的信息来决策下一步需要对页面做什么操作,你需要从下面几个动作中选择一个

来执行

(省略）```###输出格式###你需要保证输出内容为标准json对象,无需对输出内容进行解释与描述...（省略）

",

"answer":"{\"Observation\":\"页面显示广告投放管理界面，分为「出价与预算」和「广告设置」两大部分。在「出价与预算」部分，可以看到当前出价输入框，显示为空白状态，需要输入价格。高价值人群探索开关已经处于关闭状态。页面还展示了广告日预算设置（已选择「不限」选项）

...（省略）",\"Action\":\"text(3,\\\"4.12\\\")\"}","img_path":"/cfs_hunyuanaide/49423/img.tar/img/1_test_case_10_1_1_labeled.png","type"

"multimodal"}: 训练流程

-step

3：Student微调底座模型：Hunyuan-7B-MoE（A13B）：

每个token激活的参数为

130亿，每个专家包含70亿参数，模型总参数量为800亿模型是否训练剧本准确率任务准确率步骤准确率GPT-4o否71.79%95.62%98.37%Claude-4-Sonnet否76.92%96.41%98.66%Gemini-2.5-pro否76.92%96.41%98.66%Hunyuan-Turbo-Vision否53.85%91.24%96.43%Qwen2.5-VL-32B-Instruct否64.10%92.8%97.19%Hunyuan-7B-MoE

（实际使用）是94.87%99.20%99.70%Qwen2.5-VL-32B-Instruct是87.18%98.01%99.26%剧本级业务流程完整性检验基于完整业务场景的测试数据，计算从用户触

发操作到系统反馈结果的端到端成功率，直观

反映模型在实际环境中的表现。

训练流程

-step4：模型评估步骤级操作准确性验证通过逐项核对自动化脚本执行的关键操作步骤，确保每个操作符合预期结果，避免因细微偏差

导致测试失效。任务级端到端成功率统计重点关注跨步骤的业务流程是否连贯执行，

验证从起始操作到最终结果的完整链路是否畅通无阻。问题三：超出模型能力范围问题：实际业务系统中，存在各种不可预测的干扰项，如非预期弹框、登录请求以及搜索结果的随机顺序等，都会影响Agent的正常操作；除此之外，对于一些复杂的组件，模型处理起来准确率非常低解法：使用人工规则问题二：模型遗忘导致跳步骤问题：对于复杂步骤操作，模型可能会遗忘历史操作导致执行出错示例：在创建创意时，需要选择一个16：9的视频和一张9：16的图片，而这对应的实际操作共有12步：点击筛选按钮、点击类型和尺寸、类型选择视频、尺寸选择16：9、应用筛选、选择16：9视频、再次重复前面步骤以选择9：16图片解法：限制单个任务步骤数，例如将以上拆分为两个任务；增强cot，模型在思考的时候输出中间过程问题一：页面初始状态变化引发的剧本失效问题：随着业务的频繁迭代，仍会出现部分状态变化导致剧本失效，剧本失效后模型就容易误操作。例如下图中默认勾选的版位可能发生改变解法：通过感知增强与思考来让模型去自行处

理

工程落地——典型问题和解法核心理念：以线上稳定版本为黄金标准，基于DIFF思想，自动创建能够精准验证系统功能正确性及用户体验一致性的断言。校验内容：1.

UI交互校验：涵盖元素的存在性、可用性及属性值等断言，结合规则引擎与DeepSeek文本模型进行检查，提升校验的稳定性和准确性；2.API参数校验

：针对前端请求字段进行正确性检查；3.

DB字段校验

：对数据库中的相关字段进行核查，保证数据落库的准确性。

校验引擎

-智能断言生成与执行典型Case

：因前后端接口不兼容更新，推广应用选择“唯品会”后，js报错导致未选中，页面显示undefined

演示WebAgent全流程-混元训练-5x.mp4PART

03基于用户操作录制的用例进化效率依然存在较大提升空间虽然借助大模型，我们已经可以不再维护繁琐的测试脚本，而是通过维护语义化的剧本，基于这些剧本自动生成测试脚本，但是长期来看仍然需要人工来编写剧本难以覆盖丰富的用户场景广告业务场景复杂多样，要求测试能覆盖所有关键路径和异常情况，人工编写剧本难以持续更新维护。 AI

+录制融合

-实现用例持续进化记录元素名称、角色，以及元素的层级关系结构，

包括父子节点关联和嵌套逻辑，帮助模型精准定位目标组件。记录组件状态属性通过完整记录用户在页面上的访问路径，确保测试脚本能够覆盖所有关键操作流程记录元素语义化信息和层级关系

数据基础

-用户操作日志协议设计记录元素的状态属性变化（如禁用状态等）

，页面初始状态选择变化时录制依然有效；另外模型在操作时可根据元素状态判断是否操作成功。010203记录操作路径信息基于可访问性树归一化在事件冒泡到document时，获取整个event中整条链路上的nodeList树，判断是否有属于可访问树的节点，如果存在证明这次时间来源于有效操作，通过提取文本的算法获取文本，可以把零散的事件上报归一化处理。增强定位唯一性结合其上下文信息来构建一个唯一的“指纹”。我们上报提取到的文本的同时上报上游节点的3个层级的xpath，来增强节点定位的唯一性。如果模型通过文本无法唯一定位节点，通过提交xpath给模型做参考尝试再次定位