The Essential Guide to Automated Visual Regression Testing. Like any good developer, when I add a feature or fix a bug, I also create unit, integration, and end-to-end tests. I had heard of automation test for no visual regression before. I will explain how to use one of these libraries — Jest-Image-Snapshot (Jest matcher) — in a Typescript project.
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 will explain how to use one of these libraries — Jest-Image-Snapshot (Jest matcher) — in a Typescript project.
I will use the BPMN Visualization project (version 0.10.0) as an example. (This example has been simplified so it shows more clearly the configuration and features explained in this article.) 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.
I will explain the step by step process of creating a project in TypeScript and setting up a test environment with jest. This example requires basic knowledge of Node.js, npm and Visual Studio Code.
What do you do when you have lots of free time on your hands? Why not learn test programming strategies and approaches?