Visual Regression Testing
What Visual Regression Testing Is
Visual regression testing takes a screenshot of two URLs and compares them pixel by pixel, so you can see whether a deploy changed the page in ways nobody intended. It catches the class of bug that no HTTP check and no performance metric will ever report: the page still returns 200, still loads fast, and looks wrong.
In LoadFocus the comparison is between two URLs, not against a stored history. The usual pairing is a staging domain against production, so you are asking "does my next release look like the current one" rather than "has this page drifted since last month".
How the Comparison Works
Each test screenshots both URLs and produces a comparison image that highlights the differences in red, shown next to the result's screenshot so you can see the two side by side.
Whether the test passes depends on the comparison threshold you choose. The threshold is the proportion of difference below which changes are ignored: pick 10%, and the test passes as long as the two pages differ by less than 10%.
Choosing a Threshold
The threshold is a fixed set of options rather than a free-text value:
| Threshold | Use it when |
|---|---|
| 0.5% | The page should be pixel-identical; you want any change flagged |
| 1% | Near-identical, tolerating antialiasing and font rendering noise |
| 5% | Small dynamic regions, such as a timestamp or a rotating badge |
| 10% (default) | General use, where some content varies between environments |
| 20% | Pages with a sizeable dynamic block, such as a feed or carousel |
| 50% | Only the gross layout matters |
Start at the default and tighten it. A threshold that is too loose passes real regressions; one that is too tight fails every run on rendering noise and gets ignored, which is worse.
When to Use It
- Before a release: point a staging URL at the matching production URL and confirm the only differences are the ones you shipped on purpose.
- After a CSS or dependency upgrade: the change set says one line, the rendered page may disagree.
- On templated pages: where one template change affects many URLs at once.
Running Tests From Chrome
A Visual Regression Chrome Extension is available and runs the tests you have already defined. Open the extension, run the test, and the same pixel-by-pixel comparison happens against the pages in that test.
What Visual Regression Does Not Tell You
It reports that something looks different, not that something is broken, and not why. Pair it with the rest of the monitoring suite:
- Website performance monitoring for whether the page is fast.
- Browser checks for whether the journey still completes.
- Lighthouse opportunities for what to fix when it is slow.
FAQ
What is visual regression testing?
It is the practice of screenshotting a page and comparing it pixel by pixel against another version of that page, so unintended visual changes are caught before users see them.
What does LoadFocus compare against?
Two URLs that you choose, typically a staging domain against the matching production page, rather than against a stored baseline history.
How do I stop small rendering differences from failing every run?
Raise the comparison threshold. It is the proportion of difference below which changes are ignored, and the default is 10%.
What thresholds can I choose?
Six preset values: 0.5%, 1%, 5%, 10%, 20% and 50%. The default is 10%.
How are differences shown?
A comparison image is displayed next to the result's screenshot with the differing areas highlighted in red, so you can see both versions side by side.
Can I run visual regression tests from the browser?
Yes. The Visual Regression Chrome Extension runs the tests you have already defined and returns the same pixel-by-pixel comparison.