Handling Automation Challenges using Katalon Studio~ Part-2
In continuation of my previous blog post Handling Automation Challenges using Katalon Studio Part-1, I want to elaborate the steps to handle even more automation challenges, listed below:
- Handling deep nested elements
- Image comparison
Handling deep nested elements:
Detecting UI elements of an application is crucial for automation since they are the main objects in test scripts development.
However, identifying the elements which doesn’t have common attributes or which are deeply nested within another element is challenging.
A deep nested element can be identified using an XPath expression. However it does require complete knowledge over the Document Object Model (DOM) for a webpage since the deep nested elements cannot be captured by a common set of properties such as ID/Class/Name/ClassName and so on.
Below is an example of a deep nested element which represents a ‘Sign In’ button:
<div class="container">
<div class="navbar-collapse navbar-right" aria-expanded="true">
<div class="nav-bar-decorated"
<ul class="nav navbar-nav">
<Li>
<a class="pbtn-Signin" href="#signin">Sign In</a> <!-- Deeply nested element -->
</li>
</div>
</div>
</div>By using Katalon Studio’s object spy, we can identify and optimize XPath for HTML elements regardless of how deeply they are nested. We can use these XPaths to identify elements without having to search through the DOM tree.
The picture below illustrates how Katalon Studio generates and optimizes XPath automatically when we spy on the ‘Sign In’ object (a nested object) of a website.
What is Visual Testing?
Visual testing is the key concept of comparing images and ensuring the UI of an application appears accurately in terms of shape, size, and position to all users, regardless their device type. Katalon image comparison is purely based on visual testing concepts and comparison is done based on different visual aspects of the frame captured.
Handling image comparison:
From Katalon Studio version 7.7 onwards, there’s an in-build option available concerning Visual testing. It’s introduced within “Test Ops” module.
We need to use the below keywords in the script to enable visual testing:
//For Web UI
WebUI.takeScreenshotAsCheckpoint('current_viewport')WebUI.takeFullPageScreenshotAsCheckpoint(checkpointName, ignoredElements, flowControl)WebUI.takeAreaScreenshotAsCheckpoint(checkpointName, rect, flowControl)
Note: rect is the rectangle which defines location and size of the area we want to take screenshot//For Mobile
Mobile.takeAreaScreenshotAsCheckpoint(String checkpointName, Rectangle rect,List<TestObject> ignoredElements, Color hidingColor, FailureHandling flowControl)Mobile.takeScreenshotAsCheckpoint(String checkpointName, List<TestObject> ignoredElements, Color hidingColor, FailureHandling flowControl)
Just after, follow the steps given below:
- Execute the test suite from Katalon or any CI tool integrated
- Launch Katalon TestOps portal and navigate to Visual Testing tab
- Click on the run and check the ‘Checkpoints’ tab
The ‘Baseline’ image(s) are captured automatically from the first run, which will be used for comparison with subsequent sets of test runs. In a real world scenario, we should run the current production version of the app and capture baseline images and compare with test versions to make sure there is no ‘visual’ change in the UI.
Once the comparison is completed, Katalon generates an output, showcasing all mismatches found under the Checkpoints tab, such as being illustrated below:
There is an option to update the ‘Baselines’. Ideally, once our QA tests are completed and we plan to promote the changes to production, we will have the latest version updated as ‘Baseline’ using the below option available in the test runs.
To sum up, Katalon Studio, featuring its TestOps module is a powerful set of features to be used to confront and handle both, nested elements and image comparison, efficiently.
I hope you enjoyed reading this article and you know the drill — clap, comment and share. Cheers, Karthik
