e2e-test-generator

When to use

Invoke this skill when:

• A product manager or engineer provides a user story ("As a user, I want to add items to cart and checkout").
• You need a new spec for an existing flow and the repo already uses Playwright or Cypress.
• You want to port an ad-hoc smoke test into the page object model.
• You are adding regression coverage for a recently shipped feature.

Do NOT use when: the target flow is unstable or not yet wired up (write stubs instead); the repo uses a framework other than Playwright/Cypress (propose one first); the story is a pure API flow (use api-test-generator).

Inputs

• story (required): User story or acceptance criteria in plain text.
• framework (required): playwright or cypress. Inferred from repo if present.
• base_url (required): Origin under test, e.g. https://staging.example.com.
• selectors (optional): Known data-testid values or a path to a selectors map.
• auth_mode (optional): storage-state, api-login, or ui-login. Default storage-state.
• paths (optional): Target directories — pageObjectsDir (default tests/pages/), specsDir (default tests/e2e/).

Outputs

• One or more spec files in specsDir.
• One page object per distinct page the story touches in pageObjectsDir.
• A fixtures file if the story requires seeded data.
• A short report listing: files written, tests generated, any TODO markers for selectors that could not be resolved.

Tool dependencies

• Read, Write, Edit, Grep, Glob (always).
• Playwright MCP (optional) for dry-running generated specs.
• references/test-patterns.md for the catalog of 20+ reusable patterns.

Procedure

1. Discover the framework. Grep for @playwright/test or cypress in package.json. If neither is present, ask the user which to scaffold.
2. Load selectors. Grep the target pages/components for data-testid="...". If fewer than 3 are found on the critical path, emit a report entry recommending the developer add testids first.
3. Parse the story. Extract actors, preconditions, actions (one per sentence), and observable outcomes. Each observable becomes one expect.
4. Draft page objects. One class per page. Public methods correspond to user actions (addToCart, checkout). Fields are Locators built from data-testid. No CSS classes.
5. Draft the spec. Use test.describe per story, one test per acceptance criterion. Every test ends with at least one expect.
6. Add waits. Use web-first assertions (expect(locator).toBeVisible()) and page.waitForResponse(url) for async flows. Never waitForTimeout.
7. Mock non-happy paths. For empty states, 5xx, and rate-limit flows, use page.route(url, route => route.fulfill({ status, body })).
8. Add screenshot + trace. Confirm use: { screenshot: 'only-on-failure', trace: 'retain-on-failure' } is set in playwright.config.ts; add it if missing.
9. Add inline a11y. Inject @axe-core/playwright on the final page of each flow and assert zero violations with serious/critical impact.
10. Write files. Never overwrite without diffing. Emit a summary.