6 Xpath,Firebug and Firepath

Xpath

Xpath is the unique identification of an element on a webpage. It acts as an address to a web element like text, text box, radio button, group of radio buttons, Combo box, Tabs, Links, Images and any other web element on web page. We use Xpath in Selenium as element locator. In real world we use address to uniquely identify a house or a colony(group of houses), similarly in Selenium we use Xpath to uniquely identify an element on the webpage.

Firebug and Firepath 

 Firebug and Firepath are two useful tools we will be using to extract Xpath of an element i.e location of an element on webpage.

First we will see installation of these tools and then we will try to explore these tools.

How to install Firebug?

Note: Make sure you have latest version of Firefox or at least version greater than 5.0 since Firebug and Firepath are add-ons to Firefox.

You can download firebug in 2 ways,
Method 1:
1. Goto http://getfirebug.com/ in your Firefox browser.
2. Click on Install Firebug and you will be redirected to downloads page.
3. From the options listed, download the version that is compatible with version of Firefox installed on your machine.

Method 2:
1. Open Firefox.
2. Goto tools->addons.
3. Search for addon "firebug" and install the addon.
4. Restart your Firefox browser.

How to install Firepath?

Firepath is an extension to Firebug. You can download Firepath in 2 ways,
Method 1:
1. goto https://addons.mozilla.org/en-US/firefox/addon/firepath/ in your Firefox browser
2. click on "Add to Firefox" button and then click on "Install Now" button on Software installation window. (refer snapshot below).
3. Restart your browser.

Method 2:
1.Open Firefox browser and goto tools->addons
2.Search for addon "firepath" and install the addon
3.restart your Firefox browser.


How to check if Firebug and Firepath are properly installed?

1. Open Firefox

2. Click on Tools -> Web Developer -> Firebug -> Open Firebug

3. You will observe a window opened at the bottom of the browser with a tab Firepath. (refer snapshot below) 

Now that we have Firebug and Firepath installed on Firefox browser, we are all set to learn, how to extract Xpath of a web element on a web page.

Extracting Xpath of a web element

In this section we will see extracting Xpath of elements on http://www.questionselenium.com/

Example 1:

Extracting Xpath of "Selenium IDE" tab

1.Open Firefox

2.Open www.questionselenium.com

3.Click on Tools -> Web Developer -> Firebug -> Open Firebug.

4. Click on "Inspect Element" button on firebug window (refer snapshot below) and move your mouse on to the tab "Selenium IDE". As in you move your mouse onto Selenium IDE tab you will see Selenium IDE tab is highlighted in a blue box and also as you click on the tab, Xpath is generated in to Xpath field(refer snapshot below)

Congrats you have learned and extracted your first Xpath.

Note: Xpath generated in above example is  ".//*[@id='PageList1']/div/ul/li[2]/a" but we should discard the dot "." from the Xpath when we use it. This means actual Xpath is "//*[@id='PageList1']/div/ul/li[2]/a"

we use this Xpath as element locator in Selenium IDE , RC and WebDriver.

Example 2:

Extracting Xpath of "Search box" on www.questionselenium.com

1.Open Firefox

2.Open www.questionselenium.com

3.Click on Tools -> Web Developer -> Firebug -> Open Firebug.

4. Click on "Inspect Element" button on firebug window and move your mouse on to the search box. As in you move your mouse onto search box you will see it is highlighted in blue and as you click on the search box,  Xpath is generated (refer snapshot below).

This is the way we will extract Xpath of a web element on a webpage and use it in our Selenium programs. 

Creating your own Xpath

What is the need of creating your own Xpath?

• At times Xpath generated by Firebug are too lengthy and you see there is a possibility of getting a shorter Xpath. In such scenarios we create our own Xpath.
• Firebug and Firepath are extensions to Firefox. If your application is on Chrome or IE, then we don't have such effective tools to generate Xpath for us. You might find some tools with little search over Google for Chrome and IE, but believe me, they are not as effective and easy to use as Firebug and Firepath. In such scenarios, we should be able to create our own Xpath. 

We can create our own Xpath and in order to create our own Xpath we depend on html code of a web element and mainly its properties. Let us understand this with an example. 

Consider a Text field on a webpage and its HTML code would be similar to

<input type="text" id="mainsearchbox" class="sampleclass" name="searchbox" />

Note: Syntax of Xpath derived from properties of a web element is //[@property='value']
So in this example we see various properties like id, class and name which uniquely identifies this web element. Hence according to the syntax mentioned above we can have multiple Xpath for the same element as follows,

//[@id='mainsearchbox']
//[@class='sampleclass']
//[@name='searchbox']

Assume there is another search box with the same class property on the webpage. In such scenario it is not reliable to use xpath "//[@class='sampleclass']" because if we use this Xpath in our program, we can see some unexpected behavior. There cannot be two houses with the same address. If there are two houses with the same address then we cannot uniquely identify them. We should always pick unique property of a web element to create our Xpath.

At times we see Xpath generated from Firebug are too lengthy. This is because the element we are planning to locate is not assigned with properties like ID, Name and Class.

We witnessed how important it is to assign properties like ID, Name and Class to a HTML web element. Assigning these properties will make a web application Selenium friendly to be automated and this is the same reason we request our developers to assign web elements with properties and unique values.

More on XPath at Xpath w3schools tutorial

---

After finishing this module, there might be a question in readers mind "How to find Xpath on web pages that cannot be opened in a Firefox browser?" . I will address this question in another post shortly. Meanwhile follow the website and enjoy your learning. Thank you.