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

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

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

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