How to Solve the Common Web UI Test Automation Problems Using the Katalon Studio Free Toolset

“When your website demonstrates poor performance, it’s more likely that users will go to your competitor’s site.” – Ian Molyneaux

The advancement in web development technologies has enriched web applications with extensive functionality, which has made web testing automation considerably harder.

The inclusion of features such as support for multiple platforms, cross-browser compatibility, and responsive design contributes complexity and labor to your web UI test automation tactics. 

If you’re a novice entering web UI test automation, these are a few suggestions to help you overcome common problems and improve your automation testing proficiency..

Typical issues faced in web UI test automation

• Problems with wait-time
• Dilemmas with iframes
• Automation issues with pop-ups
• Challenges in discovering deeply nested elements

Let’s delve into how these UI automation struggles can be resolved using the Katalon Studio tool.

Katalon Studio is a potent and free toolset for both web and mobile app testing. It is easy to set up and permits testers to swiftly build, operate, report, and maintain their automated tests.

This article includes a demo project that uses Katalon Studio to assist you in managing the earlier mentioned web UI test automation issues. You can acquire Katalon Studio and the demo project using the links provided below.

#1) Approach to resolve wait-time problems

What are Wait-time issues?

Wait-time problems pertain to the mandatory delays or pauses in test automation scripts that allow elements to load or the application to respond.

The smart wait mechanisms (such as explicit waits) assist in addressing false negatives concerning issues under evaluation. These waits concern script failures rather than application failures. When a test fails due to the script, it is termed a false negative.

Typical instances causing a false negative:

• False Fail: A significant failure arises when a script incorrectly fails to wait for the application. This is frequently triggered by network latency, database requests, or other aspects correlated to application or web page operation.
• Targeted element not present on the page: This failure happens when elements are not loaded yet, causing the test script to fail even though the application is active and operational.

Strategy to tackle test script failures induced by Wait issues:

Instead of adding random 5-10 second waits for each stage, consider the following options:

• Global variable: Employ global variables with short, medium, and long wait periods in your test script. Use these variables in line with the response time of your web application.
• Wait For Page Load: Employ logic that waits for the full loading of a page before executing a step in your script.
• Wait For Element Present: Utilize the “WaitForElementPresent” command to halt the automation until the targeted element appears on the page.

Test Script example with Katalon Studio:

import internal.GlobalVariable;
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCaseFactory as TestCaseFactory
import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
import com.kms.katalon.core.testdata.TestDataFactory as TestDataFactory
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
 
'Open the browser and navigate to the Katalon site'
WebUI.openBrowser('https://katalon.com/')
 
'Wait for the Katalon Studio page to load with the wait used as a Global Variable'
WebUI.waitForPageLoad(GlobalVariable.G_Timeout_Small)
 
'Click on the 'Login' button to navigate to the Login page'
WebUI.click(findTestObject('Page_KatalonHomepage/btn_Login'))
 
'Enter the username'
WebUI.setText(findTestObject('Page_KatalonLogin/txt_Username'), username)
 
'Enter the password'
WebUI.setText(findTestObject('Page_KatalonLogin/txt_Password'), password)
 
'Click on the 'Login' button to log in'
WebUI.click(findTestObject('Page_KatalonLogin/btn_Submit'))
 
'Wait for the failed login message to be present'
WebUI.waitForElementPresent(findTestObject('Page_KatalonLogin/div_LoginMessage'), GlobalVariable.G_Timeout_Small)

The aforementioned test script displays the application of global variables and keywords provided by Katalon Studio.

#2) Handling Iframe issues and the resolution method

Definition of an iframe?

An iframe, or inline frame, enables you to incorporate content from other sources within an HTML document.

Why is it essential to test around iframes?

Validating text and objects inside iframes can be demanding. Automation tools often grapple with detecting the text by merely identifying the object. It is crucial to detail the traversal path for iframes and pick the right iframe where the text and object are located.

Examples of iframes:

#1) Katalon Studio forum iframe

(Note: Select any image for an expanded view)

Figure 1: The specified and captured iframe

Katalon Studio’s Object Spy picks the iframe within the area highlighted in red.

Figure 2: Katalon Studio’s Object Spy

Katalon Studio’s Object Spy identified and secured the Comment Iframe (Figure 1) to facilitate the verification of objects inside that iframe.

#2) JQueryUI-Drag and Drop example:

Figure 3: The specified frame area for JQueryUI-Drag and Drop

The ‘Drag me around’ object can be dragged to different areas within the iframe.

<img class=”alignnone wp-image-10498″ src=”https://

Related