Selenium – How to write XPath to identify objects?

by seetaram on July 4, 2011

Selenium identifies the objects on a web page by its HTML properties such as id, name, and xpath.  To understand this, open a browser and navigate to some web site and then click on View – > Page Source.  Below picture shows how the page source looks:

viewsource

pagesource -id and name

Here, I have taken the example of “www.sqaforums.com” because that has many different objects such as image, table, links, edit boxes, buttons, etc.

In this post, I am going to use two Mozilla Firefox add-ons – XPath Checker and Firebug.  Both of these add-ons are very much useful in test automation with Selenium.  Download these add-ons from the below links and then click on Install button that installs both the add-ons:

Download XPath Checker

Download Firebug 

Restart the Mozilla Firefox.  This shows a small “bug” icon on the right bottom corner of the firefox.  Also, this adds a “Firebug” option to the Tools menu of the firefox.

Now, open sqaforums website and then open the firebug by clicking bug icon on the firefox.  Then click on the Inspect Element option of the firebug and then click on the “Beatsoft” tab of on the web site home page.  Below pictures shows how it looks:

InspectElement

HTMLTags

XPath is a combination of different HTML tags which identifies objects on a web page uniquely.  Now, let us try to construct Xpath for the tab “Betasoft” using “XPath Checker” and “Firebug”.  Then try to identify the object using Selenium IDE to make sure the action can be done by the Selenium.

Right Click – > Betasoft tab – > Click on View Xpath.  This opens up the “XPath Checker” add-on.  In the XPath edit box try to type “//img” this shows all the images on the page as shown below:

viewxpath

xpathchecker

By inspecting the “Betasoft” tab with Firebug (Inspect element) find out a unique property / HTML tag — //img[@name=’headtabs_r1_c1′].  Copy and paste this XPath into Selenium IDE and then click on “Find button” and this highlights the object.  This confirms that Selenium can identify the object.

xpathConstructed

Let us take one more example and try to construct a XPath.  Let us take example of Advanced button on the sqaforums web page.

Right click on the Advanced button and then click View XPath option.  This opens XPath Checker and we can see some xpath in the edit box.  Delete this default xpath displayed by the Xpath checker.

Now type in “//img” into the edit box.  This displays all the objects that have img HTML tag as shown below:

xpathconstructed2 

Add unique property of the object src to the above tag (src=’/images/header/search_advansed_y.gif’).  Full xpath of the object Advanced button will be – //img[@src=’/images/header/search_advansed_y.gif’] and this uniquely identifies the object on the web page.  Copy and paste the xpath into Selenium IDE and click on the Find button and that highlights the object on the page as shown in the below picture.

Highlight-object-SeleniumIDE

I think this post adequately describes how to construct the XPath for Test Automation with Selenium.

{ 13 comments… read them below or add one }

devraj May 24, 2012 at 6:46 am

Sir i tried to copy the xpath of advanced button as shown in the figure and paste it into IDE but its not working. Help me.
devrajsingh06@in.com

Reply

seetaram May 25, 2012 at 3:09 pm

According to me it is better to understand the xpath concept and try to write lot of xpaths. Try to find them through Selenium IDE. this should help you a lot.

Reply

Vikas Singh July 9, 2012 at 11:16 am

Use IDE to identify xpath..in that u can see absolute, relative and index path. Try to use always relative xpath because it is safer.

Reply

seetaram August 13, 2012 at 2:46 pm

Vikas,

I don’t suggest IDE to identify xpath. With the firebug and xpath checker we can create better xpaths for dynamic objects.

Reply

prashant November 23, 2012 at 9:43 am

you just have to provide the xpath shown in the screenshots. pls let me know if u face the issue still.

Reply

radhika July 24, 2012 at 11:50 am

very good article…. thanks for sharing.

Reply

prashant November 23, 2012 at 9:42 am

even though I started only today, I could crack both the examples. thanks for sharing this detailed info.

Reply

Reeti January 18, 2013 at 9:52 am

A very helpful site.Ausumn:)

Reply

Subhasri February 5, 2013 at 6:50 am

Hi Seetaram,

I’m new to selenium.. I have just stepped into learning Selenium with selftechy.com

I have to write xpath for a date picker.
When i try to view the xpath using “view xpath”, the view path itself not opening.

I could figure out the dates, prev, close buttons of the Date Picker but could not find the month and year drop down.

And also the developers have made the field to be read only as i could not even use Type command.

Kindly help me!.

Reply

a October 7, 2014 at 1:41 pm

this site is so useful man

Reply

David July 8, 2014 at 1:40 pm

Want to add one more point : we can view xpath by several plugins like IDE, view xpath , and chrome plugins. I saw here see for explanation http://edu.yoursfriends.com/281/how-to-create-a-xpath-for-selenium-web-driver

Reply

samanth k August 27, 2014 at 6:07 pm

A very helpful site for me ,thanks a lot

Reply

Ravichandra July 2, 2015 at 9:14 am

how to find One xpath which will get all the links and images in a web page.

Reply

Leave a Comment

Previous post:

Next post:

Do you want to get updates on the recent articles written? Please subscribe to RSS feed or Email