← ClaudeAtlas

hive-e2e-videolisted

Use this whenever a project needs end-to-end tests AND/OR video walkthroughs of user flows for client documentation. Scaffolds Playwright with video+trace recording and generates a self-contained, captioned client gallery from the results. Owned by the qa agent.
ImRaffy14/hivemind · ★ 0 · Testing & QA · score 65
Install: claude install-skill ImRaffy14/hivemind
# hive-e2e-video — E2E tests that double as client walkthroughs Playwright can record a video of every test. This skill turns that into two deliverables at once: a real E2E safety net, and a polished, offline **client gallery** of narrated-by-title user flows you can zip and hand off. ## When to use - The app has real user flows worth protecting with E2E tests. - A client/stakeholder wants to *see* the app working (onboarding, sign-off, demos). - You want test runs to produce documentation for free. ## Setup (in the target app repo — not the hivemind template) 1. Copy the `scaffold/` contents into the app repo root: `playwright.config.ts`, `e2e/`, `scripts/`, and merge `package.json` scripts/devDeps. 2. Install: `npm install` then `npx playwright install` (downloads browsers). 3. Set the app URL: `BASE_URL=http://localhost:5173` (or edit `baseURL` in the config). **Prerequisites:** Node.js. `npx playwright install` needs network the first time. ## Write specs as client-readable flows - **One user flow per `test`.** The test **title becomes the gallery caption**, so write it the way you'd describe the flow to a client: `test('customer completes checkout', ...)`. - Wrap phases in `test.step('...')` — steps show up as a readable timeline in the trace and make the video easy to follow. - Keep selectors user-facing (roles, labels, text) so the video reads like real usage. - See `scaffold/e2e/example.spec.ts` for the pattern. ## Run + generate the gallery ```bash npm r