{"id":30,"date":"2025-09-06T08:34:23","date_gmt":"2025-09-06T08:34:23","guid":{"rendered":"https:\/\/blog.kerjarapi.com\/?p=30"},"modified":"2025-09-06T08:54:44","modified_gmt":"2025-09-06T08:54:44","slug":"selecting-elements-using-xpath-for-automation-in-katalon-studio","status":"publish","type":"post","link":"https:\/\/blog.kerjarapi.com\/?p=30","title":{"rendered":"Selecting Elements Using XPath for Automation in Katalon Studio"},"content":{"rendered":"\n

XPath is used to uniquely identify an element in an XML or HTML documents. I have mentioned briefly on how we can use XPath to select an element and use it as an object in automation. For this blog, I want to cover the use of XPath in web testing in more depth. I just want to share how I use custom XPath to select elements, that can work when dealing with dynamic elements, and can be easily parameterized for more flexible use.<\/p>\n\n\n\n

I want to cover some of the ways I use custom XPaths. So I won\u2019t cover all the ways or methods here. But I will share my resource on how I learned it at the end of this blog. I will be using this<\/em><\/a> page for our example in this blog.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Basic XPath element selector<\/h2>\n\n\n\n

For this example, let\u2019s say that I want to select the \u201cDouble Click Me\u201d button, and this is how the HTML structure is:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

By clicking right and selecting \u201cInspect\u201d we can see the element is a button and has attributes id, type, class, and text \u201cDouble Click Me\u201d. We can create a unique XPath selector to select this element. for example:<\/p>\n\n\n\n

\/\/button[@id='doubleClickBtn']\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This will successfully select the button element we want, because it is the only button that has the id \u201cdoubleClickBtn\u201d<\/p>\n\n\n\n
<\/p>\n\n\n\n
Using text(), contains(), and starts-with()<\/h2>\n\n\n\n
This time, instead of using the \u201cid\u201d attribute, let’s use the text of the button, \u201cDouble Click Me\u201d. We can do that by using the \u201ctext()\u201d method.<\/p>\n\n\n\n
\/\/button[text()='Double Click Me']\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This will successfully select the button we want because it\u2019s the only button to have the \u201cDouble Click Me\u201d text.<\/p>\n\n\n\n
Next, let\u2019s try the contains() method. This method lets you select an attribute without typing the whole attribute name or text. For example, to select the same button as last time, we can try:<\/p>\n\n\n\n
\/\/button[contains(text(), 'Double')]\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This time, we only use the button text partially. It will look for a button that contains the text \u201cDouble\u201d and select the element.<\/p>\n\n\n\n
We can also use the starts-with() method, and as the name implies, it can help us select an element by only stating the start of the attribute or text, for example:<\/p>\n\n\n\n
\/\/button[starts-with(text(), 'Double')]\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Using AND & OR statement<\/h2>\n\n\n\n
We can use one or more attributes and texts when selecting. To help us select the element, we can use the AND & OR statements. To select our beloved \u201cDouble Click Me\u201d button, we can try:<\/p>\n\n\n\n
\/\/button[@type='button' and text()='Double Click Me']\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Using the button attribute type \u201cbutton\u201d and the button\u2019s text \u201cDouble Click Me\u201d, we have successfully selected our button again.<\/p>\n\n\n\n
We can also use OR statement:<\/p>\n\n\n\n
\/\/button[@type='button' or text()='Double Click Me']\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
But when using the OR statement, we can\u2019t uniquely find our \u201cDouble Click Me\u201d button. It also selected three other buttons because they too have the attribute type \u201cbutton\u201d. Following the AND and OR statement logic, if any of the statements [@type=\u2019button\u2019] or [text()=\u2019Double Click Me\u2019] is true, then the element is selected.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Using the following-sibling method<\/h2>\n\n\n\n
Let\u2019s see if we can find our buttons using the following-sibling method. We can see in our screenshot below, that our <h1> is on the same level as our divs (marked in green), and each divs has our buttons (marked in yellow).<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
So we can try:<\/p>\n\n\n\n
\/\/h1\/\/following-sibling::div\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
And it will select all three divs after the <h1> that are on the same level.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Using the parent method<\/h2>\n\n\n\n
For this example, let\u2019s say we have found our \u201cDouble Click Me\u201d button, but we want to select the div that contains our button instead. We can do that by using this XPath:<\/p>\n\n\n\n
\/\/button[text()='Double Click Me']\/\/parent::div\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
It will select the parent div from our button element.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Using Ancestor method<\/h2>\n\n\n\n
When using the parent method, we can only select one parent from our element. But what if we want to select all divs that are above our element. We can use that by using the ancestor method:<\/p>\n\n\n\n
\/\/button[text()='Double Click Me']\/\/ancestor::div\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This will select all divs that are above or all the great great parents to our button element.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Selecting SVG element<\/h2>\n\n\n\n
To select and SVG element, there needs to be a little more syntax included. For example in this<\/em><\/a> page I want to click on the \u201cHome\u201d checkbox, and we want to select the svg element. We can do that by adding \u201c\/\/*[local-name()=’svg’]<\/strong>\u201d. So to select out checkbox, we can use XPath:<\/p>\n\n\n\n
\/\/span[@class='rct-checkbox']\/\/*[local-name()='svg']\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
What to do when you can\u2019t uniquely identify the element<\/h2>\n\n\n\n
Sometimes we get into the trouble of not finding the unique XPath to identify our element. I have a simple trick to solve this. Let\u2019s go back to our buttons again. When we try:<\/p>\n\n\n\n
\/\/button[@class='btn btn-primary']\n<\/code><\/pre>\n\n\n\n
It will select all three buttons, because all of them have the same \u201cbtn btn-primary\u201d class. To choose the first button we can use this syntax:<\/p>\n\n\n\n
(\/\/button[@class='btn btn-primary'])[1]\n<\/code><\/pre>\n\n\n\n
Surely as you can guest, to select the second and third button, you can simply change the<\/p>\n\n\n\n
\u201c[1]\u201d into \u201c[2]\u201d and \u201c[3]\u201d. You can try it on this<\/em><\/a> page.<\/p>\n\n\n\n
(\/\/button[@class='btn btn-primary'])[2]\n<\/code><\/pre>\n\n\n\n
(\/\/button[@class='btn btn-primary'])[3]\n<\/code><\/pre>\n\n\n\n
For more resources on XPath, I recommend this<\/a> page to learn more.<\/p>\n","protected":false},"excerpt":{"rendered":"
XPath is used to uniquely identify an element in an XML or HTML documents. I have mentioned briefly on how we can use XPath to select an element and use it as an object in automation. For this blog, I want to cover the use of XPath in web testing in more depth. I just […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,7],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-en","category-katalon-auto"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30"}],"version-history":[{"count":2,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":46,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=\/wp\/v2\/posts\/30\/revisions\/46"}],"wp:attachment":[{"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kerjarapi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}