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:
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:
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:
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:
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.
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:
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.
I think this post adequately describes how to construct the XPath for Test Automation with Selenium.
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
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.
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.
Vikas,
I don’t suggest IDE to identify xpath. With the firebug and xpath checker we can create better xpaths for dynamic objects.
you just have to provide the xpath shown in the screenshots. pls let me know if u face the issue still.
very good article…. thanks for sharing.
even though I started only today, I could crack both the examples. thanks for sharing this detailed info.
A very helpful site.Ausumn:)
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!.
this site is so useful man
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
A very helpful site for me ,thanks a lot
how to find One xpath which will get all the links and images in a web page.