What is visual regression testing, and what tool/method handles it in Playwright?
- Visual regression testing takes a screenshot baseline and compares new screenshots against it pixel by pixel on every build.
- If layout shifts beyond a set threshold, the test fails — even if the functionality still works.
- In Playwright: `expect(page).toHaveScreenshot()` — saves the baseline first run, diffs on every run after.
- It checks how the page looks, not whether it works — a separate concern from functional testing.
The long answer
Visual regression testing is automated screenshot comparison. The first time a test runs, it captures a baseline screenshot of a page or component. On every subsequent run, it takes a new screenshot and diffs it pixel-by-pixel against that baseline. Any visual shift — a button that moved, a font that changed, an overlapping component, a broken layout — fails the test, even if every functional test still passes.
In Playwright, this is built in: expect(page).toHaveScreenshot(). First run saves the baseline; every run after compares against it.
The main practical challenge is pixel noise — anti-aliasing differences, font rendering variance across machines, dynamic content like timestamps, ads, or animations can all cause false failures. To handle this, you configure a threshold, allowing some small percentage of pixel difference before the test actually fails, rather than demanding a pixel-perfect match.
Key distinction to state clearly in an interview: visual regression is NOT functional testing. A functional test checks whether the button works when clicked. Visual regression checks whether the button looks right — position, size, color, spacing. Both are needed; they catch different classes of bugs. A CSS refactor can silently break layout without breaking any functional test — that’s exactly the gap visual regression closes.
Typical use cases: design system/component library changes, CSS refactors, cross-browser rendering checks, catching unintended layout drift that functional assertions would never catch.
Treating visual regression as redundant with functional testing, or claiming "no threshold needed" — a naive pixel-perfect diff will fail constantly on noise like anti-aliasing and font rendering, so a tolerance threshold is required in practice.
