端到端测试设计Skill e2e-test-design

---

名称：端到端测试设计 描述：设计端到端测试，遵循用户故事驱动模式，包含验证检查点。用于创建端到端测试、验证完整用户旅程或设计Playwright/Cypress测试模式时使用。 允许工具：Read, Grep

E2E 测试设计技能

设计端到端测试以验证完整的用户旅程。

何时使用

• 为新功能创建端到端测试
• 为关键路径设计回归测试
• 构建自动化用户流验证
• 记录预期用户行为

E2E 测试规范模板

# E2E 测试：[测试名称]

## 用户故事

作为一个[用户类型]
我想要[行动]
以便[利益]

## 测试步骤

1. 导航到[URL]
2. 拍摄初始状态截图
3. **验证**[元素/条件]存在
4. [行动] - 点击/输入/选择
5. 拍摄[状态]截图
6. **验证**[预期结果]
7. [继续步骤...]

## 成功标准

- [ ] [标准1]
- [ ] [标准2]
- [ ] [标准3]

设计工作流

步骤1：定义用户故事

从用户角度开始：

## 用户故事

作为一个注册用户
我想要重置我的密码
以便我可以重新访问我的账户

步骤2：映射用户旅程

识别用户采取的每一步：

1. 用户导航到登录页面
2. 用户点击“忘记密码”
3. 用户输入邮箱
4. 用户提交表单
5. 用户收到确认消息
6. 用户检查邮箱（E2E测试范围外）

步骤3：添加验证点

用验证标记关键检查点：

## 测试步骤

1. 导航到 /login
2. 拍摄登录页面截图
3. **验证**“忘记密码”链接可见
4. 点击“忘记密码”链接
5. **验证**密码重置表单出现
6. 输入邮箱：“test@example.com”
7. 拍摄填充表单截图
8. 点击“发送重置链接”按钮
9. **验证**成功消息出现
10. 拍摄确认截图

步骤4：定义成功标准

清晰的通过/失败条件：

## 成功标准

- [ ] 忘记密码链接可访问
- [ ] 表单接受有效邮箱
- [ ] 提交后显示成功消息
- [ ] 未遇到错误状态
- [ ] 捕获3张截图

步骤5：添加结构化输出

定义预期结果格式：

{
  "test_name": "密码重置流程",
  "status": "passed|failed",
  "screenshots": [
    "screenshots/01_login_page.png",
    "screenshots/02_filled_form.png",
    "screenshots/03_confirmation.png"
  ],
  "error": null
}

常见 E2E 测试模式

认证流程

# E2E 测试：用户登录

## 用户故事
作为一个用户，我想要登录以便我可以访问我的账户。

## 测试步骤
1. 导航到 /login
2. **验证** 登录表单可见
3. 输入用户名
4. 输入密码
5. 点击“登录”按钮
6. **验证** 重定向到 /dashboard
7. **验证** 用户名显示在头部

表单提交

# E2E 测试：联系表单

## 用户故事
作为一个访客，我想要提交联系表单。

## 测试步骤
1. 导航到 /contact
2. **验证** 表单有所有必填字段
3. 填写姓名、邮箱、消息
4. 点击“提交”
5. **验证** 成功消息出现
6. **验证** 表单重置

错误处理

# E2E 测试：无效登录

## 用户故事
作为一个用户，我想要看到无效凭证的清晰错误。

## 测试步骤
1. 导航到 /login
2. 输入无效凭证
3. 点击“登录”
4. **验证** 错误消息出现
5. **验证** 仍在登录页面
6. **验证** 密码字段已清除

安全边界

# E2E 测试：SQL注入保护

## 用户故事
作为一个用户，我应该受到注入攻击的保护。

## 测试步骤
1. 导航到搜索页面
2. 输入：“'; DROP TABLE users; --”
3. 点击搜索
4. **验证** 错误或消毒响应
5. **验证** 无数据库损坏

截图最佳实践

1. 在关键状态捕获：初始、行动后、最终
2. 描述性命名：01_initial_state.png, 02_after_click.png
3. 按测试组织：screenshots/test-name/
4. 保留用于调试：截图帮助诊断失败

E2E 测试输出格式

用于自动化和解析：

{
  "test_name": "用户登录",
  "status": "passed",
  "screenshots": [
    "screenshots/user-login/01_login_page.png",
    "screenshots/user-login/02_dashboard.png"
  ],
  "error": null,
  "duration_ms": 3450
}

对于失败：

{
  "test_name": "用户登录",
  "status": "failed",
  "screenshots": [
    "screenshots/user-login/01_login_page.png"
  ],
  "error": "步骤6失败：预期重定向到 /dashboard，得到 /error",
  "failed_step": 6,
  "duration_ms": 2100
}

内存引用

• @e2e-test-patterns.md - 完整的E2E模式文档
• @closed-loop-anatomy.md - 在反馈循环中使用E2E
• @validation-commands.md - 将E2E集成到验证堆栈

版本历史

• v1.0.0 (2025-12-26): 初始发布

---

最后更新

日期： 2025-12-26 模型： claude-opus-4-5-20251101