基于 Playwright codegen + Skills 实现 UI 自动化实战｜人工录制省 Token，AI 补全脚本

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

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

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

这样业务路径掌握在人手里，不会跑偏；同时大模型也不需要从零去解析、试探页面，Token 开销和试错成本都能降下来。

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

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

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

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

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

二、我的方案：Playwright codegen + Skills

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

大体流程：

plain 复制代码

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

三、先搞清：什么是 Playwright codegen？

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

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

它本身具备这些能力：

自动生成健壮定位器 ：优先 getByRole / getByLabel / getByTestId，尽量少用脆弱的 xpath / css；
支持录制断言：元素可见、文本校验、输入框值校验等；
多语言输出：Python / JS / TS 等，按团队栈选择即可。

四、Skill 能力说明

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

plain 复制代码

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

Skill获取方式见文末

五、实践案例

1、Skill 导入

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

2、调用录制 Skill

输入：

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

执行过程：

Skill 检查环境并启动 codegen；

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

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

输出：

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

一份可本地复跑的 Playwright 脚本

python 复制代码

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