基于 AI 的前端自动化测试框架工程化实践
概述
本文介绍一个基于 AI 大模型的 UI 自动化测试框架在专有云质量保障中的工程化落地实践。该框架解决了前端测试耗费人力的痛点，通过 AI 能力实现自然语言驱动的自动化测试。
痛点背景
- 前端用例自动化率低：每个版本依赖手工执行，多版本快速迭代背景下导致覆盖不足
- 自动化门槛高、维护成本大：页面更新换代快，一个版本实现的自动化用例在下个版本可能因元素变动无法执行
核心原理
技术栈
| 技术 | 作用 |
|---|---|
| browser-use | 核心 AI 浏览器控制库 |
| Playwright | 前端操作、元素判断 |
| pytest | 用例管理和调度 |
| Allure | 测试报告生成 |
| 大模型（Qwen-max） | 理解自然语言指令 |
架构分层
后端服务层（web server、CICD）
↓
框架管理层（用例管理、调度）
↓
测试用例层（各自动化模块）实现机制
1. 自然语言驱动的测试用例
测试用例采用 YAML 格式，将测试步骤以自然语言方式编写为用例：
yaml
testType: ascm
testName: create_vpc_unique
testId: "74****98"
testDescription: 使用默认参数创建VPC
preSteps:
- common/product/ascm/login.yaml # 前置步骤，公共登录操作
testSteps:
- task: 打开"{{ ASCM_URL }}/vpc/console/vpcPage?{{ DEFAULT_ORG_ID }}"
- task: 点击"创建专有网络"按钮
- task: 在"专有网络名称"输入框输入"{{ VPC_NAME_UNIQUE }}"
- task: 点击"提交"按钮关键设计：
preSteps：引用公共文件，框架递归解析并重放testSteps：大模型直接看到的提示词，是提示词工程（PE）的核心：Jinja2 格式变量，框架根据执行环境替换实际值
2. 动态元素定位
传统方式依赖 XPath/CSS Selector，维护成本高。本框架采用 browser-use 的动态定位方案：
- 抓取页面元素：browser-use 将当前页面元素以文本方式组织，供大模型理解
- 视觉能力辅助：若大模型具备视觉能力，也会将截图一并提供
- 自适应回放：元素信息（xpath、attributes、parent 层级）被保存，回放时若页面变化，会遍历搜索并更新 index
3. 执行回放与自适应更新
两个核心问题：
- Token 消耗：大量用例自动化后，Token 消耗巨大
- 速度问题：大模型决策速度慢，网络交互影响执行速度
解决方案：回放机制
- 大模型决策生成的 action 和参数保存为 JSON 文件
- 测试执行时优先回放 JSON 文件（不调用大模型）
- 若回放失败，再调用大模型执行，并更新 JSON 文件
4. 断言机制
browser-use 以目标为导向，缺少测试所需的关键一环——断言。框架补充了三种断言：
方式一：Playwright 原生断言
yaml
- task: 点击"提交"按钮
expected:
- type: playwright
locator: get_by_text("操作成功", exact=True)
method: to_be_visible()方式二：用例自定义断言
yaml
type: validator
# 由测试用例自己实现 validator 函数方式三：大模型断言（实现中）
yaml
type: ai
# 调用大模型能力，对自然语言解析，结合页面元素和截图判断实施挑战与解决方案
挑战一：大模型幻觉问题
对 action 产生幻觉
大模型规划出的 action 与步骤目的不匹配，特别是在页面异常时。
解决：
- task 拆分：每个 task 完成的任务要简单明确，复杂操作拆分到多个 task
- 最大步骤限制：一个 task 限制在 3 个 action 以内
对 task 目标产生幻觉
task 已完成后，大模型继续产生非预期的 action 调用。
解决：在 task 提示词末尾加上 "... and done"，引导大模型在完成目标后主动结束。
挑战二：browser-use 与测试场景适配
browser-use 是通用工具，不专为测试设计：
- 缺陷修复：框架层面直接派生 browser-use 核心对象进行定制化修改，避免修改源码
- 能力补充：在框架层面补充断言能力、测试调度、报告生成等功能
挑战三：页面元素识别问题
将人眼看到的页面元素转换成 prompt 让大模型理解，存在 gap。
解决：
- 提示词优化：日志中记录大模型真实看到的页面元素布局
- 元素提取范围扩展：通过
include_attributes配置添加特殊属性 - 换个思路：用简单确定的方法组合达成目标
- 兜底方案：支持指定 xpath/css selector 作为最后手段
挑战四：测试稳定性
测试用例编写规范
从项目开始就创建测试用例编写规范文档，包括：
- 用例通用规则
- 变量替换使用场景
- 常用 task 提示词和 action 对应关系
- 常见问题及修改方案
模型稳定性
- 模型选型（qwen 系列）
- 参数调整（top_p/temperature/seed）
- 后续计划使用模型训练和微调
环境健康检查
测试执行前检查环境的健康状态及具备的 feature，决定调度的用例是否能执行。
使用大模型但不依赖大模型
对于前置步骤、依赖等没有必要靠大模型逐步操作完成，可以直接使用更快速稳定的后端 API。
总结
该框架通过将自然语言转换为提示词工程（PE），结合 browser-use + Playwright + pytest + Allure 的技术栈，以及增量回放和自适应更新机制，实现了低门槛、高稳定性的 AI UI 自动化测试。