Angela Riggs
As websites become bigger and more complex, there are many types of testing that are done to ensure the quality of work. But mistakes are inevitable and can be both frustrating and costly. While back-end testing is fairly standardized, testing your front-end work is more difficult – verifying implementation across a variety of devices or making sure new style changes don’t introduce CSS regressions across the site.
To prevent these regressions, and to verify consistent front-end quality, I regularly implement Automated Visual Regression Testing via an open-source npm package. BackstopJS allows me to capture and analyze the visual state of my websites and web apps, comparing screenshots over time to catch and report changes.
My team and I use visual regression testing in three ways:
- During active feature development, to make sure our style changes don’t introduce regressions to the rest of the site
- During deploy workflows, to make sure those style changes are implemented on the various environments
- As a smoke test for all deploys on all of our projects, even if there were no style changes, to ensure the site is generally rendering as expected
With this robust process for Automated Visual Regression Testing, we have reduced the number of regressions that get introduced to production, and are able to catch and fix mistakes before they become our clients’ problem.
Angela Riggs, 2018 Technical Presentation, Abstract, Paper
