34 lines
1.6 KiB
Markdown
34 lines
1.6 KiB
Markdown
---
|
|
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.
|