E2E 测试技能
触发方式
- 关键词：
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 | 仅测试生产环境 URL |
--quick | 仅测试 P0 场景（最快） |
--human | 使用 Chrome MCP 真实浏览器 |
--headless | 使用 Playwright MCP 无头模式（CI/CD） |
--update-baselines | 更新截图基线 |
--mobile | 测试移动端视口（375px, 768px） |
工作流
1. 环境检查
- 检查 localhost 是否运行（curl/fetch）
- 检查生产环境 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/
- 视觉差异时生成 Diff 图片
- 包含通过/失败/不稳定状态的摘要
测试场景（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);
}
报告格式
## E2E 测试报告 - [日期] [时间]
### 环境
- **URL**: [测试的 URL]
- **浏览器**: Chromium [版本]
- **视口**: 1280x720
- **套件**: smoke
### 结果
| # | 测试 | 状态 | 时长 | 截图 |
| --- | ---------------- | ------ | ------ | ---------------------------- |
| 1 | 登录页面加载 | PASS | 0.8s | [查看](landing-page.png) |
| 2 | 登录模态框 | PASS | 1.2s | [查看](login-modal.png) |
| 3 | 文件上传 | PASS | 2.1s | [查看](file-uploaded.png) |
| 4 | 主要操作 | SLOW | 45.2s | [查看](result.png) |
| 5 | 下载 | FAIL | 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"
-> 所有测试在无头模式下运行（适用于流水线）
错误处理
-
Localhost 不可达：
- 显示警告
- 询问是否启动开发服务器
-
生产环境不可达：
- 显示警告
- 检查部署状态
-
测试超时（>60s）：
- 截取当前状态截图
- 保存控制台日志
- 标记为 FAIL
-
检测到视觉差异：
- 生成差异图片
- 标记为 FLAKY（不自动标记为 FAIL）
- 用户决定是否需要更新基线
配置
项目根目录下的可选 .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