flow-test

What this skill does

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

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

### Step 1: Identify Critical Flows

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

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

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

## 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: "[email protected]" },
      { 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: "[email protected]" },
      { 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: "[email protected]"
  })
  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