Selenium - XPath

---

---

We can identify an element on a web page using the xpath locator. It is basically an XML path to locate an element through the HTML nodes in DOM. Once we navigate to a webpage, we have to interact with the web elements available on the page like clicking a link/button, entering text within an edit box, and so on to complete our automation test case.

Creating XPath for an Element

For this, our first job should be to identify the element. We can create an xpath for an element for its identification and utilize the method findElement(By.xpath("<value of xpath>")). With this, the first element with the matching value of the xpath should be returned.

In case there is no element with the matching value of the xpath, NoSuchElementException shall be thrown. The syntax for identifying an element with xpath is shown below −

Webdriver driver = new ChromeDriver();
driver.findElement(By.xpath("value of xpath"));

Rules to Create Xpath Expression

• To identify the element with xpath, the expression should be //tagname[@attribute='value']. Here, // points to the present node, tagname refers to the tagname of the present node, @ is used to select an attribute, attribute refers to the attribute name, and value refers to the value of the attribute.

• There can be two types of xpath – relative and absolute. The absolute xpath begins with / symbol and starts from the root node up to the element that we want to identify. However, if there is a change in path to any element path(in between from the root to the current node), the existing absolute xpath will not work for an element.

Let us identify the below highlighted element starting from the root node.

Xpath used: /html/body/main/div/div/div[2]/div/ul/li[1]/input

Please note, we can validate an xpath in the Console, by inserting the xpath value within $x("<value of xpath>"). In case, there is a matching element, we would get length value more 0, else, it would indicate there is no matching element with xpath value we are using. For example, in the above example, we have used the expression $x("/html/body/main/div/div/div[2]/div/ul/li[1]/input"), which yielded length: 1. Also, on hovering over the result, we would get the highlighted element on the page.

The relative xpath begins with // symbol and does not start from the root node. For the same element, discussed in the above example, the relative xpath value would be //*[@id='c_bs_1']".

Also, please note the HTML code of the element, we have just identified with the relative and absolute xpath.

<input type="checkbox" id="c_bs_1">

There are also functions available which help to frame relative xpath expressions like text(). It is used to identify an element with the help of the visible text on the page.

Let us identify the highlighted text Check Box with the help of visible text on the page.

Xpath used: //h1[text()='Check Box'].

There are also functions available which help to frame relative xpath expressions like starts-with(). It is used to identify an element whose attribute value begins with a specific text. This function is normally used for attributes whose value changes on each page load. Let us identify the two checkboxes beside the Main Level 1 and Main Level 2 labels.

Xpath used: //input[starts-with(@id, 'c_bs')]. 

In the above example, we saw that the xpath used yielded two matching elements with xpath values, input#c_bs_1, and input#c_bs_2.

There are also functions available which help to frame relative xpath expressions like contains(). It identifies an element whose attribute value contains a sub-text of the actual attribute value. This function is normally used for attributes whose value changes on each page load.

Let us identify the highlighted checkbox beside the Main Level 2 label using contains().

Xpath used://input[contains(@id, 'bs_2')].

We can create xpath using the AND and OR conditions for the value of attributes to be true.

Let us identify the highlighted checkbox beside the Main Level 2 label using OR condition.

Xpath used: //input[@type='submit' or @id='c_bs_2'].

In the above example, we saw that the xpath used has an OR condition where @type='submit' condition does not match but the @id='c_bs_2' condition matches.

Let us identify the highlighted checkbox beside the Main Level 2 label using AND condition.

Xpath used: //input[@type='checkbox' and @id='c_bs_2'].

In the above example, we saw that the xpath used has AND condition where both the attribute condition matches.

Also, please note the HTML code of the checkbox beside the Main Level 2, we have just identified xpath.

<input type="checkbox" id="c_bs_2">

We can create xpath using the following axes. It represents all nodes that come after the current node.

Xpath used: //span[@class='plus']//following::input[1]

We can create xpath using the following-sibling axes. It represents the following siblings of the context node. Siblings are at the same level as the current node and share its parent.

Xpath used: //span[@class='plus']//following-sibling::input[1].

We can create xpath using the parent axes. It represents the parent of the current node.

Let us identify the highlighted checkbox beside the Sub Level 1 label using parent axes.

Xpath used: //*[@id='c_bf_1']//parent::li

Also, please note the HTML code of the checkbox beside the Sub Level 1, we have just identified xpath.

<input type="checkbox" id="c_bf_1">

We can create xpath using the child axes. It represents the child of the current node.

Syntax: //*[@id='bf_1']//child::input[1].

• We can create xpath using the preceding axes. It represents all nodes that come before the current node.

• We can create xpath using the self axes. It represents all nodes from the current node.

• We can create xpath using the descendant axes. It represents all the descendants from the current node.

We can get more information on xpath axes from the below link −

https://www.tutorialspoint.com/xpath/

In this tutorial, we had discussed the various usage of xpath locators in Selenium Webdriver.