How to find XPath in Selenium WebDriver?

How to find XPath in Selenium WebDriver?

What is XPath? 

It is a syntax or language for finding the web elements on the web page from an XML document. XPath is used to find the location of any element on a web page using the HTML DOM structure. The Syntax for XPath: The below diagram is showing the format and elements of XPath. It helps to find the complex, dynamic web elements which are not accessible with common locator like ID, Name, CSSSelectors, etc.

XPath=//tagname[@attribute='value']

// : Select current node.
Tagname: Tagname of the particular node.
@: Select attribute.
Attribute: Attribute name of the node.
Value: Value of the attribute.

How to get XPath in Chrome: 

1. Open the required URL in google chrome browser.
2. Inspect the required element
3. Right-click on the selected element
4. Navigate to Copy -> Copy Full XPath (Absolute XPath)
5. Navigate to Copy -> Copy XPath (Relative XPath)

Types of XPath: 

XPath has the following two types. Let's explain one by one to get deep understanding of XPath

1- Absolute XPath
2- Relative XPath 

Absolute Xpath: 

The Xpath that is used to find the element from the root node is called absolute XPath. The absolute XPath starts with a single slash(/). It contains the whole DOM structure starting from the root node to the node that we are going to find. The disadvantage of the absolute XPath is that when some changes are made in the path of the element, then that element could not be accessible anymore. Below is the example of absolute XPath.

Absolute XPath: /html/body/div[1]/div/div/form/div/div[1]/div/input

Relative XPath: 

It does not start from the root node. It starts finding the elements from the middle of the DOM structure. Double forward slash(//) is used to find the relative XPath. It can search the element anywhere on the web page. Below is the example of relative XPath.

Relative xpath: //*[@id="ui"]/div/div/form/div/div[2]/div/input

XPath finding with different locators. Given below are the possible ways to find the XPath.

1) Find By Id: 

Suppose we have the following HTML structure for an element. We can find the XPath by ID because the ID attribute is available.

Xpat h= //input[@id='email'] or we can also use as //*[@id='email']

2) Find By Name:  

If you want to find the XPath by Name attribute then the XPath expression will look like be as given below. Some time "id" attribute is not available in HTML structure for the required element. Then we can use "Name" attribute

XPath=//input[@name='email'] or we can also use as //*[@name='email']

Here is a link of the page https://ui.cogmento.com/

3) Find By Class Name: 

You can also find the XPath by Class Name. Given below is the example of XPath by Class Name.

XPath = //h2[@class='barone']

4) Find By Text() Method:

This method is used to find the element with exact text matching. In our case, we find the element with the text "Login".

XPath = //div[text()='Login']

5) Find By Contains() Method:

Contains() method is used in XPath expression to find the web elements with partial text matching. In the below example we have tried to find the element with partial text. In the XPath expression, you can see the text "Sign" in place of "Sign Up" But we can't find this element with the Text() method directly, because it only works with full-text matching.

XPath = //a[contains(text(),'Sign')] // Full Name Sign Up
Xpath = //*[contains(@type,'btn')] // Full Name btnLogin

If we use text() method with partial text as given below, it will not work.

XPath = //a[text(),'Sign')]

6) Find By Child: 

In the following XPath expression, we have found the child element "a" of the h4 tag. We can not find the "a" tag directly with the text "Java" because some other elements have the same text. So we have started with the top parent div of "a" tag.

XPath = //div[@class='g-block box4 size-24 hidden-phone']
//div[@class='g-content g-particle']//div[@class='canvas-graph']
//div[@class='canvas-middle']//h4//a[text()='Java']

7) Find By Preceding Sibling: 

In the preceding sibling, we can find the nodes that come before the current node, but the level should be the same. In some cases to find an element, we need to do some reverse engineering. We move from bottom to top to find the required element. To click in the checkbox, we will find the name that comes in front of a checkbox.

XPath = //td[text()='Tom Peter']
//preceding-sibling::td//div[@class='ui fitted read-only checkbox']
//input[@name='id']

8) Find By the Following Sibling: 

In the following sibling, we can find the nodes that come after the current node, but the level should be the same. One thing, that you should remember in the following sibling only one forward-slash (/) is used before the keyword (following-sibling). But in the case of preceding sibling double forward-slash (//) is used.

XPath = //div[@class='canvas-middle']
//a[contains(@href, 'http://www.guru99.com/accounting.html')]
/following-sibling::h4//a[text()='ACCOUNTING']

9) Find By Parent: 

It selects the parent of the current node, as shown in the below image.

XPath = //td[text()='Tom Peter']//parent::tr
//td//div[@class='ui fitted read-only checkbox']
//input[@name='id']

10) Find By Starts-with & Ends-with Methods: 

To find the XPath of the dynamic web element, whose attribute value changes on refresh, we will use either Starts-with or Ends-with method. Suppose id of an element is changing dynamically like: Id = message_123 Id = message_234 Id = message_544 So on... In the above examples, initial text is the same (message) but numerical values keep changing. So Starts-with function will be used.

XPath = //input[starts-with(@id,'message_')]

Similarly, we can use the Ends-with method. But it can be used, where the last value remains the same, and the initial value keeps changing. Suppose id of an element is changing dynamically like: Id = 234_test_t Id = 456_test_t

XPath = //input[ends-with(@id,'_test_t')]

Conclusion: 

To find the element by XPath is much more efficient as compared to other locators. That's why in complex projects, Automation Engineers prefer to use XPath for finding the elements. You can use it in a versatile way. You can find an element by moving from child to parent or parent to child. You can navigate to any direction in the HTML DOM structure. You can also control the dynamic values of web elements.