基于 Playwright Codegen + Skill 进行UI自动化测试的实战方案...

不少测试同学在利用AI进行UI自动化测试的时候，都想要尽可能降低大模型的 Token 消耗，希望能先由人工完成页面操作录制，再交由 AI 基于录制结果生成可执行的自动化脚本。

基于这个需求，我调研了对应的实现思路。Playwright 自带的 codegen 录制工具刚好可以匹配这个场景：先人工操作页面完成流程录制，产出基础录制代码，再结合 AI 对录制代码做优化、补全逻辑，最终得到可以稳定运行的自动化脚本。

因此本文分享一套人工 + AI 结合的落地方案：借助 Playwright codegen 录制能力，并封装对应的 Skill。下面展开讲解完整实现流程。

概念澄清

什么是 playwright codegen？

codegen 是 Playwright内置录制代码生成工具，俗称录制器。用户手动在浏览器操作网页，自动把你的点击、输入、跳转、下拉选择等行为转成 Playwright 可运行代码，不用手写定位器与操作逻辑。

它具备下面的能力：

自动生成健壮定位器：优先 getByRole/getByLabel/getByTestId，尽量少用脆弱的 xpath/css 选择器Playwright

支持录制断言：元素可见、文本校验、输入框值校验Playwright

多语言输出：Python / JS / TS 等

Skill 能力说明

我这边围绕整个流程开发了三个skill：

从录制->生成用例计划->生成代码->执行代码->生成报告->问题修复全流程覆盖。

案例讲解

1、Skill 获取与导入

将相关skill导入到对应工具的skill目录下，如下：

Skill获取方式

绿色泡泡：Raina_0905

2、执行Skill

在对话框调用 playwright-codegen skill，并贴上要测试的系统URL

执行过程

1、会检测 npx 和 playwright 是否有安装

2、启动 playwright codegen

这里如果没有下载 playwright 的话，AI会自主进行下载

3、录制操作

Playwright codegen会启动浏览器

人工对待测试业务功能进行完整操作，建议覆盖每一个需要测试的功能场景。AI 会读取录制过程中的页面元素信息，以此生成稳定性更高的测试用例。

例如，下边我需要对公寓列表里面的功能，进行增删改查的操作

每次执行，它都会记录到 playwright inspector 中

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

录制之后，程序会将刚才的操作的代码，放在 tests/recorded 文件夹

4、生成计划

重新回到 AI 工具对话页面，看 AI 的回复

在对话框中输入：

就会输出一个用例计划

用例计划内容

• 录制的流程梳理

这里梳理了你在录制的过程中操作的步骤
- 页面和 page object 规划

- 数据和造数规划

这里可以看到，公寓名称使用的是随机码，以及手机号也是随机生成11 位合法手机号
- 用例清单

根据用例设计方法，以及你的录制步骤，生成测试用例

这里自行检查一下，如果觉得步骤太少的，则进行对话完善用例

• 待确认项

AI 还会针对不确认的步骤，对你进行咨询，这里我们可以根据它给出的待确认项进行回答

在人工检查步骤都执行结束之后，我们就进入下一步

5、生成代码

AI 对话的输出：

在检查没有问题之后，回复：

生成代码结构如下：

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 原始录制

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

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

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

执行过程：

输出报告

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

点击 trace，查看执行过程

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

7、问题修复（非必选）

这里还提供了一个修复bug的 skill，大家按需使用即可。

如果出现报错，则可以输入你的报错信息，或者 AI 自己读取上下文中报错的信息AI 会先给出建议，然后再由你决定是否修改

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