Ester Štrochová: Benefits of automated visual testing
Even a tiny visual error on a website or app can have a negative impact on the user experience. And a big banking client like Moneta Money Bank can't afford that. That's why we launched a pilot project of automated visual testing to provide a pixel-perfect solution.
Why not underestimate visual testing?
When we say software bugs, we usually think of failures and unexpected behavior caused by errors in the system logic. We detect these errors by performing functional tests as early as possible. However, sometimes a tester may miss other types of errors that are more obvious and recognizable to the user and ultimately more disruptive. We are talking about so-called visual errors.
It is visual errors that cause the interface to display incorrectly and thus degrade the user experience for customers and clients.
Therefore, it is also important to detect these errors early on, as they can have a very negative impact on the usability and accessibility of an application or website and thus have a direct impact on UX.
To detect these visual bugs, visual regression tests are used to check whether the appearance of the application has undergone unexpected changes by changing the code, by first taking a screenshot (default state) of the application and after each test, checking whether it has changed relative to that. And they can detect if visual errors have just occurred after the changes were made to the system.
Benefits of automated visual regression testing
Visual regression testing software analyzes images "pixel by pixel" looking for changes that are not necessarily visible to the human eye but potentially visibly different to a computer or device. For example, in a new browser version, several subpixels may be differently rounded, and the image in question is slightly shifted by one pixel, which a computer would immediately understand as a difference. Still, it would be undetectable with superficial inspection by human eyes.
1) Speed: AVRT can automate processes that would otherwise have to be performed manually, making the testing process easier and faster.
2) Reliability: AVRT can be set up to perform the same test in many different environments, browsers or with different software versions, reducing the risk of errors caused by manual testing.
3) Objectivity: AVRT automatically compares the current version with a reference version, reducing the subjectivity associated with manual testing.
4) Ability to capture changes: AVRT can detect even small changes in layout or design, which is especially useful for testing websites or mobile apps.
5) Ability to test extensively: AVRT allows you to run many tests in a short amount of time, allowing you to test multiple variations and combinations.
Moneta Money Bank: Automated regression testing speeds up error detection on banking portal
Thanks to these tests and the benefits they bring, we have launched a pilot project of automated visual testing for our client Moneta Money Bank, which operates a large web portal with an emphasis on a positive user experience.
The fully responsive MONETA Money Bank website is built on the JAVA EE portal Liferay DXP in conjunction with the modern technology of the dynamic frontend library ReactJS. This combination, using a modular architecture, ensures a sustainable approach for further agile development and building the structure and content of the website. It uses optimization in the form of adaptive images, GZIP data compression or stripping, for example.
The website's content is created and edited by the client according to his needs. Therefore, during these web modifications and changes, the human factor often intervenes negatively, which can cause the web interface to break visually even due to a small unintentional error.
Therefore, in the pilot phase, we are providing visual checking for ten major sites, using BrowserStack's Percy.io tool, which is currently the leader in automated site appearance checking, mainly due to the combination of the quality of the pixel-by-pixel algorithm and the time required to check a large number of screenshots.
To reflect our client's needs, we have also created a solution that supports different viewports, and we are currently actively checking the viewport for full HD, mobile devices and tablets.
Percy.io simply speeds up testing and catches even small unwanted visual changes often occurring as side effects of code changes or libraries used. Thanks to the automation process, the client saves time, money and results in a user-friendly web design without unwanted bugs.
