E2E Testing Skill Skill

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

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

Flags

| Flag | Type | Default | Description | |------|------|---------|-------------| | --file | string | - | Specific test file to target | | --grep | string | - | Filter tests by name pattern | | --headed | bool | false | Run in headed browser mode | | --workers | int | auto | Number of parallel workers | | --ui | bool | false | Open framework UI mode | | --url | string | / | Starting URL for record mode | | --output | string | - | Output file for generated code | | --framework | string | auto | Force framework: playwright, cypress, selenium |

Framework Detection

Auto-detect the E2E framework from project config:

| Framework | Detection | Config File | |-----------|-----------|-------------| | Playwright | @playwright/test in package.json | playwright.config.ts | | Cypress | cypress in package.json | cypress.config.ts | | Selenium | selenium-webdriver in package.json | wdio.conf.js |

# 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

| Option | Command | Use Case | |--------|---------|----------| | UI mode | npx playwright test --ui | Visual step-through with time-travel | | Inspector | PWDEBUG=1 npx playwright test | Selector builder + breakpoints | | Slow-mo | npx playwright test --headed --slowmo=500 | Watch test execution |

Cypress Debug Options

| Option | Command | Use Case | |--------|---------|----------| | Open mode | npx cypress open | Interactive test runner | | Debug | npx cypress run --headed --no-exit | Keep browser open on failure |

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

Review generated code
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

| Variable | Purpose | |----------|---------| | BASE_URL | Application URL for tests (default: http://localhost:3000) | | E2E_USERNAME | Test user credentials | | E2E_PASSWORD | Test user password | | CI | Adjusts workers and retries for CI | | PWDEBUG | Enable Playwright Inspector |

MCP Integration

PAL MCP

| Tool | When to Use | Purpose | |------|-------------|---------| | mcp__pal__debug | Test failures | Root cause analysis for E2E failures | | mcp__pal__codereview | Generated tests | Review test quality and coverage | | mcp__pal__apilookup | Framework docs | Get current Playwright/Cypress API docs |

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 | When to Use | Purpose | |------|-------------|---------| | mcp__rube__RUBE_MULTI_EXECUTE_TOOL | CI integration | Post E2E results to Slack, update tickets |

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

Agent Skills: E2E Testing Skill

Install this agent skill to your local

Skill Files