When I first heard the term “snapshot testing”, I naively assumed it dealt with image data. You can imagine my disappointment when I found out that it didn’t do any fancy visual regressions, though after using snapshots for a while I’ve come around to appreciate their benefits. However, there was still a gap in my heart for actual snapshots of website regressions.
Recently I became aware of the excellent jest-image-snapshot module, which does exactly what you think it would: testing of visual differences in an automated way. The API functions very similarly to
toMatchSnapshot in Jest:
Snapshotting a webpage
toMatchImageSnapshot is about as easy as it gets:
And using it is even easier:
There’s a lot of stuff happening under-the-hood so let’s dive into it.
toMatchImageSnapshot works identically to the Jest
toMatchSnapshot . It takes care of:
- Creating, naming, and saving the image for you on first-run.
- Finding the image on subsequent executions to compare.
- Doing the delta comparisons, and generating a preview of deltas if there is a difference.
- All the other administrative stuff: removal, updating, and throwing on failure.
Cut chit-chat, where’s the demo?
Below we have Exhibit A, a “mission-critical” log-in window with a friendly welcome-header:
Since this is a window that gets viewed many times a day I want to ensure that it doesn’t change much. So, in a few lines of code I author a test and jest-image-snapshot saves all the details:
Awesome! Now I can go about my day without worrying too much about visual regressions. Fast-forward a few days later and now my test is failing?!?
Shoot! Something happened! Let’s take a look at that image that gets generated in the console:
Here we get a nice shot of the “after”, the diff, and the “before”. It looks like my friendly header message is gone. Once I fix that my tests now pass!
At this point all’s well and good, but we’re missing one thing: how do we capture the screenshots automatically?
You might be thinking about reaching out for old Selenium or some other driver, but I have something else to suggest: Navalia. Navalia is a dead-simple browser-driver with a concise API, a GraphQL front-end, and the ability to scale work on multiple instances. With it, we can easily install a npm module and begin setting up our image capturing.
Visual regression with jest-image-snaphot + Navalia
And that’s it 💥 The first run of this test should produce an image that will be stored in your project, and each subsequent run will diff against it, ensuring things are kapeesh. I heavily recommend you checkout these open-source libraries so you can get your project off of the ground with confidence!