create-run-e2e-testslisted

Guide for writing and running new Playwright end-to-end tests in the `apps/e2e-tests/` directory of the Packmind monorepo. Use this skill whenever you add or modify a spec that drives the real frontend and API — for example testing a user flow, a new page/route, a feature behind a flag, or a UI behavior end-to-end. Triggers on "write an e2e test", "add a Playwright test", "test this flow end-to-end", "cover this page with an e2e", "e2e for the frontend", or any work that lands a `*.spec.ts` under apps/e2e-tests/src/. Prefer this over hand-rolling raw Playwright `test()` calls — the codebase has mandatory fixtures and a Page Object Model you must follow.
PackmindHub/packmind · ★ 292 · Testing & QA · score 85

Install: claude install-skill PackmindHub/packmind

# Authoring Packmind E2E Tests ## Overview `apps/e2e-tests/` runs Playwright against the **real** frontend (`http://localhost:4200`) and API. Tests drive the browser through a **Page Object Model** and seed irrelevant setup data through the **API**, not the UI. The dev stack must be running first (see `michel-run-local-dev-stack`). Two rules dominate everything here, and both come from the project's `.packmind` standards: 1. **Never use Playwright's raw `test`.** Always use one of the project fixtures. They handle user creation, sign-up, and API-key setup so each test starts from a clean, authenticated state. 2. **Drive the UI through Page Objects, never raw selectors in specs.** A spec should read like a user story; selectors live inside page objects so a markup change breaks one file, not twenty tests. ## Where files go | File type | Location | Naming | |-----------|----------|--------| | Spec | `src/features/<area>/` | `<Feature>.spec.ts` — one spec per feature | | Page object interface | `src/domain/pages/index.ts` | `IXxxPage` | | Page object impl | `src/infra/pages/` | `XxxPage.ts` | | API gateway type | `src/domain/api/IPackmindApi.ts` | `Gateway<IXxxUseCase>` | | API gateway impl | `src/infra/api/PackmindApi.ts` | — | | API data factory | `src/domain/apiDataFactories/` | `apiXxxFactory.ts` | This mirrors the hexagonal split used across the repo: `domain/` holds interfaces, `infra/` holds implementations. ## Choosing a fixture The three fixtures form a chain —