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

“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 more feature-rich, hence it becomes more challenging to automate your web testing.

Website technology features like multi-platform support, cross-browser, 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.

What You Will Learn:

Common challenges of (web) UI test automation

Let’s learn how to solve these UI automation issues using 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:

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

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

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 a 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 the human tester) can see the text, automation tools will not pick up the text by just 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 enlarged view)

Figure 1: Showing 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 few tips on interacting with drag and drop object 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 drag-drop function. Katalon Studio allows you to edit your verification steps in-between the script to verify a particular object in iframe.

#3) Pop-up issues and solution approach

What is 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 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 code that a coder has written, you can only do what your coder has told you to do and that limits your ability to react to the unexpected behaviors, such as a pop-up.

Below are few commonly used pop-up examples which 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 on top of the current page

4) Native pop-up

Solution for handling Pop-up with Katalon Studio:

Below are 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 deeply 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 to identify the nested elements easily?

Figure 7: Katalon Studio Object Spy

Katalon Studio generated 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 Katalon Studio and demo project from the link below.

Conclusion:

While automating your web testing can be difficult, we hope that the solutions suggested in this article may help you to handle the 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.