Back to all articles

Visual regression testing and environment comparison with backstop JS

Jonathan Whiteside
Jonathan Whiteside
Global SVP Technology & Engineering
Length
4 min read
Date
1 April 2021

Visual regression testing

Visual regression testing is the process of creating reference images for each component as they are created. This allows a comparison over time to monitor changes.

Ran by the developer on their local development environment after changes made to ensure no regressions issues have occurred due to their changes.

Why is that useful?

  • This allows the developer greater test coverage than they could do manually when ensuring their changes have not had regression impact on other components.
  • Allows greater detail comparison than possible reviewing the site manually. E.g. If the font size is increased by 1px then it will be caught which could easily be missed.
  • Allows developers without a full understanding of the project have a safety net about what the site should look like before their changes.

Environment comparison

Using visual testing to compare different environments involves comparing one site against another. The reference images are not stored beyond the test.

A reference image set is generated from one site and then another site is compared against them

Why is that useful?

  • To ensure that the HTML created has been integrated within the website correctly and is rendering out in the same way. This highlights mistakes with the integration or conflicting integrations that are not present on the HTML Demo site.
  • Running regression tests against the Staging and Live instances of a site to see where the changes have occurred.
  • When setting up comparison between a demo and dev site powered by a CMS this can make the tests brittle so the tests pages need to be isolated from changes in content as possible.

More Insights?

View all Insights

Questions?

Global SVP Technology & Engineering

Jonathan Whiteside