IGP-Fan-Reference/docs/AI Gen Docs/test-visual-regression.md

type, status, category, isAgentGenerated

type	status	category	isAgentGenerated
Task	AI Gen TODO	QA	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.