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

Here’s How to Solve Common Web UI Test Automation Problems Using the Katalon Studio

“If an end user perceives bad performance from your website, her next click will likely be on your-competition.com.” – Ian Molyneaux

The advancements in web development technologies make web-based applications very feature-rich, hence it becomes more challenging to automate your web testing.

Website technology features like multi-platform support, cross-browser, and responsive design could add more complications & effort to your Web UI test automation strategies.

So if you’re a beginner and starting with web UI test automation, here are some examples on how to handle common problems and make your automation testing more efficient.

Using Katalon Studio

Here are some common challenges of (web) UI test automation

• Wait-time issues
• Iframe Issues
• Pop-up issues in automation
• Issues in locating deep nested elements

Learn how to solve these UI automation issues using the Katalon Studio tool.

Katalon Studio is a free yet powerful automation toolset for web and mobile app testing. It is easy to install and testers can quickly create, run, report, and maintain their automated tests.

This is a demo project built using Katalon Studio. The objective is to help you on handling the Web UI test automation issues mentioned above. You can also download Katalon Studio and demo project from the links given below in this article.

#1) Wait-time issues and solution approach

What is Wait?

A Wait is a tactic used in your test automation scripts to create a pause in-between script steps as you wait on elements to load or an application to respond.

The issues that intelligent waits (Explicit waits are intelligent waits that are confined to a particular web element) helps to address are “false alarms” for issues that are analyzed by engineers to be assessed as script failures and not application failures. When a test fails due to the script itself and not due to an error in the application/web page, it is called a false failure.

These are some common examples of what can cause a False Failure:

• False Fail: One of the biggest failures we see is when a script fails “false fail” due to waiting on the application. Often caused by network latency, database requests, or any number of things related to application or web page functionality.
• Targeted element not present on the page: This kind of failure occurs while waiting for elements to be displayed OR rendered in the browser. The app may be up and running but certain elements may not be loaded yet which makes your test script fail.

How do we approach these test script failures that occurred due to Wait issues described above?

Instead of adding random 5-10 seconds waits for each step, you can try one of the options mentioned below:

• Global variable – A global variable is a variable with global scope, meaning that it is visible throughout the program. You may consider defining 3 different global variables in your test script – short wait, medium wait and long wait. Use these variables in your test script according to the response time of your web application.
• Wait for Page Load – This logic will wait for a page to completely load before running a step in your script.
• Wait For Element Present – It happens sometimes that web elements take a longer time to appear on the page when you are navigating through pages or clicking on buttons or doing something else. “WaitForElementPresent” command will pause selenium until the targeted element is not present on the page. Once the element appears on the page, selenium will go to execute the next command.

Katalon Studio Test Script:

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 browser and navigate to Katalon site'
WebUI.openBrowser('https://katalon.com/')
 
'Wait for Katalon Studio page to load with wait used as Global Variable'
WebUI.waitForPageLoad(GlobalVariable.G_Timeout_Small)
 
'Click on \'Login\' button to navigate to Login page'
WebUI.click(findTestObject('Page_KatalonHomepage/btn_Login'))
 
'Input username'
WebUI.setText(findTestObject('Page_KatalonLogin/txt_Username'), username)
 
'Input password'
WebUI.setText(findTestObject('Page_KatalonLogin/txt_Password'), password)
 
'Click on \'Login\' button to login'
WebUI.click(findTestObject('Page_KatalonLogin/btn_Submit'))
 
'Wait for failed login message to be present'
WebUI.waitForElementPresent(findTestObject('Page_KatalonLogin/div_LoginMessage'), GlobalVariable.G_Timeout_Small)

Test script generated above showing the usage of global variable and Katalon Studio built-in keywords.

#2) Iframe issues and solution approach

What is iframe?

It’s an inline frame of an HTML document embedded in another HTML document of a website. The iframe element is used to insert content from other sources in a web page.

Why is it important to know how to test around iframes?

Verifying text and objects within Iframes can be a challenge. Even though you (as a human tester) can see the text, automation tools will not pick up the text just by identifying the object. You have to tell your script how to traverse the Iframes and select the correct Iframe where the text and object are present.

Iframe Examples:

#1) Katalon Studio forum iframe

(Note: Click on any image for an enlarged view)

Figure 1: Showing the iframe detected & captured

You can see that Katalon Studio Object Spy selects the iframe in the red highlighted area.

Figure 2: Katalon Studio Object spy

Katalon Studio object spy detected and captured the Comment Iframe (Figure 1) as required to verify the objects in that iframe.

#2) JQueryUI-Drag and Drop example:

Figure 3: Showing JQueryUI-Drag and Drop iframe area selection

You can drag the “Drag me around” object to other areas on the iframe.

Figure 4: Katalon Studio Object spy

Katalon Studio Object Spy detected and captured the iframe as shown above in Figure 3.

A typical solution would help you in identifying the source and target elements, and in the context of the correct browser session. Tools such as Selenium offer drag and drop to address this issue up to some extent.

Solution for testing Iframes using Katalon Studio:

Below are a few tips on interacting with drag and drop objects in an Iframe using Katalon Studio.

import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
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
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 WebUiBuiltInKeywords
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable as GlobalVariable
 
'Open browser and navigate to jQuery UI page'
WebUI.openBrowser('http://jqueryui.com/')
 
'Maximize current browser window'
WebUI.maximizeWindow()
 
'Click on \'Draggle\' link'
WebUI.click(findTestObject('Page_jQuery_Homepage/lnk_Draggable'))
 
'Switch to iframe of Demo panel'
WebUI.switchToFrame(findTestObject('Page_jQuery_Drag and Drop Example/ifr_Demo Frame'), GlobalVariable.G_Timeout_Small)
 
'Drag and drop iframe into other position'
WebUI.dragAndDropByOffset(findTestObject('Page_jQuery_Drag and Drop Example/div_Frame_Draggable'), 200, 38)

WebUI.closeBrowser()

The test script generated above is meant for the drag-drop function. Katalon Studio allows you to edit your verification steps in-between the script to verify a particular object in the iframe.

#3) Pop-up issues and solution approach

What is a pop-up?

A pop-up is a graphical user interface (GUI) display area, usually a small window that appears (“pop-up”) in the foreground of the visual interface.

Issues with the pop-up?

As a human, you have the ability to react to actions that occur during your testing, such as a pop-up window unexpectedly occurring.  But as the coder has written, you can only do what your coder has told you to do and that limits your ability to react to unexpected behaviors, such as a pop-up.

Below are a few commonly used pop-up examples that might be a hurdle in your web automation:

1) New browser window

2) Alert: An alert box is often used to make sure that information comes through to the user

3) Custom modal dialog: A modal dialog is a dialog box/pop-up window that is displayed at the top of the current page

4) Native pop-up

Solutions for handling pop-ups with Katalon Studio:

Below are a few tips on interacting with pop-up issues using Katalon Studio.

import com.kms.katalon.core.annotation.SetUp as SetUp
import com.kms.katalon.core.annotation.TearDown as TearDown
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
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
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 java.util.Formatter.DateTime as DateTime
import internal.GlobalVariable as GlobalVariable

'Open browser and navigate to elated site'
WebUI.openBrowser('http://www.elated.com/articles/javascript-tabs/')

'Maximize current browser window'
WebUI.maximizeWindow()

'Click on \'Tweet\' button in iframe'
WebUI.click(findTestObject('Page_Elated/lnk_Tweet'))

'Switch to window that has title \'Share a link on Twitter\''
WebUI.switchToWindowTitle('Share a link on Twitter')

'Enter username'
WebUI.setText(findTestObject ('Page_Share a link on Twitter/txt_Twitter_Login_Username'), email)
 
'Enter password'
WebUI.setText(findTestObject('Page_Share a link on Twitter/txt_Twitter_Login_Password'), password)

Test script generated above showing the usage of Katalon Studio built-in keywords.

E.g:  switchToWindowTitle built-in keyword helps you to handle the pop-up issue.

XPath nesting issues and solution approach

What is XPATH?

An XPath expression is a mechanism for navigating through and selecting nodes from the XML document or it can be used to locate HTML elements.

Here is an example of a nested element:

<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-download" href="#katalon-download">Download</a> <!-- Deeply nested element -->
        </li>
 </div>
  </div>
</div>

#4) Issues in identifying deep nested elements

It’s difficult to identify the element that you want to access, especially when they are deeply nested, as shown the ‘a’ element in the script above.

You may find it difficult to write the XPath manually if you don’t have solid XPath knowledge in order to access that particular ‘a’ element by your automation test tool.

How can we easily identify the nested elements?

• Use XPath: XPath is an effective way to find elements if they can’t be identified by ID, Name, or another attribute AND when they are deeply nested. However, manually identifying the path is difficult without the right tool OR input by engineers that built the functions.
• Use Katalon Studio: Katalon Studio can generate a smart and optimized XPath, It identifies an element by its nearest uniquely identified parent node, so you don’t have to search through the DOM tree.

Figure 7: Katalon Studio Object Spy

Katalon Studio generates the optimized XPath for you automatically when you spy on “Sign up now” object.

This is a demo project built using Katalon Studio, the objective is to help you on handling the Web UI test automation issues mentioned above. You can download the Katalon Studio and demo project from the link below.

• Free Download link – Katalon Studio
• Also Download – Demo Project

Conclusion:

While automating your web testing can be difficult, we hope that the solutions suggested in this article may help you to handle some common web test automation problems and bring value to your test automation.

Video guide: 

Watch this hands-on video on how to avoid common web UI automation risks

=>> Click here to watch the video

About the Author: This is a guest article by Abhishek Kumar. He is the Product Manager at KMS Technology. He combines strategic and tactical management expertise with strong qualifications in software development, software testing, test automation, product management, new venture initiation, business development, project management, and general operations.

You can try this free tool for your web or mobile app automation testing and let us know if you have any problems/queries while using it. You can provide your feedback in the comments section below. We would love to hear from you. 

Further reading => Katalon Recorder Review