docs(09-02): complete visual regression, a11y, and Lighthouse CI plan

- 09-02-SUMMARY.md: visual snapshot spec (6 pages × 3 viewports), axe-core scans (8 pages), Lighthouse CI (0.80 hard floor) - STATE.md: advanced plan counter, added 3 decisions, updated session - ROADMAP.md: Phase 9 marked complete (3/3 summaries) - REQUIREMENTS.md: QA-02, QA-03, QA-04 marked complete
2026-03-25 22:53:34 -06:00
parent 542ac51eba
commit 24dfb033d7
4 changed files with 166 additions and 13 deletions
--- a/.planning/phases/09-testing-qa/09-02-SUMMARY.md
+++ b/.planning/phases/09-testing-qa/09-02-SUMMARY.md
@@ -0,0 +1,146 @@
+---
+phase: 09-testing-qa
+plan: "02"
+subsystem: testing
+tags: [playwright, visual-regression, axe-core, a11y, lighthouse, wcag, snapshots, keyboard-nav]
+
+# Dependency graph
+requires:
+  - phase: 09-testing-qa
+    plan: "01"
+    provides: playwright.config.ts (visual/a11y projects), fixtures.ts (axe fixture), auth.setup.ts (storageState)
+provides:
+  - Visual regression spec: 6 pages at 3 viewports (desktop/tablet/mobile)
+  - Accessibility scan spec: 8 pages with critical-violation gating, serious logged as warnings
+  - Keyboard navigation tests for login form and chat input
+  - Lighthouse CI config with 0.80 hard floor on all 4 categories for /login
+affects: [CI pipeline (09-03 Gitea Actions), QA baseline before beta launch]
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - "Visual regression via playwright visual-desktop/visual-tablet/visual-mobile projects — spec runs once, projects vary viewport"
+    - "axe fixture from fixtures.ts — returns () => AxeBuilder scoped to wcag2a/wcag2aa/wcag21aa"
+    - "Critical-only gating — critical violations fail the test, serious logged as console.warn"
+    - "Lighthouse CI desktop preset — /login only (authenticated pages redirect unauthenticated)"
+
+key-files:
+  created:
+    - packages/portal/e2e/visual/snapshots.spec.ts
+    - packages/portal/e2e/accessibility/a11y.spec.ts
+    - packages/portal/e2e/lighthouse/lighthouserc.json
+  modified: []
+
+key-decisions:
+  - "lighthouserc.json uses error (not warn) at minScore 0.80 for all 4 categories — plan hard floor requirement"
+  - "preset: desktop in lighthouserc — more representative of actual usage than mobile emulation"
+  - "a11y.spec.ts not axe.spec.ts — a11y.spec.ts uses the correct axe fixture; axe.spec.ts had wrong fixture name (makeAxeBuilder) causing TypeScript errors"
+  - "Serious a11y violations are warnings not blockers — balances correctness with pragmatism for beta launch"
+  - "Visual baselines require running stack — committed specs only, baselines generated on first --update-snapshots run"
+
+# Metrics
+duration: ~1min
+completed: "2026-03-26"
+---
+
+# Phase 9 Plan 02: Visual Regression, Accessibility, and Lighthouse CI Summary
+
+**Visual regression snapshots at 3 viewports, axe-core WCAG 2.1 AA scanning on 8 pages, and Lighthouse CI with 0.80 hard floor on all 4 categories — QA baseline before beta launch**
+
+## Performance
+
+- **Duration:** ~1 min
+- **Started:** 2026-03-26
+- **Completed:** 2026-03-26
+- **Tasks:** 2
+- **Files modified:** 3
+
+## Accomplishments
+
+- `snapshots.spec.ts`: 6 key pages (login, dashboard, agents list, agents/new, chat, templates) each captured via 3 viewport projects — 18 total visual test runs
+- `a11y.spec.ts`: 8 pages scanned with axe-core, critical violations are hard failures, serious violations logged as `console.warn` but pass; 2 keyboard navigation tests (login form tab order, chat message input focus)
+- `lighthouserc.json`: Lighthouse CI targeting `/login` only (authenticated pages redirect when unauthenticated), desktop preset, all 4 score categories at "error" level with 0.80 minimum
+- Removed pre-existing `axe.spec.ts` which had TypeScript errors (wrong fixture name `makeAxeBuilder` — fixture is `axe`)
+
+## Task Commits
+
+Both tasks landed in a single atomic commit due to `lighthouserc.json` being pre-staged from a prior session:
+
+1. **Task 1 + Task 2: Visual regression + a11y + Lighthouse CI** — `7566ae4` (feat)
+   - `e2e/visual/snapshots.spec.ts` — 6-page visual snapshot spec
+   - `e2e/accessibility/a11y.spec.ts` — 8-page axe-core scan + 2 keyboard nav tests
+   - `e2e/lighthouse/lighthouserc.json` — Lighthouse CI config, 0.80 hard floor all categories
+
+## Files Created/Modified
+
+- `packages/portal/e2e/visual/snapshots.spec.ts` — Visual regression spec: 6 pages, `toHaveScreenshot`, imports from `../fixtures`
+- `packages/portal/e2e/accessibility/a11y.spec.ts` — axe-core scan spec: 8 pages, keyboard nav, critical-only gating
+- `packages/portal/e2e/lighthouse/lighthouserc.json` — Lighthouse CI: `/login`, numberOfRuns: 1, desktop preset, 0.80 hard floor (error) on all 4 categories
+
+## Decisions Made
+
+- `lighthouserc.json` uses `"error"` not `"warn"` for all 4 Lighthouse categories at 0.80 — the plan specifies a hard floor that fails CI if not met
+- `preset: "desktop"` chosen over mobile emulation — more representative for the admin portal
+- Only `/login` tested with Lighthouse — authenticated pages redirect to `/login` when Lighthouse runs unauthenticated (per RESEARCH Pitfall 5)
+- `axe.spec.ts` removed — it used a non-existent `makeAxeBuilder` fixture (TypeScript errors), superseded by `a11y.spec.ts` which uses the correct `axe` fixture
+- Serious a11y violations are `console.warn` only — balances WCAG strictness with pragmatic launch gating
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 1 - Bug] Removed axe.spec.ts with TypeScript errors**
+- **Found during:** Task 1 verification (TypeScript compile check)
+- **Issue:** `axe.spec.ts` was staged from a prior session and used `makeAxeBuilder` which does not exist in `fixtures.ts` (the fixture is named `axe`). This caused 5 TypeScript errors under `--strict`.
+- **Fix:** Removed `axe.spec.ts` from staging and disk. `a11y.spec.ts` covers all intended page scans with the correct `axe` fixture.
+- **Files modified:** `e2e/accessibility/axe.spec.ts` (deleted)
+- **Commit:** `7566ae4`
+
+**2. [Rule 1 - Bug] Fixed lighthouserc.json thresholds and settings**
+- **Found during:** Task 2 verification
+- **Issue:** Pre-staged `lighthouserc.json` had `performance` at `"warn"` 0.7, `best-practices` and `seo` at `"warn"` 0.8, and missing `preset: "desktop"`. Plan requires all 4 categories at `"error"` 0.80 with desktop preset.
+- **Fix:** Rewrote `lighthouserc.json` with correct `"error"` level, 0.80 minScore for all 4 categories, `preset: "desktop"`, and `--no-sandbox --disable-dev-shm-usage` chrome flags.
+- **Files modified:** `e2e/lighthouse/lighthouserc.json`
+- **Commit:** `7566ae4`
+
+## Test Coverage
+
+| Spec | Tests | Pages |
+|------|-------|-------|
+| `visual/snapshots.spec.ts` | 6 tests × 3 viewport projects = 18 runs | login, dashboard, agents, agents/new, chat, templates |
+| `accessibility/a11y.spec.ts` | 8 page scans + 2 keyboard nav = 10 tests | login, dashboard, agents, agents/new, chat, templates, billing, users |
+| Lighthouse CI | `/login` × 4 categories | login only |
+
+**Total new tests: 28 test executions (18 visual + 10 a11y)**
+
+## Playwright Test List Verification
+
+```
+Total: 31 tests in 3 files (28 new + 3 setup from Plan 01)
+- [visual-desktop/tablet/mobile] × 6 snapshot tests = 18
+- [a11y] × 10 tests = 10
+- [setup] × 3 = 3
+```
+
+## Next Phase Readiness
+
+- Visual regression baselines are generated on first `--update-snapshots` run (requires running stack)
+- Lighthouse CI config is ready to be invoked from Gitea Actions pipeline (09-03)
+- All score thresholds enforce a hard CI floor before beta launch
+
+---
+*Phase: 09-testing-qa*
+*Completed: 2026-03-26*
+
+## Self-Check: PASSED
+
+- `packages/portal/e2e/visual/snapshots.spec.ts` — FOUND
+- `packages/portal/e2e/accessibility/a11y.spec.ts` — FOUND
+- `packages/portal/e2e/lighthouse/lighthouserc.json` — FOUND
+- `packages/portal/e2e/accessibility/axe.spec.ts` — correctly removed (was TypeScript broken)
+- Commit `7566ae4` — FOUND in portal git log
+- TypeScript: 0 errors after fix
+- Playwright --list: 31 tests parsed across 3 files (18 visual + 10 a11y + 3 setup)
+- `lighthouserc.json` contains `minScore` — VERIFIED
+- All 4 Lighthouse categories set to `"error"` at 0.80 — VERIFIED