E2E Testing Skill

Comprehensive end-to-end testing workflow with support for multiple frameworks and interactive debugging.

Quick Start

# Run all E2E tests
/sc:e2e run

# Run specific test file
/sc:e2e run --file auth.spec.ts

# Debug failing test
/sc:e2e debug --file auth.spec.ts --ui

# Record user interactions
/sc:e2e record --url /login

# Run with tracing enabled
/sc:e2e trace --file checkout.spec.ts

# Generate test scaffold
/sc:e2e generate spec user-profile

# View test report
/sc:e2e report

Behavioral Flow

1. Detect - Identify E2E framework (Playwright, Cypress, Selenium)
2. Configure - Parse mode and options from arguments
3. Execute - Run the selected mode
4. Analyze - Parse results, identify failures
5. Interact - Offer debugging, re-run, or fix options
6. Report - Present results with actionable next steps

Flags

Framework Detection

Auto-detect the E2E framework from project config:

# Detection logic
if [ -f "playwright.config.ts" ] || [ -f "playwright.config.js" ]; then
  FRAMEWORK="playwright"
elif [ -f "cypress.config.ts" ] || [ -f "cypress.config.js" ]; then
  FRAMEWORK="cypress"
elif [ -f "wdio.conf.js" ] || [ -f "wdio.conf.ts" ]; then
  FRAMEWORK="selenium"
fi

Mode 1: run - Execute Tests

Run E2E tests with optional filters and configuration.

Playwright

npx playwright test [--grep "pattern"] [--headed] [--workers N] [file]

Cypress

npx cypress run [--spec "file"] [--headed] [--browser chrome]

Post-Run Analysis

After test execution, parse output and offer interactive options:

Test run complete: X passed, Y failed

  [r] Re-run failed tests
  [d] Debug failing test
  [t] View trace/screenshot
  [f] Fix with /sc:tdd
  [a] Run all tests
  [q] Quit

Mode 2: debug - Interactive Debugging

Launch the framework's debug mode for step-through testing.

Playwright Debug Options

Cypress Debug Options

Debugging Tips

• Use await page.pause() (Playwright) or cy.pause() (Cypress) for breakpoints
• Check screenshots in test-results/ or cypress/screenshots/
• Use trace viewer for time-travel debugging

Mode 3: record - Record User Interactions

Use codegen tools to record browser interactions and generate test code.

Playwright

npx playwright codegen http://localhost:3000[url-path]

Cypress

npx cypress open  # Use Cypress Studio for recording

Post-Recording

1. Review generated code
2. Offer conversion to page object pattern:
   • Extract selectors to page object class
   • Convert actions to reusable methods
   • Add assertions from existing patterns

Mode 4: trace - Tracing

Run tests with tracing enabled or view existing traces.

Playwright

# Run with tracing
npx playwright test --trace on [file]

# View trace
npx playwright show-trace test-results/[trace].zip

Cypress

# Traces are auto-captured in cypress/videos/
# Screenshots in cypress/screenshots/

Mode 5: generate - Test Scaffolding

Generate test files following project patterns.

generate spec <name>

Create a new test spec file with:

• Import statements for the framework
• Describe blocks with page name
• beforeEach with login/navigation
• Empty test stubs for common scenarios

generate page <name>

Create a new page object with:

• Selector constants extracted from the target page component
• Action methods (click, fill, navigate)
• Assertion helpers (expectLoaded, expectError)

Page Object Pattern

// Playwright page object template
import { Page, Locator, expect } from '@playwright/test';

export class UserProfilePage {
  readonly page: Page;
  readonly nameInput: Locator;
  readonly saveButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.nameInput = page.getByTestId('profile-name');
    this.saveButton = page.getByTestId('profile-save');
  }

  async goto(): Promise<void> {
    await this.page.goto('/profile');
  }

  async updateName(name: string): Promise<void> {
    await this.nameInput.fill(name);
    await this.saveButton.click();
  }

  async expectLoaded(): Promise<void> {
    await expect(this.nameInput).toBeVisible();
  }
}

Mode 6: report - View Reports

View and analyze test reports.

Playwright

npx playwright show-report

Cypress

# Open Mochawesome report if configured
open cypress/reports/index.html

Summary Output

## E2E Test Report

| Suite | Tests | Passed | Failed | Skipped | Duration |
|-------|-------|--------|--------|---------|----------|
| Auth | 5 | 5 | 0 | 0 | 12.3s |
| Dashboard | 8 | 7 | 1 | 0 | 24.1s |
| Checkout | 3 | 3 | 0 | 0 | 18.7s |

**Total**: 16 tests, 15 passed, 1 failed (93.8%)

Environment Variables

MCP Integration

PAL MCP

PAL Usage Patterns

# Debug failing E2E test
mcp__pal__debug(
    step="E2E test 'checkout flow' fails on payment step",
    hypothesis="Selector changed after UI update",
    confidence="medium",
    relevant_files=["tests/e2e/checkout.spec.ts", "src/components/PaymentForm.tsx"]
)

# Review generated page object
mcp__pal__codereview(
    review_type="quick",
    step="Review generated page object for completeness",
    relevant_files=["tests/e2e/pages/checkout.page.ts"]
)

Rube MCP

Tool Coordination

• Bash - Framework CLI commands (playwright, cypress)
• Glob - Test file discovery, page component scanning
• Grep - Selector extraction from components, test output parsing
• Read - Component inspection for page object generation
• Write - Generated test files, page objects

Related Skills

• /sc:test - Unit and integration testing
• /sc:tdd - Test-driven development workflow
• /sc:pr-check - Pre-PR validation including E2E
• /sc:implement - Feature implementation with test generation