Published: December 6, 2023
Regression Testing by Adding BackstopJS to your Website
Don't get caught out by changing the colour of one thing on your website but affecting the colour of something you didn't intend to affect.
Backstop is a frontend regression testing tool. We use it to check that any changes we make to the frontend are deliberate, and we do not cause regressions.
Here's a video showing how to add BackstopJS to your website to help with regression testing.
Get the things you need
npm install backstopjs to get the packages that you need. Backstop suggests to use the
-g flag to install it globally, but I prefer to do it locally so if any other developer works on the site, they won't have to have backstop installed on their machines.
Get the reference files
Next, if you do not have reference files yet (screenshots of the current version of the site), you need to get these.
backstop reference is the command to run to generate these. However, since we don't have backstop installed globally, let's edit our package.json file to replicate these commands with the local version of backstop.
"backstop:init": "./node_modules/.bin/backstop init",
"backstop:reference": "./node_modules/.bin/backstop reference",
"backstop:test": "./node_modules/.bin/backstop test",
"backstop:approve": "./node_modules/.bin/backstop approve"
Now, run `npm run backstop:reference` to get these files. When you run your tests, backstop will check your version of the site against these file to make sure there are no regressions and anything that has changed was supposed to have changed.
Run the tests
After you get the reference files, you can now run your tests. You do this by running
npm run backstop:test. This will then take a screenshot of each page listed in the backstop.json file and compare those with the reference screenshots we created above.
The output of these tests is then read to a HTML file so you can view the report on the web.
Check the results
You can see the results of your tests at `<your-local-domain>/path-to-backstop/backstop_data/html_report/index.html`, for example: `mark.local/tests/backstop/backstop_data/html_report/index.html`.
The full documentation for backstop is available on GitHub.