Visual regression testing

This repository makes it easy to use BackstopJS to run a comparison between two environments of the same website to see what has visually changed between them.

For example, when upgrading dependencies, it allows you to compare production with your test environment to check that the upgrade has not introduced any defects.

Setup

1. ensure you have NodeJS installed
2. npm install in this directory.
3. Edit config.js to specify your BackstopJS configuration
4. Edit paths.js to define the relevant scenarios for your website - see the BackstopJS documentation for details
5. Edit viewports.js to specify the viewports you want to test
6. Edit .env to define your domains and other options

Running tests

1. npm test

Node will check that all the URLs respond with 200 OK.

If they do, Backstop will take screenshots of equivalent pages on each environment across different breakpoints, compare them, and report where they do not match.

The report will be saved to backstop_data/html_report, and a web browser will automatically open it.

Troubleshooting

Request throttling options

If you find that your requests are being blocked, adjust the options in .env to reduce the number of requests.

HTTP Basic authentication

If your test environment is behind basic auth, edit .env to set BASIC_AUTH_USER and BASIC_AUTH_PASSWORD