Skip to content

Checking for visual changes with BackstopJS

With my site deployed to Netlify, but still living on a preview URL, I wanted to do a quick visual regression test against the old GitHub Pages build, to make sure nothing had broken.

As I mentioned in the last post, this was more about practising this kind of testing technique, rather than any real expectation that anything would be wrong. Visual testing will likely be more useful later when I do some serious changes to the CSS.

I've been playing around with at Swirrl, but for personal use, I decided to use the open source Backstop.JS, which I'm pretty sure I first heard about via Stuart Robson (thanks Stu!).

After a little while digging around the BackstopJS README I found the commands that I needed.

Setting up BackstopJS

There's a lot more possible with these kinds of tools, but this was enough for me to get started. Testing just 7 pages times 4 breakpoints gives me 28 tests, so doing this manually would become difficult pretty quickly.

Example report

Here's a copy of my report, as you can see everything passed, so there isn't much to see.