第 18 期 | 基于终端的自动化 UI Testing
🎯 学习目标
学完本期你将掌握：
- 如何让 Claude Code 驱动 Playwright / Cypress 进行自动化 UI 测试
- PM / QA 如何用自然语言描述测试用例让 Agent 执行
- 视觉回归测试的实战方法
- 从测试结果到 Bug 报告的自动化闭环
📖 核心概念讲解
18.1 为什么 PM / QA 需要关注自动化测试？
传统 QA 流程:
PM 写验收标准 → QA 手动点击 → 截图记录 →
发现 Bug → 写 Bug 报告 → 等开发修复
每轮耗时: 2-4 小时
Claude Code 辅助流程:
PM 描述用户故事 → Claude 生成测试脚本 →
自动执行 → 自动截图对比 → 自动生成报告
每轮耗时: 5-10 分钟
PM 的角色变化:
❌ 不需要手动测试
❌ 不需要写测试代码
✅ 需要清晰描述验收标准
✅ 需要审阅自动生成的测试报告
18.2 Playwright 测试生成流程
PM 写的验收标准:
"用户在首页点击注册按钮，
填写表单后应看到成功提示"
│
▼
Claude 生成 Playwright 测试:
test('用户注册流程', async ({ page }) => {
await page.goto('/');
await page.click('text=注册');
await page.fill('[name=email]', '[email protected]');
await page.fill('[name=password]', '123456');
await page.click('button[type=submit]');
await expect(page.locator('.success')).toBeVisible();
});
│
▼
自动执行并截取关键帧:
🖼️ screenshot-1: 首页加载
🖼️ screenshot-2: 注册表单
🖼️ screenshot-3: 成功提示
│
▼
生成测试报告
💻 模拟 Claude TUI 交互
场景：用自然语言描述测试用例
> 请测试以下用户故事:
1. 未登录用户访问首页，应看到"登录"按钮
2. 点击登录，填写正确账密，应跳转到仪表盘
3. 仪表盘应显示用户名和最近的操作记录
4. 点击退出登录，应回到首页
╭─ Claude ─────────────────────────────────────────────╮
│ │
│ 我来为你生成并执行这些 E2E 测试。 │
│ │
│ ⚙️ Tool: Bash │
│ $ npm install -D @playwright/test │
│ $ npx playwright install chromium │
│ ✅ Playwright 安装完成 │
│ │
│ ⚙️ Tool: Write → tests/e2e/login-flow.spec.ts │
│ Created 4 test cases matching your user stories │
│ │
│ ⚙️ Tool: Bash │
│ $ npx playwright test tests/e2e/login-flow.spec.ts │
│ │
│ 📋 测试结果: │
│ ╭────────────────────────────────────────────╮ │
│ │ 测试用例 │ 状态 │ 耗时 │ │
│ │───────────────────────│──────│────────│ │
│ │ ✅ 首页显示登录按钮 │ PASS │ 1.2s │ │
│ │ ✅ 登录跳转仪表盘 │ PASS │ 2.3s │ │
│ │ ❌ 仪表盘显示用户信息 │ FAIL │ 3.1s │ │
│ │ ✅ 退出登录回到首页 │ PASS │ 1.8s │ │
│ ╰────────────────────────────────────────────╯ │
│ │
│ ❌ 测试 3 失败详情: │
│ Expected: 页面包含用户名 "测试用户" │
│ Actual: 用户名区域为空 │
│ 📸 截图已保存: test-results/screenshot-fail.png │
│ │
│ 🔍 Tool: Read → src/pages/Dashboard.tsx │
│ 发现了原因！useUser() Hook 的返回值 │
│ 在 SSR 时为 null，客户端渲染时才有值。 │
│ │
│ ⚙️ Tool: Edit → src/pages/Dashboard.tsx │
│ 添加了加载状态判断: if (!user) return <Loading/> │
│ │
│ ⚙️ Tool: Bash → $ npx playwright test (重新运行) │
│ ✅ ALL 4 TESTS PASSED │
│ │
│ 🎉 测试全部通过！自动修复了仪表盘的 SSR 问题。 │
│ │
╰──────────────────────────────────────────────────────╯
💻 代码演示
# ✅ 从验收标准生成并执行测试
claude "基于以下验收标准生成 Playwright 测试:
- 商品搜索应返回相关结果
- 空搜索应显示提示信息
- 搜索结果应能翻页
运行测试并报告结果"
# ✅ 视觉回归测试
claude "截取以下页面的全屏截图:
/dashboard, /settings, /profile
与 screenshots/ 目录下的基线对比，
报告任何视觉差异"
# ✅ 跨浏览器测试
claude "在 Chromium、Firefox 和 WebKit 上
运行登录流程测试，对比不同浏览器的结果"
# ✅ 性能测试
claude "用 Playwright 测量首页首次加载时间，
记录 LCP、FID 和 CLS 指标"
🔧 涉及的 Tools
| 工具 | 测试阶段 | 作用 |
|---|---|---|
Bash |
环境安装 | 安装 Playwright 和浏览器 |
Write |
脚本生成 | 创建测试文件 |
Bash |
测试执行 | 运行 playwright test |
Read |
Bug 定位 | 读取失败相关源文件 |
Edit |
Bug 修复 | 修改代码并重跑测试 |
📝 本期要点回顾
- PM / QA 用 自然语言描述验收标准，Claude 生成测试代码
- 测试失败时 Claude 自动 定位源码 → 修复 → 重跑
- 视觉回归测试可以 截图对比，捕捉 UI 变化
- Playwright 支持 多浏览器，Claude 可以自动化跨浏览器测试
- 适合对编码不熟悉的 PM 和 QA 快速验证功能