Official codemod (run in a clean worktree; docker-owned data/ blocks it in-tree): tailwind.config.js inlined into client/index.css as CSS-first @theme/@utility (config file deleted — v4 auto-detects content, which also retires the .tsx-content-glob failure class from the TS migration), 33 template files' class renames applied, tailwindcss-animate loads via the v4 @plugin bridge. Build runs through @tailwindcss/vite; postcss config is now plugin-free. tailwind-merge -> 3 (v4 class model). Visual-regression gate: only diffs were a ~2px global preflight shift + the version string (baseline predated 0.41.1); re-baselined both login screenshots in this commit after review. webauthn.probe confined to the probe project (it enables WebAuthn for the seeded user, racing the parallel UI projects' password logins). e2e 27 passed, probe 18/18, PROD SMOKE PASS, typecheck/lint/tests green. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| setup | ||
| smoke.spec.js-snapshots | ||
| README.md | ||
| a11y.authed.spec.js | ||
| a11y.spec.js | ||
| api.probe.spec.js | ||
| auth.setup.js | ||
| b-ui.spec.js | ||
| categories.spec.js | ||
| constants.js | ||
| critical-path.spec.js | ||
| smoke.spec.js | ||
| webauthn.probe.spec.js | ||
README.md
E2E harness (Playwright)
The automated regression net for the QA plan — real clicks in a real browser,
plus visual-regression and axe-a11y that re-run every cycle. See
docs/QA_PLAN.md §4.4 and the B-UI / B14 / B15 batches.
Setup (one-time)
npm install
npx playwright install chromium # add: firefox webkit for cross-browser
Run
npm run test:e2e # seed scratch DB, then run headless
npm run test:e2e:ui # seed scratch DB, then Playwright UI mode (watch/debug)
npm run test:e2e:update # re-baseline visual-regression screenshots
Safe by construction
Each command runs e2e/setup/prepare-db.js first, which builds a fresh scratch
DB (db/e2e.db, git-ignored) with a seeded regular user — it refuses to touch
db/bills.db. playwright.config.js then boots the
app against that scratch DB on dedicated ports (UI 5199, API 3099) with
reuseExistingServer: false, so E2E never collides with or reuses your normal
dev server on 5173/3000. You can keep npm run dev running while E2E runs.
Override defaults via env: E2E_DB_PATH, E2E_USER, E2E_PASS, E2E_UI_PORT,
E2E_API_PORT (see e2e/constants.js).
What's here
| File | Covers |
|---|---|
setup/prepare-db.js |
fresh scratch DB + seeded regular user (run automatically) |
auth.setup.js |
logs in via the UI once, saves .auth/user.json for reuse |
smoke.spec.js |
(logged-out) login renders, empty-submit doesn't crash, routing, login visual baseline |
a11y.spec.js |
axe-core scan of public pages — fails on critical/serious WCAG violations |
critical-path.spec.js |
(logged-in) tracker renders seeded data, quick-pay + undo, all authed pages render error-free, sidebar nav |
Growing it (next steps)
- Numeric reconciliation — assert Summary's paid/unpaid/remaining totals
match the Tracker for the same month (QA_PLAN B5); see the TODO in
critical-path.spec.js. - Create-bill flow — drive BillModal (create → appears on Tracker → delete).
- Primitive state matrix — one spec per
client/components/ui/*(B-UI). - Fault injection —
page.route()to force 401/429/500/timeout per page and assert a recoverable error, never a white screen (B14). - Visual coverage — a
toHaveScreenshotper page × {desktop,mobile}. - Cross-browser — enable the firefox/webkit projects in the config.
Screenshot baselines live in e2e/**/*-snapshots/ and are committed (that's
the point of visual regression). test-results/, playwright-report/, and
e2e/.auth/ are not.