Why XPATH ?

Identifying the required element is one of the more painful and difficult process in UI Automation.

Thats where XPATH comes for the rescue. It is everyone’s favorite and it comes handy for even the most complicated HTML pages.

In this article, I will list all the XPATH commands which I have came across during my automation career. If I have omitted or mistyped any of the commands, please let me know in the comments section.

Sample HTML DOM

We will be using the below sample HTML DOM through out this article for reference.

<html>
<body>
    <div class="Website base class">
        <span>
            <p>
                Welcome to the Website
                <div class="Level One" id="user">
                    <h1>Some second level texts</h1>
                    <div class="Level two">Some third level texts</div>
                </div>
            </p>
        </span>
    </div>
    <div class="loginclass">
        <div class="Username">
            <p>username:</p>
            <input type="text" id="user">
        </div>
        <div class="Password">
            <p>Password:</p>
            <input type="text" id="pass">
        </div>
        <p>Press the Login button to submit</p>
        <div class="login" role="alert">
            <p>Login:</p>
            <button id="login">
        </div>
        <p class="last element">
            Adding another paragraph
            <p class="last elements sub element">Adding another paragraph</p>
        </p>
        <span class="spanclass">
            <input class="insidespanclass" type="text">
        </span>
    </div>
</body>
</html>

1. Find element by id

Example: From the sample HTML DOM given above, we can find the input field(class= “Username”) using the XPATH command :

$x(“//*[@id=’user’]”)

2. Find element by class name

Example: From the sample HTML DOM given above, we can find the input field(class= “Username”) using the below XPATH command :

$x("//*[@class='Username']")

3. Find element by attribute value(other than id and class name)

Example: From the sample HTML DOM given above, we can find the Login div field(class=”login”) using the below XPATH command :

$x("//*[@role='alert']")

4. Finding an element with more than one identifier

Example: In the example HTML DOM provided, we can see that the input text field( <input type=”text” id=”user”> ) does not have any unique attributes . So in order to find the element we need to use the combination of type and id attribute values.

$x("//*[@id='user' and @type='text']")

Or

$x("//*[@id='user'][@type='text']")

5. Finding an element using the OR Command

Example: OR can be used to find an element if either of the known attribute value matches. In the sample HTML DOM provided, 3 elements has attribute values either type=text or  id=user, so to get all these elements we can use the OR 

$x("//*[@id='user' or @type='text']")

6. Find element when inner text value is known

Example: From the sample HTML DOM given above, we can find the element which has the inner text “Some second level texts” using the XPATH command :

$x("//*[text()='Some second level texts']")

7. Find element when partial text value is known

Example: From the sample HTML DOM given above, we can find the element which has the inner text “Some second level texts” even if only part of the text value is known using the below command.

$x("//*[contains(text(), 'second level texts']")

8. Find element by partial value of the attribute

a. Find element using starts-with()

Example: starts-with() can be used to find an element, if the starting value of the attribute is known. From the sample HTML DOM, we can find the element password text box (<input type=”text” id=”pass”>) using the partial value of the id attribute like below.

$x("//*[starts-with(@id,'pas')]")

b. Find element using ends-with()

Example: starts-with() can be used to find an element, if the starting value of the attribute is known. From the sample HTML DOM, we can find the element password text box (<input type=”text” id=”pass”>) using the partial value of the id attribute like below.

$x("//*[ends-with(@id,'ss')]")

c. Find element using contains()

Example: contains() can be used to find an element, if the partial value of the attribute is known. From the sample HTML DOM, we can find the element password text box (<input type=”text” id=”pass”>) using the partial value of the id attribute like below.

$x("//*[contains(@id,'pas')]")

9. Find the child element when parent element is known

a. Find all the child elements of a known parent element.

Example: From the sample HTML DOM, the div element(class =”loginclass”) has 4 child elements. To get all the child elements of this div element, we can use the below command.

$x("//*[@class='loginclass']/*")

b. Finding all the child element of a parent with the particular tag  name.

Example: From the sample HTML DOM, the div element(class =”loginclass”) has got 2 children . To find all the children (this includes all the sub child as well) of the div element(class =”loginclass”) we can use the below command

$x("//*[@class='login']/child::p")  

Or

$x("//*[@class='loginclass']/div[*]")

c. Find the child element based on Index

Example: If the child elements index is known, below command can be used to identify the element.

$x("//*[@class='loginclass']/*[4]")

d. Find the last child of a known parent

Example: The below command will help find the last child element of a the parent element(class =”loginclass”). From the sample HTML DOM, the last child is ‘<p class=”last element”>’ and we can find that element using the below command.

$x("//*[@class='loginclass']/*[last()]")

e. Find the last child of a known parent with a specific tag

Example: The below command will help find the last child element with a particular tag(div) of a parent element(class =”loginclass”).  From the sample HTML DOM, the last child among the div tag is ‘<div class=”login” role=”alert”>’ and we can find that element using the below command.

$x("//*[@class='loginclass']/div[last()]")

10. Find the following sibling element

a. Find all the following sibling’s of a known element.

Example:  The below command will help find all the following siblings of a particular element irrespective of the tags. From the sample HTML DOM, we will find all the following siblings of the element (class=”Username”) using the below command.

$x("//*[@class='Username']/following-sibling::*[/*]") 

b. Find all the following siblings of a particular tag of a known element

Example:  The below command will help find all the following siblings of a particular element irrespective of the tags. From the sample HTML DOM, we will find all the following siblings of the element ‘<div class=”Username”> using the below command

$x("//*[@class='Username']/following-sibling::div[/*]")

c. Find the nth  sibling of an Element

Example:  The below command will help find all the following siblings of a particular element irrespective of the tags. From the sample HTML DOM, we will find all the following siblings of the element (class=”Username”) using the below command.

$x("//*[@class='Username']/following-sibling::*[1]") – this will give the first following sibling irrespective of the tags

$x("//*[@class='Username']/following-sibling::div[1]") – this will give the first following sibling of tag div type

11. Find the preceding sibling element

a. Find all the preceding sibling’s of an element

Example:  From the sample HTML DOM, we will find all the preceding siblings of the element (class=”Password”) using the below command.

$x("//*[@class= ‘Password’]/preceding-sibling::*[/*]")

b. Find all the preceding siblings with a particular tag of an element

Example:  From the sample HTML DOM, we will find all the preceding siblings of the element (class=”Password”) using the below command.

$x("//*[@class= ‘Password’]/preceding-sibling::*[/*]")

c. Find the nth sibling of an Element

Example:  The below command will help find all the following siblings of a particular element irrespective of the tags. From the sample HTML DOM, we will find all the following siblings of the element (class=”Username”) using the below command.

$x("//*[@class='Username']/preceding-sibling::*[1]") – this will give the first following sibling irrespective of the tags

$x("//*[@class='Username']/preceding-sibling::div[1]") – this will give the first following sibling of tag div type.

12. Find the parent element of an element

Example: From the sample HTML DOM, we can find the parent element (class=”loginClass”) of the element (class=”login”) using the below command.

$x("//*[@class=’login’]/parent::*")

13. Find the decedent element

a. Find all the decedent elements

Example: Descendant elements are the elements coming under the particular elements node. We can find all the decedent elements of a particular element(class=’Website base class’) using the below command.

$x("//*[@class='Website base class']/descendant::*")

b. Find the nth decedent element

Example: From the sample HTML DOM, we can find the 1st  Preceding element(<head>) of the element (class=”’Website base class”) using the below command

$x("//*[@class='Website base class']/descendant::*[2]")

14. Find the preceding element

a. Find all the preceding elements

Example: Preceding elements are the elements coming above a particular elements node. We can find all the preceding elements of a particular element(class=’Website base class’) using the below command.

$x("//*[@class='Website base class']/preceding::*")

b. Find the nth Preceding element

Example: From the sample HTMLDOM, we can find the 1st  Preceding element(<head>) of the element (class=”’Website base class”) using the below command.

$x("//*[@class='Website base class']/preceding::*[1]")

15. Find the Ancestor element

a. Find all the Ancestor elements

Example: Ancestor elements are the elements coming above a particular elements node (parent, grant parent etc, will not include the sub elements of parent/grandparents). We can find all the Ancestor elements of a particular element (class=’Website base class’) using the below command.

$x("//*[@class='Website base class']/ancestor::*")

b. Find the nth Ancestor element

Example: From the sample HTML DOM, we can find the 2nd Ancestor element (<html>) of the element (class=”’Website base class”) using the below command.

$x("//*[@class='Website base class']/ancestor::*[2]")


References:


Advertisement