夜雨聆风🔁 回归测试靠手工点——版本一迭代，半天耗在重复操作上 🐛 Bug 复现靠描述——"我点了一下白屏了"，开发复现不了 📸 缺少证据——出问题只能手机拍屏幕，日志全丢 😰 想写自动化但不熟 Playwright——选择器、等待、断言一头雾水
WebApp Testing Skill + TRAE IDE 就是来解决这个问题的：
你用自然语言说"测什么"，AI 按测试规范生成 Playwright 脚本、真实跑浏览器、自动截图留证。
二、WebApp Testing Skill 是什么？
webapp-testing 是一个 封装了 Playwright 前端测试经验的 Skill 文件（SKILL.md），可以理解为：
"给 AI 看的测试工程师工作手册"
它告诉 AI：
✅ 怎么导航、点击、填表、等待元素 ✅ 怎么断言页面文本 / URL / 元素可见性 ✅ 失败必须截图 + 捕获 console 日志 ✅ 推荐用 data-testid 或 Role 选择器，不用脆弱的 CSS 类
核心能力一览：
能力 说明
浏览器自动化 模拟真实用户操作
功能验证 文本、URL、元素存在性断言
截图取证 每步截图 / 失败自动截图
浏览器日志 监听 console.error 辅助定位
响应式检查 多视口尺寸切换
三、TRAE IDE 在这里扮演什么角色？
https://www.trae.com.cn/（腾讯/字节系 AI 原生 IDE）负责：
理解你的自然语言 → "测登录 → 新增用户 → 删除" 匹配并加载 WebApp Testing Skill 生成 Playwright 脚本（Node.js） 在本地浏览器中执行，并返回结果 + 截图 + 日志
关系图如下：
你（说需求）
↓
TRAE IDE（理解 + 调度）
↓
WebApp Testing Skill（规范测试行为）
↓
Playwright（真实操控浏览器）
↓
结果 / 截图 / 日志 返回给你
四、Step by Step：导入 WebApp Testing Skill
webapp-testing 可以从下面的"AI智能测试技能库"中获取
skill已经全部归档在 "AI智能测试技能库"
② 将下载的skill导入到 TRAE IDE
打开 TRAE IDE 右上角 ⚙️ → 规则与技能（Rules & Skills） 切到 技能（Skills） → 点击 ＋创建 将"webapp-testing"打包成.zip 上传文件(文件夹是含SKILL.md的 ZIP） 
确认解析成功后，开启开关 ✅
💡 项目级 Skill → 仅当前仓库生效
💡 全局级 Skill → 所有项目可用
五、实战演示：用户管理 CRUD 测试
🎯 测试目标
比如：打开被测系统后台用户管理页 → 新增测试记录 → 编辑名称 → 删除 → 每步截图，失败留证
💬 你只需在 TRAE 对话框输入：
用 webapp-testing 技能，打开 http://localhost:3000/admin/users
新增一条用户记录（用户名 test_qa_01，邮箱 test@qa.com）
编辑用户名为 test_qa_updated，再删除该用户
每步截图保存，若任一步失败请截图并输出浏览器 console 错误
🤖 TRAE + Skill 会做什么？
AI 按 Skill 规范生成类似脚本并执行：
// 1. 打开用户列表
await page.goto("http://localhost:3000/admin/users");
await page.screenshot({ path: "01-list.png" });
// 2. 新增
await page.click("#btn-add-user");
await page.fill("#input-name", "test_qa_01");
await page.fill("#input-email", "test@qa.com");
await page.click("#btn-save");
await page.waitForSelector(".ant-message-success");
await page.screenshot({ path: "02-added.png" });
// 3. 编辑
await page.click("text=test_qa_01");
await page.fill("#input-name", "test_qa_updated");
await page.click("#btn-save");
await page.screenshot({ path: "03-edited.png" });
// 4. 删除
await page.click("text=test_qa_updated");
await page.click("#btn-delete");
await page.click("text=确定");
await page.screenshot({ path: "04-deleted.png" });
执行完毕后 TRAE 对话框反馈：
✅ 打开用户管理页
✅ 新增用户成功
✅ 编辑用户成功
✅ 删除用户成功
📸 截图已保存至项目目录
若某步失败（如按钮未渲染）：
❌ 新增用户失败
📸 已保存 fail-add.png
Browser ERROR: Network request failed (422)
你可直接把 截图 + 日志 + 复现步骤 贴进缺陷单。
[示意：TRAE 对话框执行测试并返回结果 —— 替换为你的截图]
[配图2-对话框执行结果]
六、还能测什么？
除登录/注册外，这套方式适用于：
📋 CRUD 模块（商品、订单、权限、配置） 🔍 搜索 / 筛选 / 分页组合 📁 文件上传格式 & 大小限制 🪟 弹窗、Toast、二次确认 📱 响应式 H5 页面检查 🐞 缺陷复现（按开发给步骤跑一遍）
七、小结
WebApp Testing Skill = 测试规范与 Playwright 用法封装
TRAE IDE = 听懂需求 → 生成脚本 → 跑浏览器 → 给证据
两者配合后，测试工程师可以：
✅ 不用精通 Playwright 也能做前端自动化 ✅ 回归测试一句话触发 ✅ Bug 有截图 + 日志，沟通不再扯皮 ✅ 测试脚本可沉淀、可复用
📌 下一步建议
把 Skill 按你们公司规范微调（命名规则、截图目录） 让团队统一导入，保证 AI 输出风格一致 逐步把核心业务流程写成 Prompt 模板
如有问题欢迎交流，转载请注明出处。以上WebApp Testing Skill已经整理在我维护的知识星球。
AI智能测试技能，覆盖Playwright、Pytest、JUnit、API安全等11个分类，从单元测试到E2E全链路覆盖
【AI 测试 Skill 入门篇】01 | 环境搭建：Node.js + Playwright + Trae CN 全指南
