92. 6% of users say that site design and visuals are the primary factors in purchase action, according to the latest Voucher Cloud infographic. But what about abandonment due to display issues? Put yourself in the shoes of an Internet user for two minutes. You are quietly browsing a website, looking for a brand new bike to enjoy the nice weather for long rides, when suddenly... a big bug makes all the pictures of the bikes superimposed on each other, which makes the display unreadable. Or you've flashed on the bike of your dreams, but you can't find the button to add it to the cart anywhere. That's a pretty big hurdle, isn't it? And that's where the interest lies in regularly performing graphical non-regression tests.
Graphical comparison tests, or visual tests (yes, so many different variations for one and the same thing), are used to verify that the site or mobile application is displayed correctly for all users. Basically, it consists in making sure that each element (buttons, texts, photos, images...) of the same page appears in the right place, at the right size/color/shape, etc. We talk about comparison or non-regression because these tests are used to check that the site or mobile application looks like its previous version to the nearest pixel (pixel perfect) and its legal compliance.
Graphical comparison tests are among the tests that can be easily automated with current technologies. But how does it work? In the context of test automation, this consists of generating, analyzing and comparing screenshots taken during the execution of scenarios, to detect whether elements have changed or moved at the visual level. By configuring a tolerance percentage, the solution evaluates the similarity between the reference image and the image of the current execution.
A simple unwanted color change in a button, a shift in the layout or a difference in a font is enough to make the graphical comparison test scenario fail. We can also take the example of a Mr Suricate for which the customer reviews were no longer displayed and the graphical comparison test detected this bug.
What's more, the graphical non-regression tests (TNR ) can also be used to check the legal displays required for compliance in certain countries (USA and Asian countries in particular).
And why not? Admittedly, the answer is a bit easy and that's not what this article is about, is it? In reality, there are plenty of reasons to do visual tests.
To begin with, we could invoke the same reason for non-regression testing (NRT). Whenever there's a modification or update to the interface, it's important to check that it hasn't disrupted the design or ergonomics. And on the visual side, there are often redesigns or improvements. What's more, with the multiplication of operating systems, web browsers and devices, it's becoming crucial to ensure that the user interface displays correctly on every possibility.
But then, why not just do functional non-regression testing (NRT)? Because they don't usually cover the visual aspects of the site or mobile application. A site can have a broken display and still be functional, except if the objects disappear, so an automaton could very well run a functional scenario on a non-compliant interface. Graphical non-regression tests can therefore fill these gaps and detect potential visual bugs that would otherwise go unnoticed with functional tests.
That said, if there were to be only one good reason to do graphic comparison testing, it would be to ensure the best possible user experience. As we said at the very beginning of this article (and it doesn't hurt to repeat it), 92.6% of users say that site design and visuals are the main factors in the buying action. On the other hand, they don't let any visual bug go by. It only takes one to dissuade them from buying or to make them abandon the site or the mobile application and thus cause a loss of activity and image. And the only way to avoid these bugs is to perform graphic non-regression tests as often as possible.
Any last words? No worries. By delivering a site or application without visual bugs, you are ensuring a superior product, and this not only helps build your credibility and user trust in your company, but also, in turn, your brand image.
Did you understand what graphical comparison / graphical non-regression / visual tests were? Were you doing it before? And if not, did this article convince you to do it? Feel free to share your feedback in the comments!