Playwright codegen+Skills：人工录制 + AI 做 UI 自动化的方案

本文来源： Rainadai（公众号：Rainadai）
原文链接： https://mp.weixin.qq.com/s/qcJJp4hEGnlyTj3x2TyviA
发布时间： 2026-09-02 07:57

作者： Rainadai　　发布时间： 2026-09-02 07:57

用 AI 做 UI 自动化，大家关心的不只是脚本能否跑通、是否稳定，还有一个更实际的痛点：会不会太耗 Token、成本太高、试错太多。

不少测试同学有这样的想法：

系统页面本身已经存在，业务流程也跑通了，能不能由人先把标准操作录一遍，再把录制出来的结果交给 AI 去加工。让 AI 去优化代码、补全断言、补充异常分支，输出一份可以稳定反复执行的脚本？

基于这个需求，我去查了相关的方案，发现Playwright 自带的 codegen 录制器刚好可以适配这种思路：先人工操作页面完成流程录制，产出基础录制代码，再结合 AI 对录制代码做优化、补全逻辑，最终得到可以稳定运行的自动化脚本。

因此我基于这套能力，把整条自动化链路封装成了配套 Skill，今天给大家分享下思路。

一、全 AI 自动化的一些弊端

如果完全把页面探索、定位、脚本编写都甩给大模型，常见会碰到这些痛点：

Token 消耗高：大模型需要反复打开页面、抓取页面快照、尝试各类操作，单轮执行下来调用成本会很可观。
执行路径不可控：同样的业务描述，每次运行模型走的操作步骤可能不一样，流程飘忽不定，测试人员很难验收、复现问题。
元素定位稳定性差：模型临时生成的选择器，当下运行正常，只要页面做小幅 UI 调整，脚本就直接报错挂掉。

二、我的方案：Playwright codegen + Skills

针对上面的痛点，我采取的思路是：先用 codegen 人工录制业务流程，再交由 Skill 完成用例规划、代码生成、执行跑测、输出报告以及问题修复。

大体流程：

人工操作页面（codegen 录制）
        ↓
产出基础录制代码 / 操作轨迹
        ↓
AI 生成用例计划 → 优化并生成可执行脚本
        ↓
执行脚本 → 生成报告 → 失败则问题修复后重跑

三、什么是 Playwright codegen？

codegen 是 Playwright 内置的录制代码生成工具，俗称录制器。

你在浏览器里手动点页面——点击、输入、跳转、下拉选择——它会实时把这些行为转成 可运行的 Playwright 代码，不用自己手写定位器和操作逻辑。

四、Skill 能力说明

我这边围绕整条链路封装了 三个 Skill，覆盖下面流程：

录制 → 生成用例计划 → 生成代码 → 执行代码 → 生成报告 → 问题修复

Skill获取方式见文末

五、实践案例

1、Skill 导入

把相关 Skill 导入到你使用的 AI 工具（Cursor / Claude Code 等）的 skills 目录下即可。

2、调用录制 Skill

输入：

调用 playwright-codegen Skill + 后台登录页 URL

执行过程：

Skill 检查环境并启动 codegen；

人工在页面进行操作相关流程，AI 会读取录制过程中的页面元素信息，以此生成稳定性更高的测试用例。

录制结束之后，点击终止按钮

输出：

一份可读的用例计划（步骤 + 预期）；

一份可本地复跑的 Playwright 脚本

tests/
├── conftest.py                          # pytest 公共 fixture / Trace 挂报告
├── specs/                               # 用例层（一功能模块一文件）
│   ├── test_login.py                    # TestLogin（TC-001～004）
│   └── test_apartment_management.py     # TestApartmentManagement（TC-005～015）
├── pages/                               # 页面对象
│   ├── login_page.py
│   └── apartment_management_page.py
├── data/                                # 测试数据工厂
│   └── apartment_factory.py
├── helpers/                             # 通用工具
│   ├── captcha.py
│   └── trace_support.py
├── fixtures/
│   └── auth.json                        # 登录态 storage state
│
├── plans/
│   └── login-test-plan.md               # 用例计划
│
└── recorded/
    └── login.py                         # codegen 原始录制

3、AI 执行脚本&输出报告

代码生成完成后，我没有交由 AI 直接自动运行脚本，而是拆分出独立的 Skill 来负责执行用例并输出测试报告。避免单个 Skill 承担过多职责，防止功能过载导致整体执行效果变差。

在对话框调用执行代码的Skill：

执行过程：

输出报告

这里参考 Playwright Test 的报告格式，输出 HTML 报告。

可以看到每一步的执行流程，我们就可以预览一下 AI 执行的对不对

六、小结

除了今天给大家分享的这套人工 + AI 结合的落地方案，我之前也分享过纯全 AI 自动化的实现思路，可以适配不同人群的使用诉求。如果项目对 Token 成本不敏感，想体验完全由 AI 驱动自动化，大家可以去翻看我之前的文章。

不过还是要再强调：Playwright codegen + Skills 这套方案，我更建议优先用在回归测试场景。它有一个硬性前提：被测页面功能必须开发完成，流程能够完整跑通。所以它的核心定位，是用来沉淀回归自动化资产，并不适合还在频繁改动的功能迭代前期做场景探索。

以上是今天分享的内容，完整教程、相关Skill包、更多UI自动化方案等都已更新在【Raina的AI&测试实战圈】知识星球，跟着步骤操作就可以上手，学习过程中都可以进行提问，Raina都会进行解答。我这边也会持续优化UI自动化方案，让大家都能落地到自己的项目上，大家有好的建议欢迎提出来，一起学习、进步~