How To Select The Effective XPath For Web Element In Webdriver

It is very easy to find a web element’s XPath with Firebug, Chrome Inspector etc. But it is very important to get the best and correct XPath . But how to do that? In this article we will tell you how to achieve that .

Absolute vs Relative

Absolute XPath like this   /html/body/div[1]/div/div[1]/div[1]/div/article[1]/div/p[2]/a.
Bad aspect:
1. It is too long.
2. If one element changed then an ElementNotFound exception will be thrown in webdriver java code.

Relative XPath like this //*[@id=’footer_nav’]/ul/li[3]/a.
You should search for the latest Id attribute to get it. Watch below screen shot.
find relative xpath in webdriver using firebug

You will find the last Id in the DOM tree is ‘footer_nav‘. So an effective XPath should be:
//*[@id=’footer_nav’]/ul/li[3]/a .

Difference between Relative and Absolute
Absolute XPath starts with single slash. DOM engine will look for web element beginning from root node in the DOM tree.

Relative XPath starts with double slash. DOM engine will search for matching web element anywhere in XML DOM tree.

You can use Firefox plugin FirePath to get relative XPath easily. First you need to download and install FirePath to Firefox. Then right click the web pages in Firefox, choose “Inspect In FirePath” in popup menu.
click Inspect in FirePath menu item

Click FirePath drop down menu button and uncheck ‘Generate absolute XPath’. Then you can find the relative value in the text box where red arrow pointed at. Maybe you need to reload the web page and inspect the web element again to make the value change.
uncheck generate absolute xpath menu button

Good aspect:
1. Not too long.
2. If the web elements before the id(footer_nav) in the DOM tree change, this XPath still work.

READ :   Use Selenium Webdriver To Select Options From DropDown List

How to use single slash “/” or double slash “//” correctly in XPath

Single slash ‘/’ exist anywhere means to find the DOM element instantly inside it’s parent.

Double slash ‘//’ means to find any child or grand-child DOM element inside it’s parent.

Following is an example to explain above different type of XPath.

Absolute: /html/body/div[3]/div/div/footer/section[5]/div[@id=’social-media’]/ul/li[6]/a

Relative1: //*[@id=’social-media’]/ul/li[6]/a

Relative2: //body//footer/section[5]/div/ul/li[6]/a

Relative3: //body//section[5]/div/ul/li[6]/a

How to write XPath for dynamic changed attribute value?

For those web elements whose attribute is changed dynamically, we can use following 3 functions to get it.

1.contains(@arrName, arrValue)
@arrName: Is the attribute name of the web element.
arrValue: Is the string that contained by @arrName presented attribute’s value.

In following html code, you can see the img’s src attribute’s value is a dynamic value, it is changed by each image.

So we can locate such a web element use following.

//img[contains(@src,’wp-content/uploads’)]

<div class="profile_cont" itemtype="http://schema.org/Article" itemscope=""> 

<img src="http://www.dev2qa.com/wp-content/uploads/2017/05/show-html-code-snippet-for-the-search-button.png" itemprop="image"> 

</div>

2.starts-with(@arrName, arrValue)
@arrName: Is the attribute name of the web element.
arrValue: Is the started string of @arrName presented attribute’s value.

You can get image use following also.

//img[starts-with(@src,’http://www.dev2qa.com’)]

<div class="profile_cont" itemtype="http://schema.org/Article" itemscope=""> 

<img src="http://www.dev2qa.com/wp-content/uploads/2017/05/show-html-code-snippet-for-the-search-button.png" itemprop="image"> 

</div>

3.text()
You can use this method to get web element that exactly contains the text.
//p[text()=’As you can see from above java code, i use’]

<p>

As you can see from above java code, i use

</p>

You can verify each method by input it into FirePath XPath text box, if the value is correct then related web element will be selected with a blue rectangle.

use xpath method text to find web element

(Visited 1,073 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.