Over a million developers have joined DZone.

Generating Reliable Object Selectors Using Spy Web Utility

DZone's Guide to

Generating Reliable Object Selectors Using Spy Web Utility

Learn about object capturing capabilities and how to give immediate feedback on the uniqueness of selectors, with this open source framework.

· Web Dev Zone ·
Free Resource

Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

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 an 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 the 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:

  1. Id: Select element with the specified @id attribute.
  2. Name: Select first element with the specified @name attribute.
  3. Link text: Select link (anchor tag) element which contains text matching the specified link text.
  4. Partial Link text: Select link (anchor tag) element which contains text matching the specified partial link text.
  5. Tag name: Locate Element using a Tag name.
  6. Class name: Locate Element using a class name.
  7. CSS: Select the element using CSS selectors.
  8. Xpath: Locate an element using an XPath expression.

1. 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.

application URL in Object Spy

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 should 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.

Locate captured Xpath selector

Katalon Studio allows users to select Selection Method to locate captured objects. Basic mode is recommended to manual testers who just started their automation journey. With Basic mode, Katalon Studio’s intelligent selector generator will automatically generate a robust and unique XPath selector which combines all properties of captured objects.

For advanced testers who wish to manually input selectors, you 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.

2. Working With the 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 a provided selector and highlighting it.

The XPath selector is commonly used to locate web elements 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:


Xpath: //*[@id='btn-login'][@type='submit']


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


Xpath: //h1[contains(.,'CURA Healthcare Service')]

Xpath object selector


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(). 


Xpath: //ul[@class='list-inline']/li[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).


The Starts-with() method for heading CURA Healthcare Service


Xpath: //h3[starts-with(.,'We Care About')]

Xpath axes methods: These Xpath axes methods are used to find complex or dynamic elements.

a) Following

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.

Xpath: .//*[@id='txt-username']//following::input

b) Ancestor

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.

Xpath: //ul[@class='list-inline']/ancestor::div

c) Child

Selects all children of the current node.


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.


Using Preceding we can identify all nodes that come before the Login button.


Xpath: //ul[@class='list-inline']/child::li

e) Following-sibling:

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.


With the following-sibling method, we can identify a text box which is located on the screen.

Xpath: .//*[@id='txt-username']//following::input

For further instructions and help, please refer to Katalon Studio Tutorials and Katalon Forum.

Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.

automation solution ,web dev ,css ,xpath

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}