In this tutorial, we are going to learn the most important topic XPath in Selenium WebDriver which is asked by the interviewer in any Selenium automation testing interview.
Basically, when we write any test script, we generally prefer to use general Selenium locators such as id, name, className, tagName, etc.
But sometimes it is difficult to find any of them in the DOM (Document Object Model). In this case, we use XPath to locate an element on the webpage.
So, let’s start to learn what is XPath and what are the different ways to choose the most effective XPath to find complex or dynamic elements whose attributes change dynamically on refresh or any other operations.
XPath In Selenium
XPath stands for XML (Extensible Markup Language) Path language. It is a query language that is used to search and select nodes in an XML document. It is used for the identification of any element in an HTML or a web page. All the major web browser supports XPath.
Selenium WebDriver supports XPath to find the location of any web element on a web page using XML path expression.
The basic syntax to find XPath of an element on the web page is as follows:
The standard syntax to create an XPath is given below:
XPath = //tagname[@Attribute = ‘Value’]
// ➨ It selects current node by the path of element. It can be an absolute or relative path for selection of an element.
tagname ➨ It is the name of tag of a particular node. For example: input, div, img, a, ul, etc.
@ ➨ It selects attributes like id, name, className, etc.
Attribute ➨ It is the attribute name of the element or node. For example: type, class, name, id, etc.
Value ➨ It is value of an attribute.
The XPath syntax and its terminology are shown in the below figure.
XPath = //input[@id = ‘user-message’
For more detail, go to this tutorial: How to find XPath in Chrome Browser
Types of XPath in Selenium
There are two types of XPath in Selenium WebDriver. They are:
1. Absolute XPath
2. Relative XPath
Absolute XPath in Selenium
Absolute XPath begins with a single forward-slash (/) which select element from the root HTML node. It is the easiest and direct way to find element but if any changes happen in the path of element, this XPath gets failed.
So, this is the main disadvantage of using absolute XPath. The example of an absolute XPath expression of the element is as follows:
Absolute XPath: /html/body/div/div/form/input
Where, /html is the root HTML element node. You will have noticed in absolute XPath expression that a slash (/) is used at the beginning which represents an absolute XPath.
Other examples of absolute XPath of elements on Google Home page are as follows:
1. Absolute XPath (Google Search Button): /html//form[@id=’tsf’]//div[@class=’A8SBwf’]/div[@class=’FPdoLcVlcLAe’]/center/input[@name=’btnK’]
2. Absolute XPath (Feeling Lucky Button): /html//form[@id=’tsf’]//div[@class=’A8SBwf’]/div[@class=’FPdoLcVlcLAe’]/center/input[@name=’btnI’]
3. Absolute XPath (Search text Box): /html//form[@id=’tsf’]//div[@class=’a4bIc’]/input[@role=’combobox’]
Finding Elements with Absolute Path
Absolute path refers to a very specific location of the element which depends on the structure or hierarchy of elements on a webpage. Here is an example where the username is located using absolute path. So, we can search element using an absolute path like this:
WebElement username = driver.findElement(By.xpath("/html/body/div/div/form/input"));
Advantage & Disadvantage of Absolute XPath
➲ The advantage of using absolute XPath is that it identifies an element very fast.
➲ The disadvantage of using absolute XPath is that if anything goes wrong or some other tag is added in between, this path will no longer work.
For example, if we define a path as html/head/body/table/tbody/tr/th. But when we add a tag between body and table, the path will be changed like this html/head/body/form/table/tbody/tr/th. In this case, the first path will not work as ‘form’ tag has been added in between.
Relative XPath in Selenium
Relative XPath starts from double forward-slash (//) and selects elements from anywhere on the webpage. It is the best practice to find elements through relative XPath because it helps us to reduce the chance of “ElementNotFoundException”.
With a relative XPath, we can locate an element directly irrespective of its location in the DOM. The example of a relative XPath expression of an element is given below. It is a general format used to find out element through a relative XPath.
Relative XPath: //input[@id = ’email’]
Other example of Relative XPath are as follows: .//*[@id = ‘username’]
1. .(dot): Dot at starting represents the current node. It tells us that the processing will start from the current node.
2. . .(double dot): It will select parent of current node. For example, //table/. . will return div element because div is the parent of table element.
3. ‘*’: is used to select all the element nodes descending from the current node. For example:
/table/*: It will select all child elements of a table element.
//*: It will select all elements in the document.
//*[@id = ‘username’]: It will select any element in document which has an attribute named “id” with the specified value “username”.
4. @: It represents an attribute which selects id, name, className, etc. For example:
@id: It will select all elements that are defined with the id attribute in the document. No matter where it is defined in the document.
//img/@alt: It will select all the img elements that are defined with the @alt attribute.
//td[@*]: It will select all td elements with any attribute.
Finding Elements using Attributes values in XPath
We can also search for elements using their attribute values in the XPath. Let’s see an example where we will identify username field using ID attribute.
WebElement username = driver.findElement(By.xpath("//input[@id = 'username']"));
Let’s take another example where image is located using alt attribute.
WebElement nextbutton = driver.findElement(By.xpath("//img[@alt = 'next']"));
Advantage & Disadvantage of Relative XPath:
➲ Advantage of using relative XPath is that you don’t have to create long XPath. You can also start from the middle.
➲ Disadvantage of using relative XPath is that it takes more time in identifying the element as we specify the partial path, not the exact path.
Difference between “/” and “//” in XPath
There are mainly three differences between single slash and double slash.
1. Single slash is used to create absolute XPath whereas Double slash is used to create relative XPath.
2. Single slash selects an element from the root node. For example, /html will select the root HTML element.
Double slash search element from anywhere on the web page. For example, //table will select all the table elements from anywhere on the web page.
3. Single slash (/) defines ancestor and descendant relationships if used in the middle. For example, //div/table returns the div which contains a table object.
If double slash (//) is used in middle, it defines a descendant relationship. For example, /html//title returns title element which is descendant of html element.
Hope that this tutorial has covered all important points related to XPath in Selenium WebDriver with example. I hope that you will have understood the basic concepts of Selenium XPath and enjoyed this topic.
Thanks for reading!!!