e2e-test-generator

E2E Test Generator (Playwright)

Generate Playwright end-to-end tests using the Page Object Model, stable selectors, network mocking, and multi-viewport coverage — then run them before reporting.

Hard Rules

1. NEVER use page.waitForTimeout() — use locator assertions or waitForResponse.
2. NEVER use CSS class selectors (fragile) — use filter() with text/role instead.
3. Mock ALL API calls with page.route() — tests must not depend on a running backend.
4. Every page under test gets a Page Object class.
5. Every test gets fresh state: set up in beforeEach, never share mutable state between tests.
6. Test files are named {page-name}.spec.ts.
7. Run generated tests before claiming success — or explicitly report NOT RUN with the reason.

Phase 0 — Load Project Context

Read if present, skip silently if absent: CLAUDE.md or AGENTS.md; docs/architecture/frontend-state.md (screen tree, navigation model, key user flows). Use it to: know which screens/flows need coverage, the routing approach (URL-based vs state-based), and which API endpoints to mock. If no docs exist, fall back to README.md, directory structure, and existing patterns.

Process

Phase 1 — Detect project setup

1. Read playwright.config.ts (or .js) — baseURL, browsers, viewport, test directory.
2. Read existing tests in the test directory — match their style.
3. Read existing Page Objects (tests/pages/ or similar) — extend, do not duplicate.
4. Identify the frontend stack (React, Vue, Svelte) and routing approach. Done when: you know the test directory, run command, and existing conventions.

Phase 2 — Generate

1. Read the target page/component — UI structure, interactive elements.
2. Create/update Page Objects for each page under test.
3. Generate tests covering (map each to the Coverage Priorities table):
   • Page loads and renders key sections
   • Navigation between sections/tabs
   • CRUD operations with mocked API responses
   • Error states (API failures, empty states)
   • Permission/role-based visibility (if applicable)
   • Mobile viewport behavior
4. Add visual regression snapshots for pages with complex layouts. Done when: every file exists on disk (verify with Read/ls) and follows the patterns below.