Testing for newbies (5) - Visual Testing

:pushpin: 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! :blush:

:pushpin: 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

:point_right: See also: Testing for newbies

11. Visual testing - what is it?

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.

12. When do we need it?

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.

13. Types of Visual Testing

:memo: 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

Pixel-based comparison

The method compares the pixel resolution of two images to figure out the pixel-to-pixel differences.

Layout-based comparison

The method identifies and maps out similar zones between the baseline and checkpoint images, highlighting the layout differences between the two images.

Content-based comparison

The method identifies the text context differences between two images

14. Demo Video

:pushpin: This visual testing is an excerpt of both Katalon Blog Announcing Katalon TestOps April - May 2022 Release and Katalon Doc Visual Testing Overview.

:point_right: Empower your testing knowledge now by practicing with Katalon!