Generating reliable object selector using Spy Web utility
Estimated reading time: 5 minutes
Katalon Studio Spy Web Utility provides an intelligent object capturing capability and immediate feedback on the uniqueness of selectors. There are two widely used selectors: CSS and XPath.
Locators are object attributes which are used to build up XPath or CSS selector. Locators help find and identify elements on the Web page under test. Katalon Studio builds the final XPath selector (Basic mode) by using any active object locators from users to locate Web Elements.
With CSS or XPath mode of Selection Method, users can further input and edit XPath or CSS object to identify objects on Web UI.
The following are some Web element locators:
- Id: Select element with the specified @id attribute.
- Name: Select first element with the specified @name attribute.
- Link text: Select link (anchor tag) element which contains text matching the specified link text
- Partial Link text: Select link (anchor tag) element which 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 a XPath expression.
How to find object locators
Step 1: Click on Spy Web on the Katalon Studio main toolbar.
Step 2: The Object Spy window is shown as the following.
Step 3: Type the application URL in the URL text box and select the desired browser. Click on Start.
Once you click on Start, Katalon Studio will launch the browser and navigates to the respective website.
Step 4: To capture test objects, hover the mouse over them. The focused web object would be highlighted.
By pressing the <Alt + ~> keys the focused object will be highlighted green, which means that it has been stored in the Captured Objects list.
Katalon Studio will automatically capture all available properties of captured objects. You can change the folder name and edit the value of any properties.
Katalon Studio allows users to select Selection Method to locate captured objects. Basic mode is recommended to manual testers who just started automation journey. With Basic mode, Katalon Studio's intelligent selector generator will automatically generate a robust and unique XPath selector which combined all properties of captured objects.
For advanced testers who wish 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. Select a folder to add the captured objects into. Click OK when done.
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 element with provided selector and highlighting it.
XPath selector is commonly used to locate web element in Web UI testing. The following guide shows how to leverage Katalon Studio Spy Utility to locate web element with XPath selector.
- Checking Multiple Attributes:
As an example, you can identify the login button with multiple attributes
Contains() is a method used in an XPath expression. It is used when the value of any attribute changes dynamically such as login information.
Contains method for heading CURA Healthcare Service
//h1[contains(.,'CURA Healthcare Service')]
Last() is a method used in an XPath expression. It is used to get the very last node.
There are 3 Social Icon Links, and we want to get the 3rd and last item by using Last()
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 is used to find the element whose attribute changes dynamically. You can also find the element whose attribute value is static (not changing).
Starts-with() method for heading CURA Healthcare Service
//h3[starts-with(.,'We Care About')]
- Xpath axes methods: These Xpath axes methods are used to find complex or dynamic elements.
Selects all elements in the document following the current node( )
By using Following we can identify the Password text box which is located after the Username name field.
This will select all ancestors (parent, grandparent, etc.) of the current node.
In the below screenshot we want to get the ancestors of the 'ul ' tag highlighted in red. These ancestors are highlighted in blue.
Selects all children of the current node.
Using Child we can identify all social links as shown in the below screenshot.
Selects all nodes that come before the current node.
Using Preceding we can identify all nodes that come before the Login button.
Selects the following siblings of the context node. 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.
By following-sibling method, we can Identify Password text box which located after Username name field.
The source code is available to be downloaded here.