Pixel-by-pixel comparisonAll resolutionsConfigurable exclusion zones
A block shifts out of place, a font changes, a button ends up below the fold. The page works, all the tests pass, and yet it no longer looks the way it should.
A library update changes the height of a component, causing the price to be hidden behind an image on mobile devices. The checkout process still works, and no tests report any errors, but no one can see the amount anymore. On a regulated website, the same issue could cause a required disclosure to disappear from the page.
A reference screenshot, a screenshot from today, and the difference highlighted. You can either approve the new version or make corrections.
A shadow that shifts by one pixel is not considered an issue. The tolerance threshold is set on a page-by-page basis.
Promotional banner, today's date, carousel, advertisement. These areas are ignored to prevent false alerts.
Mr Suricate a no-brainer, because he gives you the assurance that there are no problems. Finding just one bug is enough to make the solution pay for itself for an entire year!”
Anthony CornevinE-commerce Platform Manager, Vertbaudet
GO FURTHER
Fifteen types of tests, four categories. Each one answers a different question about your application.
Is there a term you don't understand? The automated testing glossary defines it.
YOUR QUESTIONS
The most common questions we get about graphics tests.
This is the automatic comparison of a screenshot with a validated reference screenshot. Any deviation beyond the threshold you have set is flagged, and the affected area is highlighted. This is also known as a visual regression test.
Through two settings: the tolerance threshold, which accounts for minor variations in rendering, and the exclusion of specific areas—such as promotional banners, dates, carousels, and ads. Without these exclusions, a dynamic page triggers an alert every time it loads, and no one pays attention to them anymore.
You approve the new screenshot, which then becomes the reference. This is an explicit action, which ensures that no visual changes go into production without first being reviewed and approved by someone.
Yes, because the two don't detect the same thing. A functional test verifies that an action produces the correct result. It doesn't detect when an element is hidden behind another, unreadable, or off-screen, even though the page remains fully usable by a machine.
This is a common practice in regulated industries. A rate, legal notice, or warning that disappears as a result of a layout change poses a compliance risk, and this is exactly the type of discrepancy that visual comparison brings to light.
A 30-minute demo of your own app. You'll see one of your workflows automated in real time, without writing any code.
