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.

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:

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

Flow Test Results

Summary

• Total Flows: 8
• Passed: 7
• Failed: 1
• Skipped: 0

Detailed Results

Flow: User Registration

• Status: PASSED
• Duration: 12.5s

Flow: User Login

• Status: PASSED
• Duration: 5.2s

Flow: Checkout

• Status: FAILED
• Duration: 18.7s

Error Details:

• Location: Payment step
• Error: NetworkError - Payment gateway timeout after 30s
• Console: "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

Best 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