When To Use Visual Regression Testing?

What is Visual Regression and Assertion?

Regression Testing is used to check that any changes to the system do not break the existing features or functionality. Regression tests are one of the most important parts of almost every test plan in the software development lifecycle. It is easy to break something existing while devs are changing or adding a piece of code. This might cause some unintentional breaks

Visual Regression Testing has the same core values as Regression tests but makes sure the visual aspects of the software is working as it should after certain actions done in the tests. For example, a test changes the profile picture, and visual regression checks the profile picture after it's being loaded and it's the same as the uploaded picture.

A visual assertion checks if anything changed visually after any code changes have been done by comparing the previous state of the screenshot and recent screenshot.

Best Practices

• Automated tests should be understand to detect dynamic content and mimic user behavior;

If there is a graph, there is no way of testing that graph is loaded on the screen. This when the Visual Assertion comes handy. You can compare the baseline with the current graph's snapshot and see if it's greater than 60%.

• Visual checkpoints should be compared based on the same screen sizes to minimize false positives

In different screen sizes, images/graphs might have a different width and height. In this case you want to run the tests on multiple screen sizes with individual baseline snapshots. It might be a little tedious to set this up, the solution is below.

• Prefer validation of the individual components where a visual validation is required in that component rather than a complete page visual check.

Easiest Visual Regression Setup?

Luckily Preflight does all the best practices without a sweat.

• It automatically detects what type of baseline it should use for the specific screen size.
• It can compare only some of the components with a dynamic locator. It's even more resilient to CSS selector changes.

Try it for free

See it in action: