e2e-test-generator

E2E Test Generator — App-Type-Aware Playwright Tests

Purpose

Generate comprehensive Playwright E2E tests based on the build specification. Reads build-spec.json to understand the app type, pages, components, and user flows, then produces E2E test files tailored to the specific application type (web app, Chrome extension, or PWA).

When to Use

• Phase 6 of the /build-from-figma pipeline (after Visual QA, before Quality Gate)
• When adding E2E coverage to an existing Figma-derived app
• When the user asks for E2E tests for any React application
• After component build is complete and unit tests pass

Inputs

• Required: .claude/plans/build-spec.json (from figma-intake skill)
• Required: Working built application (components implemented, unit tests passing)
• Optional: .claude/pipeline.config.json (for E2E settings and app type config)
• Optional: src/styles/design-tokens.lock.json (for visual assertion values)

Process

Step 1: Read Configuration

1. Load build-spec.json → extract appType, pages, components, e2e.flows
2. Load pipeline.config.json → extract e2e settings, appType config
3. Determine test strategy:
   - web-app → standard Playwright with dev server
   - chrome-extension → persistent context with --load-extension
   - pwa → standard Playwright + offline/install tests

Step 2: Generate Test Infrastructure

For Web Apps (appType: "web-app")

Copy the shared Playwright config template and customize:

1. Copy templates/shared/playwright.config.ts → project root playwright.config.ts
2. Adjust baseURL and webServer.command based on framework:
   • Next.js: baseURL: "http://localhost:3000", command: "pnpm dev"
   • Vite: baseURL: "http://localhost:5173", command: "pnpm dev"
3. The template includes 5 browser projects by default:
   • Desktop: chromium, firefox, webkit
   • Mobile: mobile-chrome (Pixel 5), mobile-safari (iPhone 13)

For Chrome Extensions (appType: "chrome-extension")