Playwright start

docs/AI Gen Docs/test-visual-regression.md

@@ -0,0 +1,33 @@
+---
+type: Task
+status: AI Gen TODO
+category: QA
+isAgentGenerated: "true"
+---
+
+# Test: Visual Regression for Build Calculator Layout
+
+## Description
+
+Use Playwright's built-in screenshot comparison to detect unintended layout changes in the Build Calculator and Database pages.
+
+## Rationale
+
+The Build Calculator renders a complex keyboard-style hotkey viewer with absolute-positioned buttons, a timeline grid, and resin/bank/army sub-panels. A CSS change or component refactor could shift elements, overlap buttons, or misalign the grid. Existing functional tests only check text content and presence of elements — they would not catch a button that renders in the wrong position or overlaps another control.
+
+## Playwright Feature
+
+This test uses **`expect(page).toHaveScreenshot()`** with named snapshots. Playwright compares the current render against a baseline screenshot stored in the repo and reports a diff image on failure.
+
+### Key Benefits
+
+- Catches visual regressions a functional test would miss (position, size, color, overflow).
+- Snapshots can be taken at specific viewport sizes (desktop/tablet/mobile) using the `viewport` option.
+- Animations (toast fade-out) can be suppressed via `page.evaluate` to freeze the UI before capture.
+
+### Implementation Notes
+
+- Baselines should be generated on first run (`--update-snapshots`) and committed to the repo.
+- Use `fullPage: true` to capture the entire scrollable page.
+- Mask or remove time-dependent elements (timing counters, toast notifications) before capture to avoid false positives.
+- Run in a CI pipeline where the rendering environment (OS, fonts, GPU) is stable.