What does a visual regression test do?

A visual regression test compares the interface's appearance "before" and "after" a code change to detect unintended visual changes. It takes a new screenshot of the UI and compares it with the reference (baseline). If the images differ, the test fails and shows exactly where the changes occurred.

In other words, such a test answers the question:

"Did the interface's appearance break after the latest edits?"

It helps detect a regression, for example:

• the layout shifted
• spacing disappeared
• an element vanished
• buttons moved
• the font or color changed

Thus, a visual regression test protects the product's design from unexpected visual bugs that can appear after updating components, CSS, libraries or refactoring.