In the previous tutorials, we have discussed on the locators available in Selenium. Sometimes all these locators are not enough to locate the Web Element on the page. To overcome this problem, we need to use XPath in Selenium.
XPath is nothing but the technique which can be used find the web element on the web page by traversing through the HTML structure of the page. XPath is also known as XML path. Addition to the HTML, it can be used in XML document also.
XPath in Selenium consist of the path expression of the web element along with some condition. While other locators like ID, Class, Name, CSS Selector are finding web element based on the tags, XPath provide dynamic way to search for an element in the web page.
XPath = // Tag name [@Attribute = “Value“]
// : This will select current node Tag name : This indicates the tag name of the node @ : This is used to specify the attribute name Attribute : This indicates the attribute name of the node Value: This indicates the value of the Attribute.
From the above basic XPath expression, you can notice that it consists of //, Tag name, Attribute name and attribute value.
There are 2 types of XPath available in Selenium.
- Absolute XPath
- Relative XPath
Absolute XPath:
Absolute XPath in Selenium is the traditional method of XPath. Its expression will be created using selection from the starting of the root node which is html in the DOM. This will traverse through the whole HTML to reach to the desired element.
It starts with “/”.
Syntax:
/html/body/div[1]/header/div/div[4]/div[2]/div/div[1]/div/div/nav/ul/li[8]/a
You can notice from the syntax that this will starts with “/” followed by html. After html it will traverse to body tag, then go to first div tag. This way it will travers to the anchor tag <a> to find the desired element.
But the main disadvantage of the absolute XPath is, if any tag or attribute of the tag is changed for some requirement, then this XPath will not work. You need to change accordingly which is not a good practice.
Relative XPath:
Relative XPath is the advance XPath which can start from any node of the DOM. It can be the start of the HTML DOM or middle. It always starts with “//”. So, when you see the // in the start of the XPath then you can take this as relative XPath.
Syntax:
//input[@id=’username’]
Now let’s understand the relative XPath with a simple example.
Step-1 : Go to Home page of TestingLPoint.
Step-2: We need to click on the Cucumber link in the BDD block. For this let’s design the relative XPath for the Cucumber link in BDD block.
Relative XPath for cucumber ink in BDD block.
//A[@href='https://www.testinglpoint.com/overview-on-tdd-and-bdd/'][text()='Cucumber']/self::A
You can notice from the syntax that this will starts with “//” followed by “A” tag. This means this will start search the anchor tag with href value “’https://www.testinglpoint.com/overview-on-tdd-and-bdd/” and then it will travers the text() which has value cucumber and find the anchor link on this element.
The main advantage of the relative XPath over the absolute XPath is even if some element/tag changes, still xpath works perfectly.
In this way you can design the relative XPath easily. In next section we will discuss on the difference between the absolute XPath and relative XPath.