BillTracker/e2e
null 522eaaf101 chore(deps)!: tailwind 3 -> 4 via @tailwindcss/vite (4i)
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>
2026-07-10 18:03:15 -05:00
..
setup style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
smoke.spec.js-snapshots chore(deps)!: tailwind 3 -> 4 via @tailwindcss/vite (4i) 2026-07-10 18:03:15 -05:00
README.md style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
a11y.authed.spec.js style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
a11y.spec.js style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
api.probe.spec.js style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
auth.setup.js fix(qa): seed demo data amounts, bill amount validation, negative USD format, a11y aria-labels, Playwright E2E setup (batch 0.41.0 QA) 2026-07-02 20:36:09 -05:00
b-ui.spec.js style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
categories.spec.js fix(qa): resolve a11y nested-interactive on Categories & Snowball rows 2026-07-02 21:02:15 -05:00
constants.js fix(qa): seed demo data amounts, bill amount validation, negative USD format, a11y aria-labels, Playwright E2E setup (batch 0.41.0 QA) 2026-07-02 20:36:09 -05:00
critical-path.spec.js style: apply Prettier across client + server (no behavior change) 2026-07-06 14:23:53 -05:00
smoke.spec.js fix(qa): seed demo data amounts, bill amount validation, negative USD format, a11y aria-labels, Playwright E2E setup (batch 0.41.0 QA) 2026-07-02 20:36:09 -05:00
webauthn.probe.spec.js feat(auth): passkey / security-key UI — WebAuthn ships end to end 2026-07-10 17:30:14 -05:00

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)

  1. 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.
  2. Create-bill flow — drive BillModal (create → appears on Tracker → delete).
  3. Primitive state matrix — one spec per client/components/ui/* (B-UI).
  4. Fault injectionpage.route() to force 401/429/500/timeout per page and assert a recoverable error, never a white screen (B14).
  5. Visual coverage — a toHaveScreenshot per page × {desktop,mobile}.
  6. 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.