Finding Xpath In selenium webdriver : Complete Guideline

Share:
To expertise with selenium webdriver, you need to be good at Xpaths. Xpaths are the paths to locate the web elements. In this article we will discuss, What is Xpath ? How to find Xpath? Absolute Xpath and Relative Xpath, Different functions to find Xpath. 


Finding Xpath In selenium webdriver

What is Xpath ? 

Xpath is nothing but XML Path. To locate elements in the web page, you need to tell Path of that element to selenium. This path have some format which you need to follow. The Format is 

Xpath = //tagName[@Attribute='Value']

Here Attribute could be any html standard tag values  like ID,Name, Class etc. tagName could be HTML tag like  Div, Span , img, Table, Tr , Td,  etc. 


Basic information of xpath 

Xpath Syntax

Xpath uses path expressions to select element. This expression uses different symbols, which have specific role. 

Some Important Expressions
TagName - Selects all element which have tagName given.
/ - Selects from root node
// - Selects from current node that matches expression 
. - Selects current node
.. - selects the parent of current node 
@ - selects the attribute

Types of Xpath 

  1. Absolute Xpath
  2. Relative Xpath 

Absolute Xpath 

Absolute Xpath is path of element from the root. The easiest way you can get Absolute Xpath is from browser inspect tool. Go to any element 

Open a website. right click on element, you want to find Xpath. Select "Inspect". You will see as below (this is from chrome).  right click> copy> copy xpath. Absolute xpath will be copied to your clipboard. 

Finding Xpath In selenium webdriver
Absolute Xpath

Absolute Xpath will look like
Parent /child 1/child2/div/ul/li[3]/a

The disadvantage of Absolute Xpath is, if something change in parent element or any element in hierarchy , you need to edit all affected Xpaths. 

Relative Xpath 

Relative Xpaths can be start from anywhere in hierarchy. You can locate any element from anywhere and from there you can find path to your element. 

For Example 

  • If you want to find Xpath of any radio button. 
  • Problem is, in same page there could be many radio buttons with same id and name 
  • Only different thing you can find is text written with radio button 
  • then you will find xpath of that text first  using text or name 
  • From that text you can find hierarchy of radio button   
  • That path is relative Xpath. 


How to find relative xpath in selenium webdriver? 

Let's try with facebook login page. If i want to enter first name using selenium webdriver script. So you need to use driver.findElement(byXpath).sendKeys(text)  method (as we discussed in previous Selenium post). Now how to find that Xpath .. 


How to find relative xpath in selenium webdriver?
Finding Xpath for first name

To see html for webpage in chrome you can right click on any element and select Inspect. In Firefox you can use firebug tool. 

Now we know  "First Name" is a "Input". Now there are many input web-elements on screen. so you need to identify it uniquely. So here you can find it like 


//input[@name='firstname']

 Same way you can find it by @id, @class or any other unique tag attributes. 

Now let's say we want to find Xpath for radio button of Female. 


How to find relative xpath in selenium webdriver
Finding xpath of radio button

Here if you see attributes for both radio buttons, they are almost same. Only value differs. There is high possibility that value may change in future relies whenever new radio button will be added. So what to do? So as we discussed find Xpath for nearest possible element (which is relative ! ). So here we can find web element for "Female" text using text() , then we can go to it's parent and find child of that having input='radio' 


//label[text()='Female']/../input[@type='radio']

So here 

//label[text()='Female'] - finds the text 
/.. - Selects the parent of that text
/input - Finds the child of that parent 
[@type='radio'] - This is not required here as there is only one input inside parent. But it is good practice to add type/id etc if same element added at same hierarchy i.e what if another input added with some other type ! 


If you optimize it , you can directly find preceding sibling in selenium

//label[text()='Female']/preceding-sibling::input

So you can navigate in Xpath using Xpath Axis name  (Here is the detailed post on Xpath Functions and Axes for selenium)

Keep following this blog. Subscribe using mail to get articles in your email box. Follow on social media as well. 

Summary 
In this post we discussed 

  • What is Xpath 
  • Xpath Basic syntax 
  • Types of Xpath - Absolute and Relative Xpath
  • How to find Xpath for selenium webdriver with Example 
If you like this post please share.