Skip to content
⭐ Featuredtesting

E2E Test Generator

Describe a user flow, get a working Playwright test with proper selectors, waits, and assertions — no boilerplate.

/e2e-gen

Install this skill

  1. 1. Copy the SKILL.md content (button above)
  2. 2. Create a folder for the skill:
    # Mac/Linux
    mkdir -p ~/.claude/skills/e2e-gen
    
    # Windows (PowerShell)
    mkdir $env:USERPROFILE\.claude\skills\e2e-gen
  3. 3. Save the content as ~/.claude/skills/e2e-gen/SKILL.md
  4. 4. Restart Claude Code (or open a new session)
  5. 5. Type /e2e-gen to invoke it
playwrighte2etests

/e2e-gen

Skip the boilerplate — describe a flow, get a working Playwright test.

Usage

/e2e-gen "user signs up, verifies email, lands on dashboard" /e2e-gen "checkout flow with discount code" /e2e-gen --from-pr 123 # generate tests covering the changes in PR #123

What it does

  1. Reads your playwright.config.ts to understand baseURL, projects, fixtures
  2. Looks at existing tests in tests/ to match conventions
  3. Maps your description to selectors using:
    • Routes from your app router
    • Text content from your components
    • Test IDs (data-testid) where present
  4. Writes a complete .spec.ts file with:
    • Setup (login fixture if needed)
    • Steps with proper waits (waitForURL, expect().toBeVisible())
    • Assertions at each milestone
    • Cleanup

Conventions enforced

  • One test per scenario (no nested describes for unrelated flows)
  • expect() after every navigation
  • Real selectors > XPath
  • No hardcoded setTimeout — use Playwright's auto-waiting
  • Strict mode safe (use .first() / .getByRole to avoid violations)

Output location

tests/<feature>.spec.ts (or wherever your config points)

Rules

  • Don't generate tests for flows the user hasn't described — surface gaps instead
  • If a flow needs auth/seed data, scaffold the fixture too
  • Add a comment at the top: // Generated by /e2e-gen — review before committing