Testing

Visual regression testing for websites

A normal automated test checks whether a button works. Visual regression testing helps check whether the button, form or component is still in the right place and readable.

How it works

Playwright opens the page in a browser, takes a screenshot and compares it to a saved baseline image. If the pixel difference exceeds the allowed threshold, the test fails.

On first run a baseline image is created. All future screenshots are compared against it. When design changes intentionally, the baseline is updated manually.

Visual testing helps when:

  • design changes often;
  • the site must work on mobile and desktop;
  • components come from several systems;
  • previous releases caused layout defects;
  • accessibility depends on visible focus and readable text.

What not to over-test

Not every page needs screenshot comparisons. It is better to start with critical journeys: front page, form, cart, service page and one content page.

Screenshot tests are sensitive to minor changes — a font update, an icon or a cosmetic layout shift. If tests fail too often without a real defect, they lose trust. A good rule: only test where a visual regression costs more than a false alarm.

Integration into a CI/CD pipeline

The most value comes when visual tests run automatically after every change. Playwright runs them in headless mode — no browser window opens, and tests run quickly on a CI server too.

A typical setup:

  1. Baseline screenshots are saved in the repository.
  2. After each change, screenshots are compared in CI.
  3. On a difference, the developer gets a visual diff — a red/green overlay showing where the change occurred.
  4. Intentional change → update the baseline and commit.

WebPro uses visual checks as part of automated testing when they actually reduce release risk. In Drupal projects, this fits well with maintenance and larger Drupal upgrades.

Subscribe via RSS
Kaido Toomingas Kaido Toomingas WebPro Company OÜ

Need Drupal help?

If the article describes your situation, you do not have to read everything first. A real person will help you choose the next step.

Contact us