BackstopJS

BackstopJS is a tool for catching unintended visual changes to a website or web app. It works by taking screenshots of your pages and comparing them to a set of approved reference screenshots. When something in the visual layout changes, such as a button shifting position or a font size changing, BackstopJS highlights the difference so you can decide if the change was intentional.

The typical workflow has three steps. First you run an initialization command to configure which pages and screen sizes to test. Then you run a test, which takes new screenshots and compares them to the saved references. If the differences look correct, you approve them, which updates the references for future comparisons. This cycle repeats each time you make changes to your CSS or frontend code.

The tool uses a browser running in headless mode, meaning it opens web pages in the background without displaying a visible window. You can script user interactions like clicking or scrolling before screenshots are taken, which lets you test states that require navigation. It can also run inside Docker, a container system, to produce consistent results across different machines.

BackstopJS generates an in-browser report with a visual diff view that shows old and new screenshots side by side, along with a scrubber to compare them interactively. It also produces reports compatible with continuous integration systems, so it can be integrated into automated build and deployment pipelines.

The tool is installed via npm, the standard JavaScript package manager, and can be used from the command line or required directly into a Node.js application. It runs on Windows, macOS, and Linux. The full README is longer than what was shown.