But sometimes it is difficult to find any of them in the DOM (Document Object Model). In this case, we will have to use Xpath to locate an element on the webpage.
So, let’s learn what is XPath and what are 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 which is used to search and select nodes in an XML document. All 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 of XPath is explained below with screenshot.
Syntax:
The path of element at a webpage is selected by XML path syntax. Standard syntax to create XPath is given below:
XPath = //tagname[@Attribute = ‘value’]
where,
// ➨ It select current node.
tagname ➨ It is the name of tag of particular node. For example: input, div, img, etc.
@ ➨ It selects attribute like id, name, className, etc.
Attribute ➨ It is the attribute name of the node. For example: type, class, name, id, etc.
value ➨ It is value of attribute.
The XPath syntax and its terminology are shown in the below figure.
For example:
XPath = //input[@id = ‘user-message’]
How to Find XPath in Chrome Browser
Types of XPath in Selenium
There are two types of XPath in selenium.
1. Absolute XPath
2. Relative XPath
Absolute XPath in Selenium
The example of an absolute XPath expression of the element is shown below.
Absolute XPath: /html/body/div/div/form/input.
Where,
/html: This is the root HTML element node. You will have noticed in absolute XPath expression that a slash (/) is used in the beginning which represents an absolute xpath.
Finding Elements with an Absolute Path
Here is an example where the username is located using absolute path. So, we can search element using absolute path like this.
WebElement username = driver.findElement(By.xpath("/html/body/div/div/form/input"));
Advantage & Disadvantage of Absolute XPath:
➲ Disadvantage is that if anything goes wrong or some other tag is added in between, this path will no longer work.
For example:
Relative XPath in Selenium
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’]
1. .(dot): Dot at starting represents current node. It tells that the processing will start from the current node.
2. . .(double dot): It will select the 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 the 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 the 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
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.
Final words
Hope that this tutorial has covered all important points related to XPath in Selenium WebDriver with example. I hope that you will have understood basic concepts of Selenium XPath and enjoyed this topic.
In the next tutorial, we will learn how to find web element by XPath with practical example scenario.
Thanks for reading!!!
Next ⇒ Find element by XPath in Selenium⇐ PrevNext ⇒
The post XPath Tutorial in Selenium WebDriver with Examples appeared first on Scientech Easy.
