The Essential Guide to Automated Visual Regression Testing

The Essential Guide to Automated Visual Regression Testing

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.

Project example

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.

typescript puppeteer jest testing programming coding

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HOW TO TEST JAVASCRIPT CODE USING JEST - TEST PURE FUNCTIONS | MOCK GLOBAL VARIABLES | TEST METHODS

Here I show how to test your Javascript code. We will test pure functions (they are the easiest to test, because they don't have side effects). Then we test a function with side effects and we mock a global function using Jest. And finally we test an object method. We also talk about AAA (Arrange Act Assert) pattern here.

Testing with JEST in TypeScript

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.

TypeScript Testing Tips - Mocking Functions With Jest

Tips for mocking functions using TypeScript and Jest. Jest was originally built for JavaScript. Jest is a popular testing framework that covers all aspects of testing including mocking, verifying expectations, parallel test execution and code coverage reports. It's also light on configuration so there's a lot to like.

Where To Learn Test Programming — July 2020 Edition

What do you do when you have lots of free time on your hands? Why not learn test programming strategies and approaches?

How to Integrate Jest and Puppeteer for End-to-End Testing

Learn how to integrate Jest and Puppeteer in your project for End-to-End Testing. Jest is a JavaScript testing framework maintained by Facebook. Puppeteer is a Node library created by Google, which provides a high-level API to control headless Chrome.