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.

katalon-studio-review

Common challenges of (web) UI test automation

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

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:

  • 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 render in the browser. The application may be up and running but certain elements may not be loaded yet makes your test script failed.

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:

  • Global variable – A global variable is a variable with global scope, meaning that it is visible throughout the program. You may consider defining 3 kinds of 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 targeted element not present on the page. Once element will appear on the page, selenium will go for executing 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 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)

iframe_example_1-1

Figure 1: Showing iframe detected & captured

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

iframe_example_1-2

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:

iframe_example_2-1

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

You can drag the ‘Drag me around’ object to other areas on the iframe.

iframe_example_2-2

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

alert

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

custommodaldialog

4) Native pop-up

native-popup

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?

  • 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 DOM tree.

xpath_katalon_studio

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.

Recommended reading

12 comments ↓

#1 Imam dh

hi thanks for sharing
which language is used for scripts and
can we modify scripts after recording?

#2 Abhishek

Hi Imam

For the scripting language, Katalon uses Java and Groovy.
Yes, you can modify the scripts after recording.

Checkout the Katalon documentation
http://docs.katalon.com/display/KD

Regards,
Abhishek

#3 Softcrylic

Thanks for Sharing …

#4 Sumit karande

Vey useful. thanks for sharing

#5 Ganesh B

Excellent article.
Thanks a lot for sharing valuable information.

#6 Long Vu

I try this tool to test on the sample site: phptravels dot net
There are a lot issues with xpath. I has also used the record & play back. The tool cannot recognize the xpath that recorded before.
My test case is very simple:
1. Open FF
2. Go to phptravels.net
3. Click on Tours
4. Click on Search button
Test Cases/Web UI/phptravels.net/New Test Case FAILED because (of) Unable to click on object ‘Object Repository/Web UI/phptravels.net/Page_Travel Business Partner/a_Tours’ (Root cause: com.kms.katalon.core.webui.exception.WebElementNotFoundException: Web element with id: ‘Object Repository/Web UI/phptravels.net/Page_Travel Business Partner/a_Tours’ located by ‘By.xpath: id(“top”)/div[@class=”navbar navbar-static-top navbar-default”]/div[@class=”container”]/div[@class=”navbar”]/div[@class=”navbar-collapse collapse”]/ul[@class=”nav navbar-nav navbar-right go-left”]/li[@class=”go-right”]/a[1]’ not found)

#7 Hung Duy Pham

Hi Long Vu,
According to the error log, your object may not be found due to changes on your testing website. Please try to record your test case again.
If this issue still happens, please send us a ticket for further support (http://katalon.com).

#8 Patrick S

Nice Article by Katalon. Apart from this tool, I would like to add one more user-friendly tool named Testingwhiz. TestingWhiz’s UI automation testing solution validates UI of the web applications & front-end to confirm its accurate appearance across different browsers, platforms and devices.

#9 Sanket

Any free autimation tool for windows applications.. Help appreciated

#10 Paresh

Hi , does this tool support angular 2.0 website automation ?

#11 viswanath

Please let me know if python scripts works in your tool.if it doesnt work now, do you have it in your roadmap just as it is like in selenium.

Thanks and Regards,
Viswanath

#12 Hanzo Mairo

@Paresh: I believe Katalon Studio support angular 2.0, as long as it is a running website.
@viswanath: I think Katalon Studio support Groovy And Java only

Leave a Comment