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
- Read the project structure — identify framework (Next.js, Vite, React, static HTML, etc.)
- Find entry points:
src/pages/, src/routes/, app/, index.html
- Identify forms, interactive components, API calls
- Check for existing test files in
tests/, e2e/, __tests__/
- 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
1---2name: test-generate3description: 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.4---56# Generate Project-Specific Tests78Analyze the user's codebase and generate tailored Playwright test files that run natively via `npx playwright test` at zero token cost.910## Setup1112```bash13URL="${ARGUMENTS:-http://localhost:3000}"14TIMESTAMP=$(date +%Y%m%d-%H%M%S)15OUTDIR="test-results/test-generate/$TIMESTAMP"16mkdir -p "$OUTDIR"17```1819Before running, verify prerequisites per `references/prerequisites.md`.2021## Phase 1: Assess22231. Read the project structure — identify framework (Next.js, Vite, React, static HTML, etc.)242. Find entry points: `src/pages/`, `src/routes/`, `app/`, `index.html`253. Identify forms, interactive components, API calls264. Check for existing test files in `tests/`, `e2e/`, `__tests__/`275. Check for existing `playwright.config.ts` — if missing, will create one2829## Phase 2: Plan3031Present the user with a test plan:32- List discovered routes/pages33- List discovered forms and interactive elements34- Propose test file organization:35 ```36 tests/e2e/37 happy-path.spec.ts — core user journeys38 validation.spec.ts — form validation, required fields, error states39 edge-cases.spec.ts — empty inputs, special characters, boundary values40 accessibility.spec.ts — keyboard nav, aria labels, screen reader basics41 ```42- Wait for user approval before generating4344## Phase 3: Generate4546Write `.spec.ts` files using Playwright's test runner API:47- Use `test()` and `expect()` from `@playwright/test`48- Prefer `getByRole()`, `getByLabel()`, `getByText()` over CSS selectors49- Each test independent — no shared state50- Use `test.beforeEach()` for navigation setup51- Descriptive test names: `test('submits contact form with valid data and shows success message')`5253## Phase 4: Configure5455If no `playwright.config.ts` exists, generate one:56- Auto-detect dev server command (`npm run dev`, `npm start`, etc.)57- Configure `webServer` to auto-start dev server58- Set up browser projects (chromium, firefox, webkit)59- Configure reporter (line for CI, html for local)60- Set `testDir` to match generated test location6162## Phase 5: Verify6364Run the generated tests:65```bash66npx playwright test --reporter=line 2>&167```6869If failures occur, enter the fix loop (references/fix-loop.md).7071## Phase 6: Report7273Generate `$OUTDIR/report.md` summarizing what was generated:74- Number of test files created75- Number of test cases per file76- First-run results (pass/fail)77- Fix attempt history (if fix loop was entered)78- Suggested additional coverage areas