{"id":2641,"date":"2023-10-31T16:27:44","date_gmt":"2023-10-31T16:27:44","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=2641"},"modified":"2023-12-03T06:52:29","modified_gmt":"2023-12-03T06:52:29","slug":"identify-elements-using-xpath","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2023\/10\/31\/identify-elements-using-xpath\/","title":{"rendered":"Identify elements using Xpath"},"content":{"rendered":"\n
    \n
  1. Definition of xpath locator<\/a> in Selenium webdriver <\/li>\n\n\n\n
  2. xpath syntax\/example<\/li>\n\n\n\n
  3. Simplified xpath syntax<\/a><\/li>\n\n\n\n
  4. xpath regular expression to identify element (\u2018contains\u2019 keyword)<\/li>\n\n\n\n
  5. Parent-child xpath relation<\/li>\n\n\n\n
  6. Difference between relative and absolute xpath<\/li>\n\n\n\n
  7. Source code<\/li>\n<\/ol>\n\n\n\n

    Definition of xpath locator in Selenium webdriver<\/strong><\/strong>
    We can identify elements using their xpath (which is simply an address of an element on the webpage). Xpath help us reaching a desired element on the web page.<\/p>\n\n\n\n

    xpath syntax\/example<\/strong><\/p>\n\n\n\n

    The xpath syntax: <\/strong>\/\/tagname[@attribute=’value’]<\/strong>
    xpath example: \/\/input[@name=’Submit’]<\/strong> <\/p>\n\n\n\n

    In the above example, we are trying to find an element that has the tag name \u201cinput<\/em>\u201d & the value of its \u201cname<\/em>\u201d attribute is \u2018Submit<\/em>\u2019.<\/p>\n\n\n\n

    Let us see a practical example. <\/p>\n\n\n\n

    Launch https:\/\/www.bing.com\/<\/a> and inspect the search text field. <\/p>\n\n\n\n

    Notice below that the search field is represented by tagname \u2018textarea<\/em>\u2019, attribute \u2018id<\/em>\u2019 and the attribute\u2019s value is \u2018sb_form_q<\/em>\u2019
    <\/p>\n\n\n\n


    Based on xpath\u2019s syntax, our xpath would become:  \/\/textarea[@id=’sb_form_q’]<\/strong> (see line 14)


    Let us enter some text in the search field \u201crahulshettyacademy\u201d and run the script. Notice below the search field is successfully identified using the xpath and the desired text gets typed in the search field<\/p>\n\n\n\n

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

    Simplified xpath syntax<\/strong> <\/strong>
    <\/strong>We have already seen the xpath syntax: <\/strong>\/\/tagname[@attribute=’value’]<\/em><\/strong><\/p>\n\n\n\n

    We can simplify this syntax by replacing tagname<\/em><\/strong> with star *<\/em><\/strong>  (star *<\/em><\/strong> represents any<\/em><\/strong>).

    So the simplified xpath syntax becomes \/\/*[@attribute=’value’]<\/em><\/strong>
    <\/strong>As an example: \/\/*[@id=’sb_form_q’]<\/em><\/strong>
    <\/em><\/p>\n\n\n\n

    So the simplified syntax means that:
    find an element on the webpage (irrespective of any<\/em> <\/em>tagname) whose attribute \u2018id<\/em>\u2019 has the value \u2018sb_form_q<\/em>\u2019<\/p>\n\n\n\n

    Let us comment line 14. In line#15, we have used the simplified xpath syntax

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

    Save and execute script, the simplified syntax works just fine

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

    Please remember that we cannot use double quotes within double quotes in xpath syntax. This means that, when we write the xpath syntax, we start by opening and closing the braces with double quotes viz By.xpath(<\/em>\u201c<\/em><\/strong> <\/em>\u201c<\/em><\/strong>)<\/em>.<\/em>
    <\/em>Since we have already used one set of double quotes, we cannot write another set of double quotes, below will give syntax error
    By.xpath(“\/\/input[@value=<\/em>“<\/em><\/strong>Submit<\/em>“<\/em><\/strong>]”)<\/em><\/p>\n\n\n\n


    To get rid of syntax error, simply convert second set of double quotes with single quote:
    By.xpath(“\/\/input[@value=<\/em>‘<\/em><\/strong>Submit<\/em>‘<\/em><\/strong>]”)<\/em><\/p>\n\n\n\n

    xpath regular expression to identify element (\u2018contains\u2019 keyword)<\/strong><\/p>\n\n\n\n

    We can use xpath regular expressions to identify an element. The regular expressions can be used if the value of an attribute changes dynamically. <\/p>\n\n\n\n

    As an example, the value of \u2018id\u2019 attribute might be 397mai543<\/em> in one session and 860mai631<\/em> in another session. As can be seen, the prefix and suffix is dynamically changing. The static content in both of these values is \u2018mai<\/em>\u2019. <\/p>\n\n\n\n

    The \u2018contains\u2019 keyword can be used to create a regular expression. The syntax would be \/\/tagname[contains(@attribute,\u2019value\u2019)]<\/em><\/strong>
    <\/p>\n\n\n\n

    Inspect \u2018Log In\u2019 button on the facebook page and notice the value of \u2018id\u2019 attribute (u_0_5_<\/em>gr<\/em><\/strong>)<\/p>\n\n\n\n

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

    Open another browser session and inspect the \u2018Log In\u2019 button once again<\/p>\n\n\n\n


    Notice above that the value of \u2018id\u2019 attribute changes to (u_0_5_<\/em>RR<\/em><\/strong>)<\/p>\n\n\n\n

    Similarly, the value changes in another session<\/p>\n\n\n\n

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

    The static part in these three cases is same: u_0_5<\/em><\/p>\n\n\n\n

    We can use the static value of the \u2018id\u2019 attribute alongwith the \u2018contains\u2019 keyword as shown below



    Run, notice that the \u2018Log In\u2019 button gets clicked
    <\/p>\n\n\n\n

    This is how we can use the \u2018contains\u2019 keyword to form an xpath regular expression.<\/p>\n\n\n\n

    If we look at another example (google.com) and inspect the search field, we will notice that the value of \u2018data-ved<\/em>\u2019 attribute keeps changing
    <\/p>\n\n\n\n

    The value contains the static portion CAQ<\/em> and we can make use of it to identify this search field

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


    Run the script, the search field gets identified and the text gets entered

    Parent-child xpath relation<\/strong><\/p>\n\n\n\n

    Assume that there is no unique attribute to identify an element on a webpage. Let us assume that the google search field cannot be identified by any unique attribute. In these cases, an xpath is created by using the parent to child relationship. If child does not have a unique attribute, we than look for one of its parent having the unique attribute. We can than write an xpath starting from parent and keep traversing till the child (that has no unique attribute) with the help of tagnames<\/p>\n\n\n\n

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

    As seen in the diagram below, the parent <div> tag has a unique \u2018class\u2019 attribute. The child tag is <textarea><\/p>\n\n\n\n

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

    So the parent <div> tag has a unique attribute. Please note that we can keep going one level up till a parent having unique attribute is found.  <\/p>\n\n\n\n

    So, we have found a parent that has \u2018div\u2019 tag having \u2018class\u2019 value ‘a4bIc’. <\/strong>The parent can be represented by xpath \/\/div[@class=’a4bIc’]<\/em>. <\/p>\n\n\n\n

    From this parent tag, we will traverse to desired child tag <textarea<\/em>> <\/p>\n\n\n\n

    The child tag (here) is the actual search field. <\/p>\n\n\n\n

    The custom xpath from parent to child path becomes \/\/div[@class=’a4bIc’]<\/em><\/strong>\/textarea<\/em><\/strong> <\/p>\n\n\n\n

    We can now use this parent-child xpath to enter some value in the text field

    Run, \u2018rahulshettyacademy\u2019 gets typed in search field

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

    Difference between relative and absolute xpath<\/strong> <\/strong>
    <\/strong>In the case of relative xpath, we can jump directly to desired web element. We do not need the help of parent node to find the web element. Relative xpath syntax starts with \/\/<\/strong>. <\/p>\n\n\n\n

    In the below diagram, the relative xpath \/\/*[@id=’sb_form_q’] <\/strong>can be used to identify the search field. We haven\u2019t taken the help of any parent tag.

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

    However, for finding the absolute xpath, we have to take the help of all the parent nodes to reach the desired child element. The absolute xpath syntax starts with single slash \/ and we would be traversing like: \/parent\/child1\/child2\/\u2026..<\/p>\n\n\n\n

    Inspect the search field of www.bing.com<\/a> <\/p>\n\n\n\n

    Using the selector\u2019s hub, identify the absolute xpath.<\/p>\n\n\n\n

    Notice that the absolute xpath starts at \/html and ends at \/textarea<\/p>\n\n\n\n

    \/html[1]\/body[1]\/div[1]\/div[1]\/div[3]\/div[2]\/form[1]\/div[1]\/div[1]\/textarea[1]
    <\/p>\n\n\n\n

    Source code<\/strong><\/p>\n\n\n\n

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

    Thank you!<\/p>\n\n\n\n


    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Definition of xpath locator in Selenium webdriverWe can identify elements using their xpath (which is simply an address of an element on the webpage). Xpath help us reaching a desired element on the web page. xpath syntax\/example The xpath syntax: \/\/tagname[@attribute=’value’]xpath example: \/\/input[@name=’Submit’]  In the above example, we are trying to find an element that […]<\/p>\n","protected":false},"author":1,"featured_media":1290,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2641","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2641"}],"version-history":[{"count":5,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2641\/revisions"}],"predecessor-version":[{"id":2823,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2641\/revisions\/2823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1290"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}