Your first BackstopJS test

There are only a few commands between you and a successful first test. Yay!

From the command line, globally install BackstopJS.

$ npm install -g backstopjs

Check that it installed successfully.

$ backstopjs -v

Make a directory to store your project.

$ mkdir <folder_name>

Enter that directory.

$ cd <folder_name>

Initialize a new BackstopJS project in that directory.

$ backstop init

Navigate to your IDE of choice and open your project directory there. You'll have two things in there: a directory called backstop_data and a file called backstop.json.

Want to learn more about json? I like this resource.

Open the backstop.json file. There are two fields you need to change here. Update the value of "label" to a title of your choice and the value of "URL" to the address of the site you're testing. For example:

"label": "My first test",
"url": "https://google.com"

To create reference images:

$ backstop reference

To create test images and an HTML report:

$ backstop test

To approve your test images:

$ backstop approve

Last updated