---
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.