What is screenshot (visual) UI testing?

Screenshot (visual) UI testing is an approach in which tests compare an image of the interface with a previously saved reference screenshot. The idea is to automatically detect any visual changes: colors, sizes, spacing, the position of elements, fonts, layout bugs, and so on.

---

#How this works

1. The test launches the application and takes a screenshot of a specific screen, component or page.
2. The resulting image is compared with the reference (baseline) that is stored in the repository.
3. If the images are identical, the test passes.
4. If there is even a small difference, the test fails, showing a visual diff (exactly what changed).

---

#Why this is needed

Screenshot testing helps catch errors that unit tests cannot see, for example:

• shifted layout
• broken responsiveness
• a disappeared element
• breakages after a browser, CSS or third-party library update
• an incorrect component state (buttons, windows, lists, etc.)

---

#Where it is used

• web UI
• mobile applications
• design systems
• components in Storybook
• complex visual interfaces (dashboards, tables)

---

#Pros

• catches visual bugs that a human might miss
• automates checking the appearance
• reduces manual testing of the interface

#Cons

• tests can be fragile (small visual changes break the result)
• large diffs can be hard to analyze
• requires careful maintenance of baseline screenshots

---

#The main idea

Screenshot UI testing checks appearance, not behavior. It protects against unexpected visual changes, so the interface looks exactly the way it was intended to.