e2e-flow-test
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseE2E Flow Testing Skill
E2E流程测试Skill
Overview
概述
This skill executes complete user flow testing using Playwright MCP. It tests end-to-end journeys through the application, from start to finish, verifying that multi-step processes work correctly.
本Skill使用Playwright MCP执行完整的用户流程测试。它测试应用程序从开始到结束的端到端用户旅程,验证多步骤流程是否正常工作。
Standard Test Plan Location
标准测试计划位置
Plan file:
tests/e2e-test-plan.mdThis skill reads flow definitions from the test plan at . If the plan file doesn't exist, the calling command should invoke the skill first to generate it.
tests/e2e-test-plan.mde2e-test-plan计划文件:
tests/e2e-test-plan.md本Skill从路径的测试计划中读取流程定义。如果该计划文件不存在,调用命令应先调用 Skill来生成它。
tests/e2e-test-plan.mde2e-test-planPurpose
目标
Ensure that:
- Complete user journeys work from start to finish
- State persists correctly between steps
- Error handling works throughout flows
- Edge cases in flows are handled
- Business logic executes correctly
确保:
- 完整的用户旅程从开始到结束均可正常运行
- 步骤之间的状态保持正确
- 流程中的错误处理机制正常工作
- 流程中的边缘情况得到妥善处理
- 业务逻辑执行正确
Workflow
工作流程
Step 0: Test Plan Verification (REQUIRED FIRST)
步骤0:测试计划验证(必须首先执行)
CRITICAL: Before testing flows, verify the test plan exists.
-
Check for Test Plan
- Look for
tests/e2e-test-plan.md - If the file exists, read the "Critical Flows" section
- If the file does NOT exist, STOP and report that the plan must be generated first
- Look for
-
Read Flow Definitions from Plan
- Extract authentication flows
- Extract core business flows
- Extract administrative flows
- Use this list for testing
关键:在测试流程之前,必须验证测试计划是否存在。
-
检查测试计划
- 查找文件
tests/e2e-test-plan.md - 如果文件存在,读取“关键流程”部分
- 如果文件不存在,停止操作并报告必须先生成测试计划
- 查找
-
从计划中读取流程定义
- 提取认证流程
- 提取核心业务流程
- 提取管理流程
- 使用该列表进行测试
Step 1: Identify Critical Flows
步骤1:识别关键流程
-
Authentication Flows
- User registration
- User login
- Password reset
- Logout
-
Core Business Flows
- Main feature workflows
- CRUD operations
- Transactions/checkouts
- Data processing
-
Administrative Flows
- User management
- Configuration changes
- Reporting
-
认证流程
- 用户注册
- 用户登录
- 密码重置
- 登出
-
核心业务流程
- 主要功能工作流
- CRUD操作
- 交易/结账
- 数据处理
-
管理流程
- 用户管理
- 配置变更
- 报表生成
Step 2: Flow Documentation
步骤2:流程文档
For each flow, document:
markdown
undefined对于每个流程,需记录:
markdown
undefinedFlow: User Registration
流程:用户注册
Overview
概述
Complete user registration from signup to verified account
完成从注册到账户验证的完整用户注册流程
Steps
步骤
- Navigate to registration page
- Fill registration form
- Submit form
- Receive confirmation
- Verify email (if applicable)
- Complete profile (if applicable)
- Access dashboard
- 导航到注册页面
- 填写注册表单
- 提交表单
- 接收确认信息
- 验证邮箱(如适用)
- 完善个人资料(如适用)
- 访问仪表板
Prerequisites
前提条件
- No existing account
- Valid email address
- 无现有账户
- 有效的邮箱地址
Expected Outcomes
预期结果
- User account created
- Verification email sent
- User can login
- Profile accessible
- 用户账户已创建
- 验证邮件已发送
- 用户可登录
- 个人资料可访问
Error Cases
错误场景
- Duplicate email
- Weak password
- Invalid email format
- Required fields missing
undefined- 重复邮箱
- 弱密码
- 无效邮箱格式
- 必填字段缺失
undefinedStep 3: Execute Flow Tests
步骤3:执行流程测试
For EACH flow:
-
Setup
- Clear any previous state
- Prepare test data
- Set initial conditions
-
Execute Steps
- Perform each step
- Verify state after each step
- Capture snapshots
-
Verify Outcome
- Check final state
- Verify data persistence
- Check side effects
-
Test Error Cases
- Repeat flow with error conditions
- Verify proper error handling
对于每个流程:
-
准备工作
- 清除之前的所有状态
- 准备测试数据
- 设置初始条件
-
执行步骤
- 执行每个步骤
- 验证每个步骤后的状态
- 捕获快照
-
验证结果
- 检查最终状态
- 验证数据持久性
- 检查副作用
-
测试错误场景
- 在错误条件下重复流程
- 验证错误处理是否得当
Common Flow Patterns
常见流程模式
Registration Flow
注册流程
Step 1: Navigate to Registration
browser_navigate({ url: "/register" })
browser_snapshot()
Verify: Registration form visible
Step 2: Fill Registration Form
browser_fill_form({
fields: [
{ name: "Name", type: "textbox", ref: "[name-ref]", value: "Test User" },
{ name: "Email", type: "textbox", ref: "[email-ref]", value: "test@example.com" },
{ name: "Password", type: "textbox", ref: "[password-ref]", value: "SecurePass123!" },
{ name: "Confirm Password", type: "textbox", ref: "[confirm-ref]", value: "SecurePass123!" }
]
})
browser_snapshot()
Verify: All fields filled
Step 3: Submit Form
browser_click({ element: "Register button", ref: "[submit-ref]" })
browser_wait_for({ text: "Account created" OR redirect to dashboard })
browser_snapshot()
browser_console_messages({ level: "error" })
Verify: No errors, success message or redirect
Step 4: Verify Account
If email verification required:
Check for verification message
Else:
browser_snapshot()
Verify: Dashboard or profile accessible
Step 5: Verify Can Login
browser_navigate({ url: "/logout" })
browser_navigate({ url: "/login" })
browser_fill_form with credentials
browser_click submit
browser_wait_for dashboard
Verify: Successfully logged inStep 1: Navigate to Registration
browser_navigate({ url: "/register" })
browser_snapshot()
Verify: Registration form visible
Step 2: Fill Registration Form
browser_fill_form({
fields: [
{ name: "Name", type: "textbox", ref: "[name-ref]", value: "Test User" },
{ name: "Email", type: "textbox", ref: "[email-ref]", value: "test@example.com" },
{ name: "Password", type: "textbox", ref: "[password-ref]", value: "SecurePass123!" },
{ name: "Confirm Password", type: "textbox", ref: "[confirm-ref]", value: "SecurePass123!" }
]
})
browser_snapshot()
Verify: All fields filled
Step 3: Submit Form
browser_click({ element: "Register button", ref: "[submit-ref]" })
browser_wait_for({ text: "Account created" OR redirect to dashboard })
browser_snapshot()
browser_console_messages({ level: "error" })
Verify: No errors, success message or redirect
Step 4: Verify Account
If email verification required:
Check for verification message
Else:
browser_snapshot()
Verify: Dashboard or profile accessible
Step 5: Verify Can Login
browser_navigate({ url: "/logout" })
browser_navigate({ url: "/login" })
browser_fill_form with credentials
browser_click submit
browser_wait_for dashboard
Verify: Successfully logged inLogin Flow
登录流程
Step 1: Navigate to Login
browser_navigate({ url: "/login" })
browser_snapshot()
Verify: Login form visible
Step 2: Enter Credentials
browser_fill_form({
fields: [
{ name: "Email", type: "textbox", ref: "[email-ref]", value: "user@example.com" },
{ name: "Password", type: "textbox", ref: "[password-ref]", value: "password" }
]
})
Step 3: Submit
browser_click({ element: "Login button", ref: "[submit-ref]" })
browser_wait_for({ text: "Dashboard" OR text: "Welcome" })
browser_snapshot()
Verify: Logged in state, user menu visible
Step 4: Verify Session
browser_navigate({ url: "/profile" })
browser_snapshot()
Verify: User profile accessible
browser_navigate({ url: "/protected-page" })
browser_snapshot()
Verify: Protected content accessibleStep 1: Navigate to Login
browser_navigate({ url: "/login" })
browser_snapshot()
Verify: Login form visible
Step 2: Enter Credentials
browser_fill_form({
fields: [
{ name: "Email", type: "textbox", ref: "[email-ref]", value: "user@example.com" },
{ name: "Password", type: "textbox", ref: "[password-ref]", value: "password" }
]
})
Step 3: Submit
browser_click({ element: "Login button", ref: "[submit-ref]" })
browser_wait_for({ text: "Dashboard" OR text: "Welcome" })
browser_snapshot()
Verify: Logged in state, user menu visible
Step 4: Verify Session
browser_navigate({ url: "/profile" })
browser_snapshot()
Verify: User profile accessible
browser_navigate({ url: "/protected-page" })
browser_snapshot()
Verify: Protected content accessiblePassword Reset Flow
密码重置流程
Step 1: Navigate to Forgot Password
browser_navigate({ url: "/forgot-password" })
browser_snapshot()
Verify: Email input form visible
Step 2: Request Reset
browser_type({
element: "Email field",
ref: "[email-ref]",
text: "user@example.com"
})
browser_click({ element: "Send reset link", ref: "[submit-ref]" })
browser_wait_for({ text: "email sent" OR text: "check your email" })
browser_snapshot()
Verify: Success message
Step 3: (Simulated) Click Reset Link
browser_navigate({ url: "/reset-password?token=TEST_TOKEN" })
browser_snapshot()
Verify: Password reset form visible
Step 4: Set New Password
browser_fill_form({
fields: [
{ name: "New Password", type: "textbox", ref: "[password-ref]", value: "NewPass123!" },
{ name: "Confirm Password", type: "textbox", ref: "[confirm-ref]", value: "NewPass123!" }
]
})
browser_click({ element: "Reset Password", ref: "[submit-ref]" })
browser_wait_for({ text: "Password updated" OR redirect to login })
browser_snapshot()
Verify: Success message or login pageStep 1: Navigate to Forgot Password
browser_navigate({ url: "/forgot-password" })
browser_snapshot()
Verify: Email input form visible
Step 2: Request Reset
browser_type({
element: "Email field",
ref: "[email-ref]",
text: "user@example.com"
})
browser_click({ element: "Send reset link", ref: "[submit-ref]" })
browser_wait_for({ text: "email sent" OR text: "check your email" })
browser_snapshot()
Verify: Success message
Step 3: (Simulated) Click Reset Link
browser_navigate({ url: "/reset-password?token=TEST_TOKEN" })
browser_snapshot()
Verify: Password reset form visible
Step 4: Set New Password
browser_fill_form({
fields: [
{ name: "New Password", type: "textbox", ref: "[password-ref]", value: "NewPass123!" },
{ name: "Confirm Password", type: "textbox", ref: "[confirm-ref]", value: "NewPass123!" }
]
})
browser_click({ element: "Reset Password", ref: "[submit-ref]" })
browser_wait_for({ text: "Password updated" OR redirect to login })
browser_snapshot()
Verify: Success message or login pageCRUD Flow (Create-Read-Update-Delete)
CRUD流程(创建-读取-更新-删除)
Step 1: Navigate to List
browser_navigate({ url: "/items" })
browser_snapshot()
Note: Initial item count
Step 2: Create Item
browser_click({ element: "Create new", ref: "[create-ref]" })
browser_snapshot()
Verify: Create form visible
browser_fill_form({
fields: [
{ name: "Title", type: "textbox", ref: "[title-ref]", value: "Test Item" },
{ name: "Description", type: "textbox", ref: "[desc-ref]", value: "Test description" }
]
})
browser_click({ element: "Save", ref: "[save-ref]" })
browser_wait_for({ text: "created" OR redirect to list })
browser_snapshot()
Verify: Item created, appears in list
Step 3: Read Item
browser_click({ element: "View item", ref: "[view-ref]" })
browser_snapshot()
Verify: Item details displayed correctly
Step 4: Update Item
browser_click({ element: "Edit", ref: "[edit-ref]" })
browser_snapshot()
Verify: Edit form with current values
browser_type({
element: "Title field",
ref: "[title-ref]",
text: "Updated Title"
})
browser_click({ element: "Save", ref: "[save-ref]" })
browser_wait_for({ text: "updated" })
browser_snapshot()
Verify: Changes saved
Step 5: Delete Item
browser_click({ element: "Delete", ref: "[delete-ref]" })
If confirmation dialog:
browser_handle_dialog({ accept: true })
browser_wait_for({ textGone: "Updated Title" })
browser_snapshot()
Verify: Item removed from listStep 1: Navigate to List
browser_navigate({ url: "/items" })
browser_snapshot()
Note: Initial item count
Step 2: Create Item
browser_click({ element: "Create new", ref: "[create-ref]" })
browser_snapshot()
Verify: Create form visible
browser_fill_form({
fields: [
{ name: "Title", type: "textbox", ref: "[title-ref]", value: "Test Item" },
{ name: "Description", type: "textbox", ref: "[desc-ref]", value: "Test description" }
]
})
browser_click({ element: "Save", ref: "[save-ref]" })
browser_wait_for({ text: "created" OR redirect to list })
browser_snapshot()
Verify: Item created, appears in list
Step 3: Read Item
browser_click({ element: "View item", ref: "[view-ref]" })
browser_snapshot()
Verify: Item details displayed correctly
Step 4: Update Item
browser_click({ element: "Edit", ref: "[edit-ref]" })
browser_snapshot()
Verify: Edit form with current values
browser_type({
element: "Title field",
ref: "[title-ref]",
text: "Updated Title"
})
browser_click({ element: "Save", ref: "[save-ref]" })
browser_wait_for({ text: "updated" })
browser_snapshot()
Verify: Changes saved
Step 5: Delete Item
browser_click({ element: "Delete", ref: "[delete-ref]" })
If confirmation dialog:
browser_handle_dialog({ accept: true })
browser_wait_for({ textGone: "Updated Title" })
browser_snapshot()
Verify: Item removed from listCheckout Flow (E-commerce)
结账流程(电商)
Step 1: Add to Cart
browser_navigate({ url: "/products/1" })
browser_click({ element: "Add to cart", ref: "[add-ref]" })
browser_wait_for({ text: "Added" OR cart count update })
browser_snapshot()
Verify: Item in cart
Step 2: View Cart
browser_navigate({ url: "/cart" })
browser_snapshot()
Verify: Cart shows item, correct price
Step 3: Proceed to Checkout
browser_click({ element: "Checkout", ref: "[checkout-ref]" })
browser_snapshot()
Verify: Checkout form visible
Step 4: Fill Shipping
browser_fill_form({
fields: [
{ name: "Address", type: "textbox", ref: "[address-ref]", value: "123 Test St" },
{ name: "City", type: "textbox", ref: "[city-ref]", value: "Test City" },
{ name: "Zip", type: "textbox", ref: "[zip-ref]", value: "12345" }
]
})
browser_click({ element: "Continue", ref: "[continue-ref]" })
browser_snapshot()
Step 5: Payment
browser_fill_form({
fields: [
{ name: "Card Number", type: "textbox", ref: "[card-ref]", value: "4242424242424242" },
{ name: "Expiry", type: "textbox", ref: "[expiry-ref]", value: "12/25" },
{ name: "CVV", type: "textbox", ref: "[cvv-ref]", value: "123" }
]
})
browser_click({ element: "Pay Now", ref: "[pay-ref]" })
browser_wait_for({ text: "Order confirmed" })
browser_snapshot()
Verify: Order confirmation page
Step 6: Verify Order
browser_navigate({ url: "/orders" })
browser_snapshot()
Verify: Order appears in order historyStep 1: Add to Cart
browser_navigate({ url: "/products/1" })
browser_click({ element: "Add to cart", ref: "[add-ref]" })
browser_wait_for({ text: "Added" OR cart count update })
browser_snapshot()
Verify: Item in cart
Step 2: View Cart
browser_navigate({ url: "/cart" })
browser_snapshot()
Verify: Cart shows item, correct price
Step 3: Proceed to Checkout
browser_click({ element: "Checkout", ref: "[checkout-ref]" })
browser_snapshot()
Verify: Checkout form visible
Step 4: Fill Shipping
browser_fill_form({
fields: [
{ name: "Address", type: "textbox", ref: "[address-ref]", value: "123 Test St" },
{ name: "City", type: "textbox", ref: "[city-ref]", value: "Test City" },
{ name: "Zip", type: "textbox", ref: "[zip-ref]", value: "12345" }
]
})
browser_click({ element: "Continue", ref: "[continue-ref]" })
browser_snapshot()
Step 5: Payment
browser_fill_form({
fields: [
{ name: "Card Number", type: "textbox", ref: "[card-ref]", value: "4242424242424242" },
{ name: "Expiry", type: "textbox", ref: "[expiry-ref]", value: "12/25" },
{ name: "CVV", type: "textbox", ref: "[cvv-ref]", value: "123" }
]
})
browser_click({ element: "Pay Now", ref: "[pay-ref]" })
browser_wait_for({ text: "Order confirmed" })
browser_snapshot()
Verify: Order confirmation page
Step 6: Verify Order
browser_navigate({ url: "/orders" })
browser_snapshot()
Verify: Order appears in order historyError Case Testing
错误场景测试
Invalid Input Errors
无效输入错误
Step 1: Navigate to form
Step 2: Fill with invalid data
Step 3: Submit
Step 4: Verify: Error messages displayed
Step 5: Verify: Form not submitted
Step 6: Verify: User can correct and retryStep 1: Navigate to form
Step 2: Fill with invalid data
Step 3: Submit
Step 4: Verify: Error messages displayed
Step 5: Verify: Form not submitted
Step 6: Verify: User can correct and retryNetwork Error Simulation
网络错误模拟
Step 1: Start flow normally
Step 2: Introduce network issue (if possible)
Step 3: Attempt action
Step 4: Verify: Error handled gracefully
Step 5: Verify: User informed of issue
Step 6: Verify: Can retry actionStep 1: Start flow normally
Step 2: Introduce network issue (if possible)
Step 3: Attempt action
Step 4: Verify: Error handled gracefully
Step 5: Verify: User informed of issue
Step 6: Verify: Can retry actionSession Timeout
会话超时
Step 1: Login
Step 2: Navigate to protected page
Step 3: Clear session (if possible)
Step 4: Attempt action
Step 5: Verify: Redirect to login
Step 6: Verify: Action can be completed after re-loginStep 1: Login
Step 2: Navigate to protected page
Step 3: Clear session (if possible)
Step 4: Attempt action
Step 5: Verify: Redirect to login
Step 6: Verify: Action can be completed after re-loginOutput Format
输出格式
Flow Test Results
流程测试结果
markdown
undefinedmarkdown
undefinedFlow Test Results
流程测试结果
Summary
摘要
- Total Flows: 8
- Passed: 7
- Failed: 1
- Skipped: 0
- 总流程数:8
- 通过:7
- 失败:1
- 跳过:0
Detailed Results
详细结果
Flow: User Registration
流程:用户注册
- Status: PASSED
- Duration: 12.5s
| Step | Action | Status | Notes |
|---|---|---|---|
| 1 | Navigate to /register | OK | Form visible |
| 2 | Fill registration form | OK | All fields filled |
| 3 | Submit form | OK | No errors |
| 4 | Verify account | OK | Dashboard accessible |
| 5 | Verify can login | OK | Login successful |
- 状态:通过
- 耗时:12.5s
| 步骤 | 操作 | 状态 | 备注 |
|---|---|---|---|
| 1 | 导航到/register | 正常 | 表单可见 |
| 2 | 填写注册表单 | 正常 | 所有字段已填写 |
| 3 | 提交表单 | 正常 | 无错误 |
| 4 | 验证账户 | 正常 | 仪表板可访问 |
| 5 | 验证登录功能 | 正常 | 登录成功 |
Flow: User Login
流程:用户登录
- Status: PASSED
- Duration: 5.2s
| Step | Action | Status | Notes |
|---|---|---|---|
| 1 | Navigate to /login | OK | Form visible |
| 2 | Enter credentials | OK | Fields filled |
| 3 | Submit | OK | Redirect to dashboard |
| 4 | Verify session | OK | Protected pages accessible |
- 状态:通过
- 耗时:5.2s
| 步骤 | 操作 | 状态 | 备注 |
|---|---|---|---|
| 1 | 导航到/login | 正常 | 表单可见 |
| 2 | 输入凭证 | 正常 | 字段已填写 |
| 3 | 提交 | 正常 | 重定向到仪表板 |
| 4 | 验证会话 | 正常 | 受保护页面可访问 |
Flow: Checkout
流程:结账
- Status: FAILED
- Duration: 18.7s
| Step | Action | Status | Notes |
|---|---|---|---|
| 1 | Add to cart | OK | Item added |
| 2 | View cart | OK | Cart displayed |
| 3 | Proceed to checkout | OK | Form visible |
| 4 | Fill shipping | OK | Address saved |
| 5 | Payment | FAILED | Payment gateway timeout |
| 6 | Verify order | SKIPPED | Previous step failed |
Error Details:
- Location: Payment step
- Error: NetworkError - Payment gateway timeout after 30s
- Console: "Error: Payment processing failed"
- 状态:失败
- 耗时:18.7s
| 步骤 | 操作 | 状态 | 备注 |
|---|---|---|---|
| 1 | 添加到购物车 | 正常 | 商品已添加 |
| 2 | 查看购物车 | 正常 | 购物车已显示 |
| 3 | 进入结账 | 正常 | 表单可见 |
| 4 | 填写配送信息 | 正常 | 地址已保存 |
| 5 | 支付 | 失败 | 支付网关超时 |
| 6 | 验证订单 | 跳过 | 上一步失败 |
错误详情:
- 位置:支付步骤
- 错误:NetworkError - 支付网关30s后超时
- 控制台:"Error: Payment processing failed"
Error Cases Tested
已测试的错误场景
Registration - Duplicate Email
注册 - 重复邮箱
- Status: PASSED
- Verified: Error message shown
- Verified: Form not submitted
- 状态:通过
- 验证:错误消息已显示
- 验证:表单未提交
Login - Invalid Password
登录 - 无效密码
- Status: PASSED
- Verified: Error message shown
- Verified: Still on login page
- 状态:通过
- 验证:错误消息已显示
- 验证:仍在登录页面
Checkout - Empty Cart
结账 - 空购物车
- Status: PASSED
- Verified: Cannot proceed to checkout
- Verified: Message shown
- 状态:通过
- 验证:无法进入结账
- 验证:消息已显示
Recommendations
建议
- Payment Timeout: Increase gateway timeout or add retry logic
- Add Loading States: Some actions lack visual feedback
- Error Recovery: Consider saving cart state for failed checkouts
undefined- 支付超时:增加网关超时时间或添加重试逻辑
- 添加加载状态:部分操作缺乏视觉反馈
- 错误恢复:考虑为失败的结账保存购物车状态
undefinedBest Practices
最佳实践
- Test Happy Path First - Ensure normal flow works
- Test Every Step - Don't skip intermediate states
- Verify State - Check data persists between steps
- Test Error Cases - Include failure scenarios
- Document Dependencies - Note flow prerequisites
- Check Side Effects - Emails, notifications, etc.
- Clean Up - Reset state between flow tests
- Capture Evidence - Take snapshots at each step
- 先测试正常流程 - 确保正常流程可运行
- 测试每个步骤 - 不要跳过中间状态
- 验证状态 - 检查步骤之间的数据持久性
- 测试错误场景 - 包含失败场景
- 记录依赖关系 - 注明流程前提条件
- 检查副作用 - 邮件、通知等
- 清理环境 - 在流程测试之间重置状态
- 捕获证据 - 在每个步骤拍摄快照