端到端测试技能

触发

关键词: teste, e2e, playwright, browser test, visual test, smoke test
调用: /e2e-test [suite] [--flags]

描述

自动化的端到端测试，模拟人类行为，用于预览和生产环境。使用 Chrome MCP 或 Playwright MCP 进行浏览器自动化。

测试套件

套件	时长	描述
`smoke`	30s	登录、上传、基础UI（默认当触发“teste”时）
`full`	5min	所有 P0+P1 场景
`visual`	2min	仅截图比较
`upload`	1min	所有文件格式
`download`	2min	导出功能
`login`	30s	认证流程
`api`	1min	API 端点测试

标志

标志	描述
`--preview`	仅测试 localhost
`--production`	仅测试 Production-URL
`--quick`	仅 P0 场景（最快测试）
`--human`	使用 Chrome MCP 和真实浏览器
`--headless`	使用 Playwright MCP headless（CI/CD）
`--update-baselines`	更新截图基线
`--mobile`	测试移动端视口（375px, 768px）

工作流程

1. 环境检查
   - 检查 localhost 是否运行（curl/fetch）
   - 检查 Production-URL 是否可达
   - 基于标志选择测试环境

2. 浏览器设置
   - 如果 --human：使用 Chrome MCP（mcp__claude-in-chrome__）
   - 否则：使用 Playwright MCP（mcp__playwright__）
   - 视口：1280x720（桌面）或 375x667（移动）

3. 激活人类行为
   - 随机延迟：动作之间 200-800ms
   - 打字速度：每键 50-150ms
   - 悬停后点击（200-500ms 暂停）
   - 平滑滚动而非瞬间

4. 执行测试套件
   - 每个测试：前后截图
   - 错误时：保存截图和控制台日志
   - 下载验证：检查文件大小

5. 生成报告
   - Markdown 报告在 .playwright-mcp/reports/
   - 视觉差异的差异图像
   - 摘要包括通过/失败/不稳定状态

测试场景（P0 - 业务关键）

1. 着陆页加载

- 导航到 URL
- 等待主元素可见
- 检查 Logo/品牌可见
- 截图：landing-page.png

2. 登录/认证流程

- 点击登录按钮
- 等待模态/页面动画
- 检查认证选项可见（OAuth、邮箱等）
- 截图：login-modal.png

3. 切换语言（如果支持 i18n）

- 找到语言切换
- 点击带人类延迟
- 等待文本变化
- 验证 UI 文本已更改
- 截图：language-toggle.png

4. 文件上传（如果存在）

- 点击上传区域
- 选择测试文件
- 等待确认
- 检查文件名显示
- 截图：file-uploaded.png

5. 执行主操作

- 执行主要应用功能
- 等待加载状态
- 等待结果（最大 60s）
- 检查结果内容存在
- 截图：result.png

6. 导出/下载（如果存在）

- 点击下载按钮
- 等待下载事件
- 验证文件格式正确
- 验证文件大小大于最小值
- 截图：download-complete.png

测试场景（P1 - 重要）

7. 导航/历史

- 点击导航元素
- 等待动画
- 检查正确内容加载

8. 主题切换（如果存在）

- 找到主题切换
- 记录当前颜色
- 点击切换
- 验证颜色已更改
- 截图：theme-toggle.png

9. 响应式设计

- 设置视口为 375x667
- 检查移动导航可见
- 检查主要功能可达
- 截图：mobile-view.png

10. 错误处理

- 引发错误（无效输入）
- 等待错误消息
- 检查错误对用户友好
- 截图：error-state.png

人类行为函数

// 随机延迟（200-800ms）
async function humanDelay() {
  const delay = 200 + Math.random() * 600;
  await page.waitForTimeout(delay);
}

// 人类打字（50-150ms 每键）
async function humanType(selector: string, text: string) {
  await page.click(selector);
  await humanDelay();
  for (const char of text) {
    await page.keyboard.type(char);
    await page.waitForTimeout(50 + Math.random() * 100);
  }
}

// 悬停 -> 暂停 -> 点击模式
async function humanClick(selector: string) {
  await page.hover(selector);
  await page.waitForTimeout(200 + Math.random() * 300);
  await page.click(selector);
  await humanDelay();
}

// 平滑滚动
async function humanScroll(pixels: number) {
  await page.evaluate((px) => {
    window.scrollTo({ top: px, behavior: "smooth" });
  }, pixels);
  await page.waitForTimeout(500);
}

报告格式

## 端到端测试报告 - [日期] [时间]

### 环境

- **URL**: [测试的 URL]
- **浏览器**: Chromium [版本]
- **视口**: 1280x720
- **套件**: smoke

### 结果

| #   | 测试              | 状态  | 时长 | 截图              |
| --- | ----------------- | ------- | ----- | ----------------------- |
| 1   | 着陆页加载 | 通过    | 0.8s  | [查看](landing-page.png)|
| 2   | 登录模态       | 通过    | 1.2s  | [查看](login-modal.png) |
| 3   | 文件上传       | 通过    | 2.1s  | [查看](file-uploaded.png)|
| 4   | 主操作       | 慢    | 45.2s | [查看](result.png)      |
| 5   | 下载          | 失败    | 3.4s  | [查看](error.png)       |

### 摘要

- **总计**: N 个测试
- **通过**: X (Y%)
- **失败**: A (B%)
- **慢/不稳定**: C (D%)
- **时长**: Zs

视觉基线

.playwright-mcp/
├── baselines/                    # 黄金参考（git 跟踪）
│   ├── landing-page-desktop.png
│   ├── landing-page-mobile.png
│   ├── login-modal.png
│   ├── result.png
│   └── error-state.png
├── current/                      # 当前截图（git 忽略）
├── diffs/                        # 像素差异（git 忽略）
└── reports/                      # 测试报告（git 忽略）

执行

最简单调用

用户: "teste"
-> 在可用环境上执行 smoke 套件

特定测试

用户: "teste upload"
-> 仅执行上传套件

用户: "teste production visual"
-> 在生产环境上执行视觉套件

用户: "teste --quick --human"
-> 快速测试使用真实 Chrome 浏览器

CI/CD 集成

用户: "teste --headless --full"
-> 所有测试 headless 用于流水线

错误处理

Localhost 不可达:
- 显示警告
- 询问是否启动开发服务器
Production 不可达:
- 显示警告
- 检查部署状态
测试超时 (>60s):
- 截图当前状态
- 保存控制台日志
- 标记为失败
检测到视觉差异:
- 生成差异图像
- 标记为不稳定（非自动失败）
- 用户决定是否需要基线更新

配置

可选的 .e2e-config.json 在项目根目录:

{
  "previewUrl": "http://localhost:5173",
  "productionUrl": "https://your-app.com",
  "defaultSuite": "smoke",
  "timeouts": {
    "navigation": 10000,
    "action": 60000,
    "download": 30000
  },
  "viewports": {
    "desktop": { "width": 1280, "height": 720 },
    "tablet": { "width": 768, "height": 1024 },
    "mobile": { "width": 375, "height": 667 }
  },
  "humanBehavior": {
    "enabled": true,
    "minDelay": 200,
    "maxDelay": 800,
    "typingSpeed": { "min": 50, "max": 150 }
  },
  "screenshots": {
    "onEveryStep": false,
    "onFailure": true,
    "fullPage": false
  }
}

前提条件

安装 Chrome MCP 或 Playwright MCP
Node.js 项目带 package.json
可选: .e2e-config.json 用于项目配置

作者

Dresden AI Insights - https://dresdenaiinsights.com