Katalon Studio Spy Web Utility (https://docs.katalon.com/katalon-studio/docs/spy-web-utility.html) provides an intelligent object capturing capability and immediate feedback on the uniqueness of selectors. Additionally, there are two widely used selectors: CSS and XPath. Subsequently, in this tutorial, we will look at the steps of Generating reliable object selectors using Spy Web Utility in Katalon Studio.
Locators are object attributes that build up XPath or CSS selector. Additionally, locators help find and identify elements on the Web page under test. Katalon Studio builds the final XPath selector (Basic mode) by utlising any active object locators from users to locate Web Elements.
With CSS or XPath mode of Selection Method, users can provide input and edit XPath or CSS objects to identify objects on Web UI.
The following are some Web element locators:
- Id: Select the element with the specified @id attribute.
- Name: Select the first element with the specified @name attribute.
- Link text: Select link (anchor tag) element that contains text matching the specified link text
- Partial Link text: Select link (anchor tag) element that contains text matching the specified partial link text
- Tag name: Locate Element using a Tag name
- Class name: Locate Element using a class name.
- CSS: Select the element using CSS selectors.
- Xpath: Locate an element using an XPath expression.
Subsequently, we will cover the below topics in this article:
- How to find object locators
- Working with XPath Selector
- Checking multiple attributes
- XPath Axes Methods
1. How to find object locators
1st Step: Click on Spy Web on the Katalon Studio main toolbar.
2nd Step: After that, the Object Spy window opens as shown below.
3rd Step: Type the application URL in the URL text box and select the desired browser. After that, click on Start.
Once you click on Start, Katalon Studio will launch the browser and navigate to the respective website.
Step 4: To capture test objects, hover the mouse over them. Moreover, the focused web object will get highlighted.
By pressing the <Alt + ~> keys, the focused object will be highlighted green. Which, in turn, means that the Captured Objects list stores it.
Additionally, the Katalon Studio will automatically capture all available properties of captured objects. Moreover, you can change the folder name and edit the value of any properties.
Katalon Studio allows users to select Selection Method to find/ locate captured objects. Basic mode is a recommendation to manual testers who just started their automation journey. Moreover, with Basic mode, Katalon Studio’s intelligent selector generator will automatically generate a strong and unique XPath selector which combines all properties of captured objects.
For advanced testers who want to manually input selectors, have the option to select between CSS or XPath mode.
Click on Add to Object Repository from the command toolbar to save objects in Objects Repository. After that, select a folder to add the captured objects. Click, OK when done.
2. Working with XPath selector
Katalon Studio’s object spy further allows advanced users to manually input object selectors with XPath or CSS Selection Method mode. Spy Utility will provide instant feedback by auto-detecting the numbers of matching elements with the provided selector and highlighting it.
Additionally, the XPath selector is commonly used to locate web elements in Web UI testing. Subsequently, the following guide shows how to leverage Katalon Studio Spy Utility to find web elements with an XPath selector.
Checking Multiple Attributes:
As an example, you can identify the login button with multiple attributes.
Xpath: //*[@id='btn-login'][@type='submit']
Contains ()
Contains() is a method used in an XPath expression. We use it when the value of any attribute changes dynamically, such as login information.
Example:
Contains method for heading CURA Healthcare Service
Xpath: //h1[contains(.,'CURA Healthcare Service')]
Last ()
Last() is a method used in an XPath expression. We use it to get the very last node.
Example:
There are 3 Social Icon Links, and we want to get the 3rd and last item by using Last()
Xpath: //ul[@class='list-inline']/li[last()]
Start With ()
The Start-with() method finds the element whose attribute value changes on refresh or any operation on the webpage. In this expression, the starting text of the attribute finds the element whose attribute changes dynamically. You can also find the element whose attribute value is static (not changing).
Example:
Starts-with() method for heading CURA Healthcare Service
Xpath: //h3[starts-with(.,'We Care About')]
Xpath Axes Methods
These Xpath axes methods find complex or dynamic elements.
a) Following
Selects all elements in the document following the current node( )
Example:
By using the following, we can identify the Password text box located after the Username name field.
Xpath: .//*[@id='txt-username']//following::input
b) Ancestor
It will select all ancestors (parent, grandparent, etc.) of the current node.
Example:
In the below screenshot, we want to get the ancestors of the ‘ul ‘ tag highlighted in red. These ancestors highlight in blue.
Xpath: //ul[@class='list-inline']/ancestor::div
c) Child
It selects all children of the current node.
Example:
Using Child, we can identify all social links, as shown in the below screenshot.
Xpath: //ul[@class='list-inline']/child::li
d) Preceding
Selects all nodes that come before the current node.
Example:
Using Preceding, we can identify all nodes that come before the Login button.
Xpath: //*[@id='btn-login']//preceding::input
e) Following-sibling:
It selects the following siblings of the context node. Additionally, siblings are at the same level of the current node, as shown in the screen below. It will find the element after the current node.
Example:
By the following-sibling method, we can Identify the Password text box located after the Username name field.
Xpath: .//*[@id='txt-username']//following::input
Moreover, the source code is available to be downloaded here.
