Graphical Tests: Detect WhatNo Assertion Can See

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 four settings. An explicit delay before capturing, since the most common cause is still an image taken while the page is loading. A pixel difference tolerance, which accounts for minor rendering variations. Consideration of size differences between the two captures. And the exclusion of moving elements: promotional banners, dates, carousels, and ads. Without these exclusions, a dynamic page triggers an alert every time it runs, and eventually no one pays attention to the alerts anymore.

You replace the baseline screenshot from the comparison screen, and the new version becomes the basis for subsequent runs. This is an explicit action: no visual changes go into production without someone having reviewed and approved them.

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 screen that displays the reference capture and the runtime capture side by side, with a slider to switch between them. A differential mode superimposes the two and highlights the areas that have changed.

Yes. The comparison can focus on a specific element rather than the entire screen, which prevents a promotional banner or carousel from causing the test to fail even though the component being monitored hasn't changed.

At least one desktop resolution and one mobile resolution, since these are two different layouts. Each resolution tracked is compared to its own baseline, which prevents a mobile discrepancy from being lost in an overall assessment. The choice is based on your audience statistics rather than on a theoretical list of devices.

Component tools compare isolated interface building blocks in a lab setting and are intended for the developers who build them. Here, the comparison focuses on the actual page—as it appears in your production environments—with its current data and content. The two approaches do not identify the same regressions, and the second one does not require any coding knowledge.