BackstopJS

BackstopJS is an open-source tool for running visual regression tests. It uses a headless browser to capture screenshots of a website and compare them with previously stored references to detect any visual inconsistencies as early as possible.

We found BackstopJS especially useful when migrating a big amount of pages from one content management system to another. It helped us to spot many small differences resulting from missing CSS or a slightly different page layout that might otherwise have been overlooked.

Introducing and maintaining BackstopJS regression tests in a project takes additional effort. It is not always worth it. In our experience, BackstopJS works best in the following scenarios:

• One-time validation step after e.g., migration.
• Used continuously for pages that are static and rarely change their contents.
• Used to test single components instead of whole pages in combination with e.g. Storybook or KSS style guide (read more about it in our blog post: Front-end automated testing using BackstopJS and KSS style guide).

At the moment, there is no real alternative for BackstopJS, paid platforms such as Chromatic or Browserstack are too complex if all you need is a simple visual regression test setup. At Kiwee, we deem BackstopJS as our go-to solution whenever we consider visual regression testing beneficial for the project.