Testing for newbies is a bi-weekly series that aims at helping novices in testing with basic, selective, and relevant digests. These topics cover entry-level test automation knowledge, from a glossary for newbies to the introduction to different testing techniques.
We welcome your recommended topics here, don’t hesitate to let us know!
Questions listed under this topic:
11.Visual testing - What is it?
12. When do we need it?
13. Types of Visual Testing
14. Demo Video
See also: Testing for newbies
Visual testing is an automated process that enables UI testing of web/mobile applications to ensure the software is being displayed to end-users in the visual way it is intended to. Visual testing uses an AI engine to focus on AI image comparison, in which you compare visible output against the baseline image. This solution helps reduce human error by using AI-powered functions like pixel-by-pixel detection, text-change detection, and layout-change detection, which capture minor details.
If your software has visual issues, it falls out of the range of functional testing since this type only focuses on software behavior. Visual issues include changes regarding website layout, colors, fonts, or element misplacement. This scenario is the case when we have to check any visual regression.
Another use case is when doing cross-browser testing. Knowing that a website might display the correct format on one browser but not another is crucial. Thus, testing the website across different browsers is essential to detect visual defects.
Manually testing will cost tremendous time and effort along with prevailing defects that the human eyes might miss. Therefore, running visual tests helps spot visual defects faster and more effectively.
The zones are categorized into 3 types:
Identical (green border): UI zones are identically rendered
Distinguable (red border): UI zones look identical for most parts but have some recognizable distinction
Missing/Added (pink border): UI zones that exist in one image but not another
The method compares the pixel resolution of two images to figure out the pixel-to-pixel differences.
The method identifies and maps out similar zones between the baseline and checkpoint images, highlighting the layout differences between the two images.
The method identifies the text context differences between two images
This visual testing is an excerpt of both Katalon Blog Announcing Katalon TestOps April - May 2022 Release and Katalon Doc Visual Testing Overview.
Empower your testing knowledge now by practicing with Katalon!