webapp-testing

webapp-testing Skill 多维度简评

来源：anthropics/skills（官方） 类别：测试工具 / E2E 测试

一、核心定位与价值

端到端测试是 Web 应用质量的最后一道防线，但也是 AI 时代最少人用得起来的——传统 E2E 测试需要写大量代码。

webapp-testing Skill 基于 Playwright 实现，让 AI 直接驱动浏览器完成 E2E 测试，门槛从”会写测试”降到”会描述”。

二、核心能力清单

三、5 大实战场景

场景 1：登录流程测试

用 webapp-testing 测试我的登录流程：
1. 打开 http://localhost:3000/login
2. 输入 test@example.com / password123
3. 点击登录按钮
4. 验证：跳转 /dashboard，显示用户名
5. 截图保存到 /tmp/login-test.png

场景 2：电商购物流程

测试购物流程：
1. 打开首页，搜索 "iPhone"
2. 点击第一个商品
3. 选择规格，加入购物车
4. 进入结算页
5. 填写收货地址、选择支付方式
6. 提交订单，验证订单号生成

场景 3：表单验证测试

测试注册表单的边界情况：
- 空字段
- 邮箱格式错误
- 密码强度不够
- 用户名已存在
- 重复密码不一致
每种情况截图保存

场景 4：跨浏览器兼容性

用 webapp-testing 在 Chrome / Firefox / Safari 三个浏览器分别测试首页加载。
记录每个浏览器的加载时间和错误。

场景 5：响应式测试

在不同视口下测试：
- 手机：375x667
- 平板：768x1024
- 桌面：1920x1080
验证导航菜单在手机上是汉堡菜单，桌面是水平导航

四、配合 CLAUDE.md 效果更佳（关键技巧）

单独用 webapp-testing 不够——需要结合 CLAUDE.md 文档一起用，让 AI 在生成测试脚本之前先理解项目结构：

# CLAUDE.md

## Web Testing Conventions

### Project Info
- 前端框架：Next.js 14 (App Router)
- 测试目录：src/tests/
- Base URL：http://localhost:3000

### Test User
- 普通用户：test@example.com / password123
- 管理员：admin@example.com / AdminPass123

### Patterns
- Page Object 模式：src/tests/pages/
- 测试 fixtures：src/tests/fixtures/
- 自定义命令：npm run test:e2e

### Conventions
- 截图保存到 /tmp/screenshots/
- 失败重试 3 次
- 测试数据清理在 afterEach

五、6 个高级技巧

1. 截图对比（视觉回归）

每次跑完测试后，生成 baseline 截图，下次跑对比差异。
差异 > 5% 报失败。

2. 网络拦截

拦截所有 API 调用，返回 mock 数据，测试纯 UI 逻辑：
- /api/users → 返回 [testUser1, testUser2]
- /api/posts → 返回 mock 文章

3. 多标签测试

测试主窗口 + 弹窗：
1. 主窗口点击"打开弹窗"
2. 在弹窗中填写表单
3. 提交后主窗口内容更新

4. 离线场景

拦截所有网络请求，模拟离线状态，验证应用有友好提示

5. 慢网络测试

设置网络节流：3G 网络，测试加载状态和加载失败提示

6. 无障碍测试

用 axe-core 检查页面的无障碍问题：
- 颜色对比度
- ARIA 属性
- 键盘导航

六、生成的代码结构

webapp-testing 通常会生成这样的测试代码：

// tests/login.spec.ts
import { test, expect } from '@playwright/test'

test.describe('Login Flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3000/login')
  })

  test('successful login', async ({ page }) => {
    await page.fill('[data-testid="email"]', 'test@example.com')
    await page.fill('[data-testid="password"]', 'password123')
    await page.click('[data-testid="submit"]')

    await expect(page).toHaveURL('**/dashboard')
    await expect(page.locator('[data-testid="username"]')).toHaveText('Test User')
    await page.screenshot({ path: '/tmp/screenshots/login-success.png' })
  })

  test('invalid password shows error', async ({ page }) => {
    await page.fill('[data-testid="email"]', 'test@example.com')
    await page.fill('[data-testid="password"]', 'wrongpassword')
    await page.click('[data-testid="submit"]')

    await expect(page.locator('[data-testid="error"]')).toBeVisible()
    await expect(page.locator('[data-testid="error"]')).toContainText('密码错误')
  })
})

关键点：用 data-testid 而不是 class 或 ID——更稳定。

七、决策树：选择方法

Skill 内部有清晰的决策树：

用户任务 → 是静态 HTML？
  ├─ 是 → 直接读 HTML 文件识别选择器
  │       ├─ 成功 → 写 Playwright 脚本
  │       └─ 失败 → 按动态应用处理
  │
  └─ 否（动态 webapp）→ 服务器已运行？
      ├─ 否 → 运行: python scripts/with_server.py --help
      │        然后用 helper + 简化 Playwright 脚本
      │
      └─ 是 → 侦察-行动模式:
          1. 导航并等待 networkidle
          2. 截图或检查 DOM
          3. 从渲染状态识别选择器
          4. 用发现的选择器执行操作

八、安装

# Claude Code
/plugin install example-skills@anthropic-agent-skills

# 通用
npx skills add anthropics/skills --skill webapp-testing

# 配合 Playwright
npm install -D @playwright/test
npx playwright install

九、6 条实战建议

1. 写 CLAUDE.md：把项目测试规范写进去
2. 用 data-testid：稳定的测试选择器
3. 截图对比：作为视觉回归的 baseline
4. 网络拦截：测试纯 UI 不依赖后端
5. 失败重试：网络不稳定时 retry 3 次
6. 跨浏览器：Chrome + Firefox + Safari 都测

十、限制

十一、常见 Q&A

Q: 必须用 Playwright 吗？ A: 是的。这个 Skill 基于 Playwright。

Q: 怎么测试移动端？ A: 用 viewport 模拟不同设备尺寸。

Q: 测试覆盖率统计？ A: 配合 nyc（JS）或 coverage.py（Python）。

Q: 能跑 CI/CD 吗？ A: 能。生成的测试代码是标准 Playwright 代码。

Q: 中文支持？ A: Skill 是英文的，但测试中文页面无障碍。

十二、总结

webapp-testing Skill 是E2E 测试的 AI 化最佳实践。

核心价值：

• 不用手写测试代码
• 描述即测试
• 配合 CLAUDE.md 效果翻倍

适用人群：

• ✅ Web 开发者（所有）
• ✅ QA 工程师
• ✅ 想提升自动化覆盖率

本文基于官方文档和公开资料整理，未经过 MagicNetWorld 实测。

参考资料

• anthropics/skills - webapp-testing 官方 Skill — GitHub 官方仓库
• Playwright 官方文档 — Playwright 官方文档
• Agent Skills 开放规范 — 官方规范网站
• What are skills? - Claude 官方文档 — Anthropic 官方文档
• Equipping agents for the real world with Agent Skills — Anthropic 工程博客