# Test Generate

> 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.

- Skill: `az9713/test-generate` (Agent Skill)
- Install (CLI): `npx skillmds@latest add az9713/test-generate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/az9713/test-generate/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: az9713 (https://skillmd.com/u/az9713)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/az9713/test-generate

---


# 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

```bash
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:
```bash
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