There are quite a few settings there, but in this article I will focus only on these three:
id : It’s a unique name that is added to all the screenshots created by the tool. You can change it to match your project’s name.
viewports: Here, you can specify screen sizes you want the tool to check in the specified scenarios.
scenarios: This is a place to add/remove/edit scenarios for the tests. Usually, you’ll want to create a new separate scenario for each page/element that you want to test.
You can read in detail what other settings do in the official documentation here.
Testing with BackstopJS: Configuration
Before you change anything, let’s see how it works out of the box. First, you need to create reference files / snapshots of your pages. Running a test without these files will not work because you there is nothing to compare.
So, to create reference files, use this command:
$ backstop reference
$ yarn backstop reference
This will create screenshot files in a backstop_data\bitmaps_reference folder.
Finally, you can run your first test. To do that, use the following command:
$ backstop test
$ yarn backstop test
This command will check your specified scenarios (and viewports) and generate a report in html format and automatically open it in a new window in your default browser. This report (for the default configuration file) will look like this:
In this report, you have a list of specified scenarios (pages/elements) that passed or failed. In our default configuration file, there is a scenario labeled: “BackstopJS Homepage” with page url: https://garris.github.io/BackstopJS/, and viewports labeled: ‘phone’ and ‘tablet’.
Now, you have one reference screenshot and one test screenshot for each viewport (screen size) in the report. You should not expect any of the scenarios to fail because you made the references and test files at around the same time. And indeed, you’ll see in the report that your scenarios have passed the tests.
Let’s now have a look at how you can add your custom scenario, so that you can test a page from your own project. When you initialized backstop, the default configuration file that was created is a JSON file. However, you can also use a JS file for configuration. Using a JS file gives you a lot more possibilities, like using env variables and creating each custom scenario as a separate JS file that is imported into the main backstop configuration file. Similarly you can extract your viewports to a separate file import from there.
When you want to run Backstop with your custom configuration file, you need to tell backstop to use it. This is done via the –config argument. Below, there is an example of running a reference command with custom configuration file named backstop.js that is located in a root folder of your project:
$ backstop reference –config=backstop.js
$ yarn backstop reference –config=backstop.js
For now though, let’s focus on the default JSON configuration file.
In order to add/edit/remove scenarios for your tests, we need to modify “scenarios” in the configuration file: