e2e-flow-test

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

E2E 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.md
This skill reads flow definitions from the test plan at
tests/e2e-test-plan.md
. If the plan file doesn't exist, the calling command should invoke the
e2e-test-plan
skill first to generate it.
计划文件
tests/e2e-test-plan.md
本Skill从
tests/e2e-test-plan.md
路径的测试计划中读取流程定义。如果该计划文件不存在,调用命令应先调用
e2e-test-plan
Skill来生成它。

Purpose

目标

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.
  1. 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
  2. Read Flow Definitions from Plan
    • Extract authentication flows
    • Extract core business flows
    • Extract administrative flows
    • Use this list for testing
关键:在测试流程之前,必须验证测试计划是否存在。
  1. 检查测试计划
    • 查找
      tests/e2e-test-plan.md
      文件
    • 如果文件存在,读取“关键流程”部分
    • 如果文件不存在,停止操作并报告必须先生成测试计划
  2. 从计划中读取流程定义
    • 提取认证流程
    • 提取核心业务流程
    • 提取管理流程
    • 使用该列表进行测试

Step 1: Identify Critical Flows

步骤1:识别关键流程

  1. Authentication Flows
    • User registration
    • User login
    • Password reset
    • Logout
  2. Core Business Flows
    • Main feature workflows
    • CRUD operations
    • Transactions/checkouts
    • Data processing
  3. Administrative Flows
    • User management
    • Configuration changes
    • Reporting
  1. 认证流程
    • 用户注册
    • 用户登录
    • 密码重置
    • 登出
  2. 核心业务流程
    • 主要功能工作流
    • CRUD操作
    • 交易/结账
    • 数据处理
  3. 管理流程
    • 用户管理
    • 配置变更
    • 报表生成

Step 2: Flow Documentation

步骤2:流程文档

For each flow, document:
markdown
undefined
对于每个流程,需记录:
markdown
undefined

Flow: User Registration

流程:用户注册

Overview

概述

Complete user registration from signup to verified account
完成从注册到账户验证的完整用户注册流程

Steps

步骤

  1. Navigate to registration page
  2. Fill registration form
  3. Submit form
  4. Receive confirmation
  5. Verify email (if applicable)
  6. Complete profile (if applicable)
  7. Access dashboard
  1. 导航到注册页面
  2. 填写注册表单
  3. 提交表单
  4. 接收确认信息
  5. 验证邮箱(如适用)
  6. 完善个人资料(如适用)
  7. 访问仪表板

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
  • 重复邮箱
  • 弱密码
  • 无效邮箱格式
  • 必填字段缺失
undefined

Step 3: Execute Flow Tests

步骤3:执行流程测试

For EACH flow:
  1. Setup
    • Clear any previous state
    • Prepare test data
    • Set initial conditions
  2. Execute Steps
    • Perform each step
    • Verify state after each step
    • Capture snapshots
  3. Verify Outcome
    • Check final state
    • Verify data persistence
    • Check side effects
  4. Test Error Cases
    • Repeat flow with error conditions
    • Verify proper error handling
对于每个流程:
  1. 准备工作
    • 清除之前的所有状态
    • 准备测试数据
    • 设置初始条件
  2. 执行步骤
    • 执行每个步骤
    • 验证每个步骤后的状态
    • 捕获快照
  3. 验证结果
    • 检查最终状态
    • 验证数据持久性
    • 检查副作用
  4. 测试错误场景
    • 在错误条件下重复流程
    • 验证错误处理是否得当

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 in
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 in

Login 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 accessible
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 accessible

Password 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 page
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 page

CRUD 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 list
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 list

Checkout 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 history
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 history

Error 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 retry
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 retry

Network 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 action
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 action

Session 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-login
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-login

Output Format

输出格式

Flow Test Results

流程测试结果

markdown
undefined
markdown
undefined

Flow 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
StepActionStatusNotes
1Navigate to /registerOKForm visible
2Fill registration formOKAll fields filled
3Submit formOKNo errors
4Verify accountOKDashboard accessible
5Verify can loginOKLogin successful
  • 状态:通过
  • 耗时:12.5s
步骤操作状态备注
1导航到/register正常表单可见
2填写注册表单正常所有字段已填写
3提交表单正常无错误
4验证账户正常仪表板可访问
5验证登录功能正常登录成功

Flow: User Login

流程:用户登录

  • Status: PASSED
  • Duration: 5.2s
StepActionStatusNotes
1Navigate to /loginOKForm visible
2Enter credentialsOKFields filled
3SubmitOKRedirect to dashboard
4Verify sessionOKProtected pages accessible
  • 状态:通过
  • 耗时:5.2s
步骤操作状态备注
1导航到/login正常表单可见
2输入凭证正常字段已填写
3提交正常重定向到仪表板
4验证会话正常受保护页面可访问

Flow: Checkout

流程:结账

  • Status: FAILED
  • Duration: 18.7s
StepActionStatusNotes
1Add to cartOKItem added
2View cartOKCart displayed
3Proceed to checkoutOKForm visible
4Fill shippingOKAddress saved
5PaymentFAILEDPayment gateway timeout
6Verify orderSKIPPEDPrevious 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

建议

  1. Payment Timeout: Increase gateway timeout or add retry logic
  2. Add Loading States: Some actions lack visual feedback
  3. Error Recovery: Consider saving cart state for failed checkouts
undefined
  1. 支付超时:增加网关超时时间或添加重试逻辑
  2. 添加加载状态:部分操作缺乏视觉反馈
  3. 错误恢复:考虑为失败的结账保存购物车状态
undefined

Best Practices

最佳实践

  1. Test Happy Path First - Ensure normal flow works
  2. Test Every Step - Don't skip intermediate states
  3. Verify State - Check data persists between steps
  4. Test Error Cases - Include failure scenarios
  5. Document Dependencies - Note flow prerequisites
  6. Check Side Effects - Emails, notifications, etc.
  7. Clean Up - Reset state between flow tests
  8. Capture Evidence - Take snapshots at each step
  1. 先测试正常流程 - 确保正常流程可运行
  2. 测试每个步骤 - 不要跳过中间状态
  3. 验证状态 - 检查步骤之间的数据持久性
  4. 测试错误场景 - 包含失败场景
  5. 记录依赖关系 - 注明流程前提条件
  6. 检查副作用 - 邮件、通知等
  7. 清理环境 - 在流程测试之间重置状态
  8. 捕获证据 - 在每个步骤拍摄快照