【Skill 创作】从测试用例到可执行脚本:Playwright 自动化用例生成器

1、Skill简介
这是一个将结构化测试用例(Steps + Expected Result)自动转化为可执行 Playwright 脚本(*.spec.ts)的 Skill。根据 @web / @Server / @API 三种脚本类型,参考项目现有代码风格,生成符合规范的测试脚本,并自动完成 Step 对齐自检,确保用例覆盖无遗漏。

适合使用 Playwright 做端到端测试、期望从手工用例快速生成自动化脚本的 QA 团队。

2、使用场景
你为什么想做它?
手工将测试用例转化为 Playwright 脚本是重复性极高的工作——每个用例都要配对动作、编写断言、处理等待,一个一个写既慢又容易出错。

之前遇到了什么麻烦?

逐条对照用例写脚本效率低,平均一个复杂用例要花 15-20 分钟
生成的脚本风格与项目既有代码不一致,PR Review 要反复改
写完容易漏断言,或者断言 message 不规范,后续排障困难
没有自动校验,不知道生成的脚本是否真的覆盖了用例的每一步
做出来之后能省掉哪些动作?

原来 15-20 分钟的手工转化,现在 1-2 分钟出初稿
脚本风格与项目完全一致,不需要反复返工
自动完成 Step 对齐检查,漏哪个断言一目了然
直接复用现有 POM 方法,不用重复造轮子
3、创作过程
核心思路:以参考脚本为中心生成

传统生成方式容易"跑偏",因为 AI 不了解项目具体约定。本 Skill 的关键设计是——始终以项目中真实存在的参考脚本为模板,复用其:

test.describe tag 组合
beforeEach/afterEach 登录与清理模式
POM 对象命名、方法命名、等待策略、断言 message 规范
这样生成的脚本,团队任何人都能直接看懂、接手和维护。

生成流程(6 步):

Step 0:分类落点 → 识别用例类型(@web/@Server/@API),确定目标目录
Step 1:参考脚本检索 → 找同页面/同模块/同动作的既有脚本作为模板
Step 2:动作-断言配对 → 每条用例 Step 转成"动作块+断言块"
Step 3:POM 增量 → 缺失方法补到 POM,spec 只调用不写业务逻辑
Step 4:模板对齐 → 文件头注释、timeout、try/catch 风格与项目一致
Step 5:可执行性检查 → 去除 test.only/skip/被注释断言等"屏蔽代码"
Step 6:自检闭环 → 调用 testcase-step-alignment 逐条验证,迭代到全部通过
关键提示词结构:

请一次性提供:

  • 测试用例:编号/名称、Precondition、Steps + Expected Result、测试数据
  • 运行环境:脚本类型(@web/@Server/@API)、语言环境
  • 参考脚本:至少 1 个同模块的 *.spec.ts + 涉及的 POM/Helper

输出要求:

  1. 新生成的 *.spec.ts(可执行)
  2. 必要的 POM/Helper 最小增量改动
  3. Step 对齐自检报告(调用 testcase-step-alignment)
    4、使用步骤
    准备材料:测试用例(Steps + Expected)+ 参考脚本路径 + 运行环境说明
    调用 Skill:触发 testcase-script-generator
    输入信息:一次性提供用例和脚本信息
    获取产物:等待输出 spec 文件 + POM 改动 + 自检报告
    查看自检结果:如果有不通过项,Skill 会自动迭代修复,直到 Step 全部对齐
    5、效果展示
    输入示例:

用例编号:T1230
用例名称:创建订单并验证列表显示

Precondition:已登录系统,拥有创建订单权限

Steps + Expected:
Step 1: 进入订单管理页面
Step 2: 点击"新建订单"按钮
Step 3: 填写订单信息(客户、产品、数量)
Step 4: 点击"保存"按钮
Step 5: 验证成功 toast 出现
Step 6: 验证订单出现在列表中,状态为"待审核"

运行环境:@web
参考脚本:tests/gui/order/create-order.spec.ts
输出示例:

[已生成] tests/gui/order/T1230_create_order.spec.ts
[已更新] pages/OrderPage.ts (新增方法: waitForOrderInList, clickNewOrder)

Step 对齐自检报告:

Step 结论 问题点
Step 1 通过 -
Step 2 通过 -
Step 3 通过 -
Step 4 通过 -
Step 5 通过 waitForSuccessToast() 验证
Step 6 通过 waitForOrderInList() + expect 状态

[Blocker: 0] [Major: 0] [Minor: 0]
:white_check_mark: Step 对齐全部通过
6、Skill 链接
(请在此处填入你的 Skill 分享链接)

GitHub:https://github.com/ccbhwy/playwright-testcase-generator

7、总结与思考
这个 Skill 目前最满意的地方:
"参考脚本优先"策略真正解决了生成脚本"风格不统一"的痛点——生成即符合项目规范,不需要二次返工。加上自检闭环,生成质量有保证,QA 可以真正专注于用例设计本身。

后续还想怎么优化:

支持批量用例一次性生成,输出完整模块的测试套件
增加与测试管理平台的集成,自动同步用例列表
支持自然语言描述直接生成,减少用例结构化成本
希望别人怎么体验或给你什么建议:
如果你有真实的测试用例和参考脚本,欢迎试用。对齐结果是否符合预期?有没有漏掉的业务场景?期待反馈。

4 个赞

不错,很有想法

3 个赞

有没有演示图

6 个赞

感谢关注与支持!演示图已经附上啦,如果觉得还不错,还请帮我投上宝贵的一票,非常感谢!

6 个赞

按技能生成后脚本

生成后利用技能Review该用例是否正确。<画红线是技能名> Review技能后续奉上

Review结果

6 个赞


投票了,顺便问一下,看起来是生成用例 那和 playwright 啥关系,也能调动 mcp吗,我对这个东西的印象 一个是自动化框架 一个是 mcp, 奥可能这里是那个自动化框架,俺是菜鸟,了解不多,

5 个赞

感谢投票支持~其实你的直觉很敏锐,提到的概念都对,那么我来帮你简单梳理一下这三者(生成技能、Playwright、MCP)的关系:

  1. 这个技能到底在“生成”什么? 这里说的不是生成普通的 Excel 或 Word 测试用例文档,而是根据人类写的测试用例步骤,直接生成自动化测试脚本(代码)。
    比如你喂给 AI 一段话:“第一步:点击登录,预期:跳转到首页”。这个技能就会自动去项目里找对应的页面元素,帮你写出规范的自动化测试代码。

  2. 它和 Playwright 是什么关系? Playwright 就是你印象中的那个“UI自动化测试框架”(微软开源的,用来操控浏览器)。
    我分享的这两个技能(一个是生成脚本,一个是检查脚本),本质上是给 AI 设定了一个“资深 Playwright 测试开发专家” 的人设。它们非常懂 Playwright 的最佳实践(比如怎么写断言最稳定、怎么避免硬等 waitForTimeout ),专门用来 编写和 Review Playwright 代码。确保写出来的代码符合项目规范(比如 POM 模式)。

  3. 和 MCP 有什么关系? MCP 是一种让 AI 能连接外部工具的“协议”(相当于给 AI 装上手和眼睛)。

  • 我分享的技能: 主要是运行在 IDE(如 Trae)里的 AI 规则(Prompt),它通过 IDE 自带的能力(读取你的代码库、测试用例文档)来思考并写出代码。
  • Playwright MCP: Playwright 确实也有对应的 MCP 工具。如果配置了 Playwright MCP,AI 甚至可以真的调起一个浏览器,一边在网页上“点点点”,一边看着页面的真实结构把脚本写出来。
    简单总结就是: 我分享的这个东西,是教 AI 如何写出高质量 Playwright 自动化代码的规则说明书 。你给它文字步骤,它吐出高质量的 Playwright 脚本,并且还能帮你检查别人写的脚本对不对。

这个技能还在工作的中不断实践和完善

6 个赞

有一说一没看懂,

5 个赞