What is XPath and how to use in selenium
Coming from a non-IT background, entering the world of coding was completely new to me. But trust me, once you understand and enjoy the flow of topics, you will definitely rock! Similarly, when I started my learning journey, Selenium was my first topic, and I was clueless about where to begin. Luckily, I had a very supportive team. We discussed the topics and shared knowledge for countless hours, sometimes even through sleepless overnights. Guess what the final output of our project was? Of course, our team's hard work paid off.
From this experience, I want to share the knowledge I gained from my project.
When my first project in automation was with Selenium, one of the first skills I learned was locating elements on a webpage. This blog will explore different ways to use XPath in Selenium, a popular method for locating and selecting web elements as part of our automated testing efforts. XPath in Selenium can be used on both HTML and XML documents, so let's dive into the topic!
What is Selenium ?
Selenium is free, open source, and allows testing teams to test applications across browsers and platforms.
However, implementing a framework with Selenium requires locating a web element. In fact, choosing the right web element locator is a critical part of an effective test automation strategy.
What is XPath?
XPath is a query language designed to navigate through elements and attributes in XML documents. In web development, XPath is utilized to locate and interact with elements within an HTML document's structure. This capability is particularly beneficial for web scraping and automated testing, as it allows precise identification of web elements based on various criteria such as attributes, text content, and hierarchical relationships.
By using XPath, Selenium users can search for a page element in a more dynamic way. This capability gives testers the flexibility to work with locators so they are more advantageous.
Syntax for XPath
XPath contains the path of the element situated on the web page. The standard syntax for creating XPath is as follows:
XPath=//tagname[@attribute='value']
// : Select the current node.
Tagname: Tagname of the particular node.
@: Select attribute.
Attribute: Attribute the name of the node.
Value: Value of the attribute.
Types of XPath Locators
XPath Locators | Find different elements on a Web page |
ID | To find the element by the ID of the element. |
Class name | To find the element by the class name of the element. |
Name | To find the element by name of the element. |
Link Text | To find the element by the text of the link. |
XPath | XPath is required for finding the dynamic element and traversing between various elements of the web page. |
CSS path | CSS path also locates elements having no name, class, or ID. |
The Difference Between Static and Dynamic XPath
Understanding the distinction between static and dynamic XPath is crucial for effective test automation:
Static XPath: These are absolute paths that directly point to an element's location in the DOM hierarchy. They are straightforward but fragile; any change in the UI can break the path.
Example:
/html/body/div[1]/div[2]/input
Dynamic XPath: These are relative paths that use flexible criteria to locate elements, making them more resilient to changes in the UI. They often employ functions like contains(), starts-with(), or axes like following-sibling to identify elements based on partial matches or relationships.
Example:
//input[contains(@id, 'user')]
This expression selects any <input> element with an id attribute containing the substring 'user'.
Dynamic XPath expressions are generally preferred in test automation due to their robustness against changes in the application's UI structure.
Types of XPath
There are two types of XPath:
Absolute XPath
Relative XPath
Absolute XPath
Absolute XPath is the direct way to find the element. But the disadvantage of the absolute XPath is that if there are any changes made in the path of the element then that XPath fails.
The key characteristic of XPath is that it begins with the single forward slash(/), which means you can select the element from the root node. Below is an example of an absolute XPath expression .
<html>
<head>...</head>
<body>
...
<form id="loginForm">
<input name="name" type="text" value="First Name" />
<input name="name" type="text" value="Last Name" />
<input name="email" type="text" value="Email" />
<input name="password" type="password" />
<input name="continue" type="submit" value="Sign Me Up" />
</form>
</body>
</html>The syntax to select the email field is as follows:
html/body/form/input[3]A relative path, or a double slash search, begins with double slashes. The double slashes signify a break in the absolute path. Here is how to select the same business email field using a relative path.
Relative Path
Starts from a specific element and navigates through the DOM hierarchy to locate the desired element. It’s more flexible and resilient to changes in the page structure.
A relative path, or a double slash search, begins with double slashes. The double slashes signify a break in the absolute path. Here is how to select the same business email field using a relative path.
//form/input[3]How to find XPath in Chrome
Follow the steps below to find the XPath in Chrome.
Launch Google Chrome and navigate https://opensource-demo.orangehrmlive.com/web/index.php/auth/login to locate the fields using XPath.
2.Go to the username tab and Right-click >> Inspect.
3.On inspecting the web element, it will show an input tag and attributes like class and id.
4.Use the id and these attributes to construct XPath, which, in turn, will locate the username field.
Let’s write XPath in the elements tab.
//input[@placeholder='Username']
As seen above, a simple XPath is used to locate the username tab. Based on the XPath syntax, first use // which means anywhere in the document. Here, input is the tag name that has an id attribute with the value placeholder='Username'.
On writing the XPath, it has highlighted the element, which implies that this particular element was located using XPath.
Similarly, fill in all the details and find elements by XPath in Selenium.
@FindBy(name = "username")
private WebElement usernameField;
Conclusion
XPath in Selenium is a foundational building block for creating a Selenium automation framework. When it comes to XPath in Selenium, there are numerous ways to write using XPath, but choosing the right method will depend on your unique test cases as well as your overall framework.
