Tier 4: Evaluate visual regression testing for viewport-specific layouts

[encomp]

Context

Current tier4 specs use bounding box and visibility assertions to verify layout correctness. Visual regression testing (pixel-level screenshot comparison) would catch subtle rendering issues that structural assertions miss — e.g., overlapping elements, incorrect spacing, font rendering differences.

Scope

Evaluate whether to add visual regression testing for viewport-specific layouts:

• Research Playwright's built-in toHaveScreenshot() API
• Determine baseline management strategy (golden screenshots per viewport)
• Assess CI cost (screenshot comparison adds time and storage)
• If adopted, add visual snapshots for the 6 existing tier4 spec areas at each viewport

Trade-offs

• Pro: Catches visual regressions that structural tests miss
• Con: Brittle (font rendering, anti-aliasing, OS differences), requires baseline maintenance, slower CI
• Alternative: Continue with structural assertions + manual visual QA on releases

References

• Playwright visual comparison docs: https://playwright.dev/docs/test-snapshots
• Existing tier4 specs use boundingBox() for layout verification