Visual Regression Testing

Introduction

There is more than one contract that the front-end must adhere to. These include a functional contract with the user, a communication contract with the server, and the visual contract. For the latter, we implement a visual design system and strive to earn every view conformed within the contract.

Many issues stem from testing the visual aspect of a front-end application. Pixel-by-pixel comparisons are heavy, slow and unreliable most of the time. This is because visual regression tests are based on image comparisons. Our code must take a screenshot of a web page and compare it with the previous screenshot. This task is quite time-consuming. While there are f many NPM modules that perform this action for us, they are slow. Moreover, they often display false negatives, which makes users confidence in the system relative to the context.

For visual regression tests, we usually set a tolerance ratio that does not care if, for example, “less than 2% of the pixels are different”. Examine the next image to learn why this ratio needs to be set.