Selenium – How to write XPath to identify objects?

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:

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:

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.