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

不少测试同学有这样的想法：&#x20;

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

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

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

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

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

二、我的方案：Playwright codegen + Skills

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

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

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

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

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

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

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

3.  多语言输出 ：Python / JS / TS 等，按团队栈选择即可。

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

&#x20;text
录制 → 生成用例计划 → 生成代码 → 执行代码 → 生成报告 → 问题修复

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

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

人工在页面进行操作相关流程，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 原始录制

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

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

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

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

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

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

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

测试

人工智能

开发工具

基于Playwright codegen录制器与AI Skill结合，提出人工录制+AI优化的UI自动化方案。通过人工操作生成基础代码，AI补全断言和异常分支，有效降低Token消耗和试错成本，提升元素定位稳定性，产出可重复执行的回归测试脚本。

代码生成工具

回归测试

Python

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐