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.
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%.
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.
Luckily Preflight does all the best practices without a sweat.
See it in action: