Automated Visual Testing - A Game Changer in the space of Intelligent QA

Share This Story

Abstract

In this fast-paced world driven by technology, there are various channels and innovations coming up day by day to access any software product or service. To cope up with latest trends and quicker time to market, software testing and quality assurance need to be embedded in early phases of development. In addition, there is a need to look for every avenue to expedite the tests without compromising on quality and that’s where the automated software testing tools come to into picture which help with the functional tests. In this article, we will see what visual testing is and how its strategic adoption of these AI (Artificial Intelligence) powered tools help bring in the right ROI (Return on Investment) and quality.

What is Visual Testing?

Visual Testing in software is the process of validating the visible aspects of the application’s user interface. The focus of visual tests would be to ensure the layout and appearance of various elements present on the interface. Some of the examples of visual correctness are to ensure the images are not distorted, buttons not overlapping, colour, graphic etc are displayed appropriately. While all these are performed manually by human testers, there is a need to valid these quickly to aid quicker release cycles without slipping any defect to production. With the increased adoption in artificial intelligence (AI), there are automated visual testing tools that support visual testing across various dimensions (screen resolution, browsers, OS etc.)

Why Visual Testing is Important?

User Interface and User Experience are the first that that a customer would experience when using a software product. With the rapid adoption of Continuous Integration (CI) and Continuous Deployment (CD), It’s very important to ensure no issues are injected with constant code updates. With changes like updates to browser versions (ex: internet explorer 11 to Edge transition by June 15,2022 is a classic example), there is need to ensure the UI and UX is not impacted across browsers, operating systems, and devices.

Use Cases for Visual Automation Tools

Below are some candidate scenarios where automated visual testing tools come to rescue

– Large user base for the application and visual defect impact is significant
– Frequent and fast paced deployments
– Application/Product leveraged across various devices (mobiles, tablets etc.), operating systems, and platforms

Visual tests cover the below aspects which the conventional automation tools would not generally cover them

Options to Evaluate before you finalize on an Automated Visual Testing Tool

Each organization and project would have diverse business needs driven by the key factors around budget, schedule, quality, and the impact of quality to business. Before zeroing on any automated visual testing tools, we would recommend a thorough analysis and below are some of the key pointers.

1. Volume of Tests:

The volume of screens and the combinations across which the visual tests need to be performed should be analysed. If the application must be validated just on single agreed browser and OS, say for example, it’s an application that should be validated on Chrome 9.6 and Windows 10 only, a quicker approach would be to perform manually. However, if the scenario is that the application user interfaces must validated across desktops, tablet devices, mobiles and support Edge, Chrome, Mozilla, Opera etc., the best approach is to go for one of the AI powered visual testing tool

2. Scalability and Applicability:

Scalability and applicability are one of the import aspects to consider before making the investment on any tool. Analysis and review need to be performed to see if it’s a point in time need or would visual testing be needed across the entire portfolio of software development effort across the enterprise

3. Check for any open-source options:

We have many open-source tools and libraries available in the marketplace that support image comparisons (pixel by pixel), however they are not as robust as the commercial tools which are additionally powered by AI (Artificial Intelligence) And ML (Machine Learning) algorithms. However, suggest performing the feasibility to check the applicability to your test needs.

Below are the sample POCs performed to check few use-cases which involves limited screens and limited volume of tests

Example 1:

Validate the visual tests of a screen on IE11 with Edge. (PS: I tried this given the lack of support of IE11 for windows desktops from June 2022 and thought can be used as an easy spot check for important links/screens across applications)

Steps:

1. Save the snapshots of the link across IE11 and Edge
2. Use the python program and OpenCV module to compare the images
3. Print the similarity on console and to identify the difference if any

Code Snippet Used:

Program Output:

The below image shows the sample test images used and the output window generated by the program which highlights the areas of difference.

Example 2:

Validate two random images to find the difference

Steps:

1. Save the two pictures which appear similar
2. Use the python along with Image and ImageChops modules
3. Print the similarity on console and to identify the difference

Code Snippet Used:

Program Output and Test Images Used:

While opensource allows us work through the various image comparison techniques, it still has limitations where it might not work on all image types and modes. In these situations, the AI powered tools which has added AI& ML algorithms coded on top of the existing libraries come handy. In addition, the commercial tools provide a seamless support and additional features and reporting mechanisms. It’s always recommended to consider automated visual testing tools to ensure the screen rendering is intact and no issues are leaked to production.

Conclusion and Key Takeaways:

Visual testing is an important aspect that should be included in the testing strategy of modern-day applications. This should be performed at various stages before it is pushed to production. While most of the open-source tools provide the ability to automate and test applications it doesn’t comprehensively include validation of image distortion, UX distortion with varying resolutions and visual look and feel across devices and systems. A thorough analysis of the usage and scalability should be performed and post that having these automated tools along with the other functional tool ensure higher test coverage and brings in the time efficiency by supplementing human effort.

Know our Super Writer:

Vinod Gopishetty

Senior Manager - Quality Engineering, Enquero

Vinod has over 15+ years of experience in delivering large scale projects across diverse industries and immense experience in the quality engineering space. Vinod is responsible for the go to market strategies, forming alliances and further strengthening the Quality Engineering practice.