Automated visual regression testing with TypeScript, Puppeteer, Jest and Jest Image Snapshot

celine.souchet_1371942's picture
Blog Categories: 

As developers, it is our job to ensure that our users get an experience with no regression.

Like any good developer, when I add a feature or fix a bug, I also create unit, integration, and end-to-end tests. This assures that, when the existing code is modified, nothing is accidentally broken, and confirms that user flows are functional.

Like many people, I've gotten used to using a manual process to visually check that the design looks as intended. Refactoring, adding a new component, or updating a package can sometimes change the appearance of the application. It can get laborious to click through every possible user journey, and we are not immune to forgetting a test or to miss a small visual change.

So how can we make sure that the visuals are always correct and less painful to test?

I had heard of automatic testing for no visual regression before. I looked into using Selenium some time ago, but changed projects and no longer needed it.

Now that I have a need for visual checks in my current project, I’ve found there are different libraries - easy to learn - that can take screenshots of current web pages and compare generated screenshots with a screenshot baseline to find regressions in the user interface (UI).

In this article, I explain how to use one of these libraries - Jest-Image-Snapshot (Jest matcher) - in a Typescript project.

BPMN Visualization project as an example

The goal of this project is to load BPMN content, and render it.

Automated visual tests will simplify our life with each refactoring, addition of a new component, update of the positioning algorithm of the different BPMN elements, or update of the MxGraph rendering library.

The article will describe the prerequisites, configuration steps for each component and tests.

Enjoy your reading and testing! Feel free to share your own experience, any comments are welcome.