hive-e2e-videolisted
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