Back to all articles
Visual regression testing and environment comparison with backstop JS

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 InsightsQuestions?
Global SVP Technology & Engineering