Xpath Tutorial: A Practical Approach for Selenium Users

Intro

This article is for people who want to use Selenium and need to learn XPath. It is organized in several techniques sections where each has a sample scenario and a sample XPath.

In general, I am not going to get too technical about creating a reference for XPath, instead the main focus will be the outline on how to get the XPath you need for Selenium Test Automation.. You can find a reference at http://www.w3schools.com/XPath/

Getting Ready

You will need Firefox 28.0 with Firebug and FirePath for this tutorial.

Install Firefox 28.0 and launch it. Press Ctrl-Shift-A to bring up the Add-ons Manager. On the left panel click on Extensions and search for Firebug install it and then do the exact same thing to get FirePath.

Firebug & FirePath Quick Guide

Firebug is a tool for developers to inspect HTML elements on a webpage.

Note: Firefox version used here is 28.0 but you can use older versions of Firefox. Just make sure FirePath and Firebug can be used with it and that there are no version issues.

Here is how you would use Firebug and FirePath:

Step 1: Once you installed them bring up a Firefox instances and browse to http://mail.yahoo.com.  Then Right click on first box for username (Yahoo ID)

Step 2: Select “Inspect Element with Firebug:

As you can see the input element with id=username is highlighted in blue. Pay attention to the selected tab in the newly opened window: HTML. There are also other tabs for different operations but for this tutorial you would only need HTML tab and the FirePath tab.

You can have Firebug window embedded or open up as a separate pop-up which ever you prefer.

The left-most button closes Firbug window, the middle button attaches Firebug to the browser window or opens Firebug in a new pop-up window. The right button deactivates Firebug for the current website which we would hardly ever use. 

Step 3: Now tab over to FirePath.

FirePath is a tool that allows us to test our XPath and make sure that we get them right before using it in Selenium. As shown on the image, the XPath has one match and the targeted element is highlighted in the HTML code it’s also marked as dashed-lines in the browser on the right hand side of the image. The “Eval” button on the top right corner of the page is to test your XPath. So place your expression in the XPath box and press Eval, if you get a match you are set, if you don’t you need to revise your XPath expression.  However, if you get more than one match then you have to make your selection stricter or specify which element you specifically want from the list. For example, if //input matches 5 nodes then (//input)[1] will give you the first one and (//input)[2] the second and so forth.

The top left drop down currently selected as “Top Window” indicates where the element is located in terms of frames. In most new web applications the usage of frames and iframes are discouraged but nevertheless there are lots of web applications that uses them.

Quick Review of XPath

In simple words, XPath is an expression used to locate html elements on screen. You can think of it as a query language to target elements on the page. Here are some basic examples:

XPath Expression	Description
//input[@id=’username’]	Returns inputs with id=username
//input[@type=’text’]	Returns all text inputs
//table/tbody/tr[1]	Returns 1st rows of all tables in this page
//div	Returns all the divs in this page
//a[text()=MyText]	Returns a link that has the text matching precisely “MyText”. So <a href=”msn.com”>MyText</a> would be a match but <a href=”yahoo.com”>MyText   </a> won’t match because of extra spaces at the end.
//*[contains(text(),’hel’)]	Returns all elements that contain the text ‘hel’. Here are some possible matches: <div>hello</div> <tr<td>hel   </td></tr> <a href=”#”>Shell</a>

Anything that comes immediately after // is an HTML tag or just use * as wildcard.

Every web page is based on HTML code and it is called DOM (Document Object Model). In fact HTML is an XML document that browsers can render into the nice looking web pages. To locate elements (Textbox, Links, Images, etc.) in a XML document we use XPath.

Relative vs. Absolute Expression

 An absolute expression starts from the beginning of the DOM and follows instructions blindly until it reaches the element. A relative XPath is much smarter and it can figure out the target element based on some hints. For example, on our sample page http://proof.subject-7.com/zul/samplePage.zul the box for Last name has the following absolute XPath: /html/body/div/div/div/span/table/tbody/tr[2]/td[2]

It’s basically a turn by turn navigation that goes like: Start from the beginning DOM (This is because there is only one slash at the beginning) where the tag <html> . Then find the element <body> right after that, then a <div>, another <div> and another <div>. This is followed by a <span> then we arrive at a <table> and  <tbody> then tr[2] selected the 2^nd row and td[2] the second column. BORING!

The good thing about absolute expressions is that most tools like FirePath or Firebug can produce them for you without breaking a sweat.

However, the smallest change to your webpage, such as adding an element or changing positions will break your XPath.

After working with Xpath for almost 6 years, I still sometimes need examples and reference to write my own expressions. To use XPath with Selenium you need to master a handful of techniques without delving too deep into the subject of XPath. This handful of techniques will cover more than 95% of all the XPath you need for your automation.