Use visual regression testing

Functional tests verify behavior but don't see your page. A CSS refactor might pass all unit and integration tests while completely breaking the layout — text overlapping images, buttons invisible, wrong colors. Visual regression testing acts as a safety net that reviews your actual rendered output, catching changes that no amount of JavaScript testing can detect.

Quick Reference

• Visual regression tests catch CSS regressions that functional tests miss
• Run screenshot comparisons in CI to block merges that break visual appearance
• Use component-level (Storybook) tests for focused, fast visual coverage
• Set pixel difference thresholds to avoid flaky tests from sub-pixel rendering

Check

Does this project have visual regression testing? What critical components or pages would benefit most from visual baselines?

Fix

Set up visual regression tests for the key components using Playwright's screenshot comparison or a tool like Chromatic.