Regression Testing by Adding BackstopJS to your Website

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

Run 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.

"scripts": {
    "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`.

Documentation

The full documentation for backstop is available on GitHub.

Filed Under:

1. BackstopJs
2. Frontend Development
3. Web Design