test-generate

name	test-generate
description	Generate project-specific Playwright test files by analyzing the codebase. Use when user wants custom tests written for their app rather than running generic test suites.
allowed-tools	Bash(playwright-cli:*) Bash(npx:*) Bash(mkdir:*) Read Write Glob Grep

Generate Project-Specific Tests

Analyze the user's codebase and generate tailored Playwright test files that run natively via npx playwright test at zero token cost.

Setup

URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-generate/$TIMESTAMP"
mkdir -p "$OUTDIR"

Before running, verify prerequisites per references/prerequisites.md.

Phase 1: Assess

1. Read the project structure — identify framework (Next.js, Vite, React, static HTML, etc.)
2. Find entry points: src/pages/, src/routes/, app/, index.html
3. Identify forms, interactive components, API calls
4. Check for existing test files in tests/, e2e/, __tests__/
5. Check for existing playwright.config.ts — if missing, will create one

Phase 2: Plan

Present the user with a test plan:

• List discovered routes/pages
• List discovered forms and interactive elements
• Propose test file organization:

  tests/e2e/
    happy-path.spec.ts    — core user journeys
    validation.spec.ts    — form validation, required fields, error states
    edge-cases.spec.ts    — empty inputs, special characters, boundary values
    accessibility.spec.ts — keyboard nav, aria labels, screen reader basics
  

• Wait for user approval before generating

Phase 3: Generate

Write .spec.ts files using Playwright's test runner API:

• Use test() and expect() from @playwright/test
• Prefer getByRole(), getByLabel(), getByText() over CSS selectors
• Each test independent — no shared state
• Use test.beforeEach() for navigation setup
• Descriptive test names: test('submits contact form with valid data and shows success message')

Phase 4: Configure

If no playwright.config.ts exists, generate one:

• Auto-detect dev server command (npm run dev, npm start, etc.)
• Configure webServer to auto-start dev server
• Set up browser projects (chromium, firefox, webkit)
• Configure reporter (line for CI, html for local)
• Set testDir to match generated test location

Phase 5: Verify

Run the generated tests:

npx playwright test --reporter=line 2>&1

If failures occur, enter the fix loop (references/fix-loop.md).

Phase 6: Report

Generate $OUTDIR/report.md summarizing what was generated:

• Number of test files created
• Number of test cases per file
• First-run results (pass/fail)
• Fix attempt history (if fix loop was entered)
• Suggested additional coverage areas