Tweaking BackstopJS to improve Visual regression testing

BackstopJS is a wonderful tool for visual regression testing. It has great functionality and simple using.

But the default BackstopJS configuration file is a little bit bulky. It has viewports, paths to scripts and engines, report settings and all your scenarios. If you have a lot of pages or elements to test, this default configuration will become enormous.

So it’s a good thing that BackstopJS has an option to run tests with your own configuration file. Just pass a --config=<configFilePathStr> argument to test using a different config file.

To use a js-module as a config file, just explicitly specify your config filepath and point to a .js file. Just be sure to export your config object as a node module.

So instead of backstop.json we now can use something like this

And then we can store scenarios wherever we want. For example, in a special /tests folder.

Here is an BackstopJS tests example with this configuration:

Command npm run test will start backstop test --docker --configPath=backstopConfig.jscommand and after the tests are done,
visual report will be opened in the browser.