https://docs-production-katalon.netlify.app/assets/js/5b1caf40.3a8b25ba.js

1"use strict";(self.webpackChunkKatalon_Docs=self.webpackChunkKatalon_Docs||[]).push([[451],{28453:(e,t,s)=>{s.d(t,{R:()=>l,x:()=>o});var n=s(96540);const a={},i=n.createContext(a);function l(e){const t=n.useContext(i);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),n.createElement(i.Provider,{value:t},e.children)}},33557:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>d,contentTitle:()=>h,default:()=>m,frontMatter:()=>o,metadata:()=>n,toc:()=>c});const n=JSON.parse('{"id":"test-objects/web-test-objects/detecting-objects-with-xpath-in-katalon-studio","title":"Detecting objects with XPath in Katalon Studio","description":"With any application under test (AUT), the detection of UI elements is crucial to automated testing. However, identifying them manually requires much time and experience in HTML.","source":"@site/docs/katalon-studio/test-objects/web-test-objects/detecting-objects-with-xpath-in-katalon-studio.md","sourceDirName":"test-objects/web-test-objects","slug":"/test-objects/web-test-objects/detecting-objects-with-xpath-in-katalon-studio","permalink":"/katalon-studio/test-objects/web-test-objects/detecting-objects-with-xpath-in-katalon-studio","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1764064558000,"frontMatter":{"title":"Detecting objects with XPath in Katalon Studio"},"sidebar":"katalon-studio","previous":{"title":"Selection methods for Web objects","permalink":"/katalon-studio/test-objects/web-test-objects/selection-methods-for-web-objects"},"next":{"title":"Use variables in Web test objects","permalink":"/katalon-studio/test-objects/web-test-objects/use-variables-in-web-test-objects"}}');var a=s(74848),i=s(28453),l=s(86025);const o={title:"Detecting objects with XPath in Katalon Studio"},h=void 0,d={},c=[{value:'<a class="anchor_top_offset"></a>What is XPath?',id:"what-is-xpath",level:2},{value:'<a class="anchor_top_offset"></a>Absolute XPath',id:"absolute-xpath",level:3},{value:'<a class="anchor_top_offset"></a>Relative XPath',id:"relative-xpath",level:3},{value:'<a class="anchor_top_offset"></a>How to identify nested elements?',id:"how-to-identify-nested-elements",level:2},{value:'<a class="anchor_top_offset"></a>What is a nested element?',id:"what-is-a-nested-element",level:3},{value:'<a class="anchor_top_offset"></a>Identify nested elements using XPath',id:"identify-nested-elements-using-xpath",level:3},{value:'<a class="anchor_top_offset"></a>Deal with dynamically changing elements',id:"deal-with-dynamically-changing-elements",level:2},{value:'<a class="anchor_top_offset"></a>What is a dynamic element?',id:"what-is-a-dynamic-element",level:3},{value:'<a class="anchor_top_offset"></a>Deal with dynamic elements using XPath',id:"deal-with-dynamic-elements-using-xpath",level:3}];function r(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"With any application under test (AUT), the detection of UI elements is crucial to automated testing. However, identifying them manually requires much time and experience in HTML."}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"This task becomes even more challenging for elements that could not be identified by their common attributes, elements that change dynamically, or elements that are located deep within another element (nested elements)."}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"This article shows you how to use XPath in Katalon Studio to deal with nested elements and dynamic elements."}),"\n",(0,a.jsxs)(t.h2,{id:"what-is-xpath",children:[(0,a.jsx)("a",{id:"id_1",class:"anchor_top_offset"}),"What is XPath?"]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"XPath stands for XML Path Language. In an XML document, XPath   uses path expressions to navigate through elements, attributes, and   select nodes or node-sets."}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["On a webpage using the HTML DOM (Document Object Model)   structure, you can also use XPath to find the location of any   element. To learn more about HTML DOM, you can refer to the   W3schools documentation: ",(0,a.jsx)("a",{className:"xref j-external-link",href:"https://www.w3schools.com/whatis/whatis_htmldom.asp",target:"_blank",children:"What is     the HTML DOM?"})," "]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"There are two types of XPath: absolute XPath and relative XPath   (smart XPath)."}),"\n",(0,a.jsxs)(t.h3,{id:"absolute-xpath",children:[(0,a.jsx)("a",{id:"id_2",class:"anchor_top_offset"}),"Absolute XPath"]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"XML documents are treated as trees of nodes, in which the   topmost element of the tree is the root element."}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"Absolute XPath is the path starting from the root. An absolute   XPath starts with HTML and forward-slash (/)."}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["For example:   ",(0,a.jsx)("code",{className:"ph codeph",children:"/html/body/div[1]/div[1]/div/div[3]/div[2]/div"})," "]}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["In Katalon Studio, the XPath capture strategy for absolute XPath   is ",(0,a.jsxs)("code",{className:"ph codeph",children:["x

1path",":position"]}),". Using absolute XPath is a simple   way to solve the problem when dealing with dynamic elements.   However, if something changes in the structure of your web page,   this XPath might fail. Therefore, absolute XPath is not recommended   for detecting dynamic elements."]}),"\n",(0,a.jsxs)(t.h3,{id:"relative-xpath",children:[(0,a.jsx)("a",{id:"id_3",class:"anchor_top_offset"}),"Relative XPath"]}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["You might want to use the relative XPath method to observe a   pattern in the attribute values like ID or Class of the web   element. Relative XPath (smart XPath) is the path that starts from   the middle of the HTML DOM structure. Unlike the absolute XPath   that starts from the root, relative XPath starts with the double   forward-slash (//), which means it can search for the element   anywhere on the webpage. Therefore, you can start from the middle   of the HTML DOM structure without writing a long XPath. For   example: ",(0,a.jsx)("code",{className:"ph codeph",children:"//a[contains(text(), 'Katalon Studio')]"}),"."]}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["You can find a list of XPath capture strategies in Katalon   Studio using relative XPath in this document: ",(0,a.jsx)("a",{className:"xref",href:"/katalon-studio/test-objects/web-test-objects/selection-methods-for-web-objects",children:"Configure     XPath"}),"."]}),"\n",(0,a.jsxs)(t.h2,{id:"how-to-identify-nested-elements",children:[(0,a.jsx)("a",{id:"id_4",class:"anchor_top_offset"}),"How to identify nested elements?"]}),"\n",(0,a.jsxs)(t.h3,{id:"what-is-a-nested-element",children:[(0,a.jsx)("a",{id:"id_5",class:"anchor_top_offset"}),"What is a nested element?"]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"Elements can contain other elements. Nested elements are   children of their parent container."}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"For example, the download link in the script below is an element   nested in another."}),"\n",(0,a.jsx)("pre",{xmlns:"http://www.w3.org/1999/xhtml",className:"pre codeblock",children:(0,a.jsxs)("code",{children:['<div class="container">',"\n","    ",'<div class="navbar-collapse navbar-right">',"\n","        ",'<div class="nav-bar-decorated">',"\n","            ","<ul>","\n","                ",'<li><a class="pbtn-download" href="#katalon-download">Download</a> \x3c!-- Deeply nested element',"  ","--\x3e</li>","\n","            ","</ul>","\n","        ","</div>","\n","    ","</div>","\n","</div>","\n"]})}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["It is difficult to identify a nested element, such as the   ",(0,a.jsx)("code",{className:"ph codeph",children:"<a>"})," element in the script above. To define the   XPath manually, we need to have solid knowledge about the DOM   structure of the webpage."]}),"\n",(0,a.jsxs)(t.h3,{id:"identify-nested-elements-using-xpath",children:[(0,a.jsx)("a",{id:"id_6",class:"anchor_top_offset"}),"Identify nested elements using XPath"]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"Identifying XPath is an effective way to find nested elements that cannot be identified by common properties such as ID, name, or class. Katalon Studio can generate and optimize XPath for HTML elements, regardless of how deeply nested they are. You can use these XPaths to identify elements without searching through the DOM tree."}),"\n",(0,a.jsxs)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:["The example below illustrates how Katalon Studio generates and optimizes XPath automatically when you spy on the ",(0,a.jsx)("strong",{className:"ph b",children:"Make Appointment"})," object (a nested element)."]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:(0,a.jsx)("img",{className:"image",width:850,src:(0,l.Ay)("https://tw-cdn.katalon.com/katalon-studio/ks-855-capture-object-btn.png"),alt:"detecting elements with XPath by Katalon Studio"})}),"\n",(0,a.jsxs)(t.h2,{id:"deal-with-dynamically-changing-elements",children:[(0,a.jsx)("a",{id:"id_7",class:"anchor_top_offset"}),"Deal with dynamically changing elements"]}),"\n",(0,a.jsxs)(t.h3,{id:"what-is-a-dynamic-element",children:[(0,a.jsx)("a",{id:"id_8",class:"anchor_top_offset"}),"What is a dynamic element?"]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"One of the challenging and time-consuming tasks in test   automation is to modify test scripts when the AUT is changed,   especially in the early stages of software development. Developers   may change identifiers and elements quite often from one build to   another. In addition, during the execution, the AUT elements may   change dynamically."}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"Dynamic web elements are elements whose IDs and any other   attributes like class names or values keep changing when you   refresh the page. Dynamic elements are database-driven or   session-driven. For example, when you edit an element in a   database, it changes a number of areas of the application under   test."}),"\n",(0,a.jsxs)(t.h3,{id:"deal-with-dynamic-elements-using-xpath",children:[(0,a.jsx)("a",{id:"id_9",class:"anchor_top_offset"}),"Deal with dynamic elements using XPath"]}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"To deal with dynamic elements, you might not want to use absolute XPaths for these elements in test cases. Instead, you might want to use relative XPaths based on specific patterns."}),"\n",(0,a.jsx)("p",{xmlns:"http://www.w3.org/1999/xhtml",className:"p",children:"XPath axes are used to search for the multiple nodes in the XML document from the current node context. Katalon Studio supports all XPath axes. The table below shows some common methods you can use to detect dynamic elements:"}),"\n",(0,a.jsxs)(t.table,{children:[(0,a.jsx)(t.thead,{children:(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.th,{children:(0,a.jsx)(t.strong,{children:"Method"})}),(0,a.jsx)(t.th,{children:(0,a.jsx)(t.strong,{children:"Description"})}),(0,a.jsx)(t.th,{children:(0,a.jsx)(t.strong,{children:"Example"})})]})}),(0,a.jsxs)(t.tbody,{children:[(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Checking Multiple Attributes"}),(0,a.jsx)(t.td,{children:"Add more than one condition to search element using XPath."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//*[@id='btn-login'][@type='submit']"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Index"}),(0,a.jsx)(t.td,{children:"Specify a given tag name in terms of the index value you wish to locate. Use this when more than one element is present in the DOM with similar attributes, and it becomes difficult to search for them."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//div[@class='form-group']//select[1]"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Chained XPath"}),(0,a.jsx)(t.td,{children:"Use multiple XPath expressions and chain them."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//section[@id='appointment']//span[@class='glyphiconglyphicon-calendar']"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Contains()"}),(0,a.jsx)(t.td,{children:"Use the Contains() method to detect dynamic elements that contain static values."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//button[contains(@id, 'btn-login')]"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Last()"}),(0,a.jsx)(t.td,{children:"Last() is a method used in an XPath expression. It is used to get the very last node."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//ul[@class='list-inline']/li[last()]"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Start-with()"}),(0,a.jsx)(t.td,{children:"The Start-with method finds the element using the starting text of an attribute. This method is useful when the first part of the attribute value is fixed (static), and the rest is dynamic."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//h3[starts-with(text(),'We Care About')]"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Preceding"}),(0,a.jsx)(t.td,{children:"Select all nodes that come before the current node."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//*[@id='btn-login']//preceding::input"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Following"}),(0,a.jsx)(t.td,{children:"Select all elements in the document following the current node( )."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:".//*[@id='txt-username']//following::input"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Following-sibling"}),(0,a.jsx)(t.td,{children:"Select the following siblings of the context node."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:".//*[@id='txt-username']//following::input"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Ancestor"}),(0,a.jsx)(t.td,{children:"Select all ancestors (parent, grandparent, etc.) of the current node."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//ul[@class='list-inline']/ancestor::div"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Child"}),(0,a.jsx)(t.td,{children:"Select all children of the current node."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//ul[@class='list-inline']/child::li"})})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{children:"Descendant"}),(0,a.jsx)(t.td,{children:"Select all descendant (child node, grandchild node, etc.) of the current node."}),(0,a.jsx)(t.td,{children:(0,a.jsx)(t.code,{children:"//ul[@class='list-inline']/descendant::li"})})]})]})]}),"\n",(0,a.jsxs)(t.p,{children:["For more information on XPath axes, refer to the W3school documentation:\xa0",(0,a.jsx)(t.a,{href:"https://www.w3schools.com/xml/xpath_axes.asp",children:"XPath Axes"}),"."]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["To learn how to find object locators in Katalon Studio, see\xa0",(0,a.jsx)(t.a,{href:"/katalon-studio/record-and-spy/webui-record-and-spy-utilities/spy-web-utility-in-katalon-studio",children:"Spy Web Utility"}),"."]}),"\n"]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Next step"}),":"]}),"\n",(0,a.jsxs)(t.p,{children:["Learn how to input and edit XPath or CSS objects to identify objects on Web UI via Spy Web Utility:\xa0",(0,a.jsx)(t.a,{href:"/katalon-studio/test-objects/web-test-objects/detecting-objects-with-xpath-in-katalon-studio#",children:"Generating reliable object selector using Spy Web utility"}),"."]})]})}function m(e={}){const{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(r,{...e})}):r(e)}}}]);