E2E Flow Testing 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.

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.

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)

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
Read Flow Definitions from Plan
- Extract authentication flows
- Extract core business flows
- Extract administrative flows
- Use this list for testing

Step 1: Identify Critical Flows

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

Step 2: Flow Documentation

For each flow, document:

markdown

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

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

Step 3: Execute Flow Tests

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

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

CRUD Flow (Create-Read-Update-Delete)

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

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

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

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

Output Format

Flow Test Results