Steps To Get Element XPath/CSS Using Firebug And FirePath Add-On Of Firefox

We learnt how to Install firebug and firepath add-on In Mozilla Firefox browser In my previous post. Now this Is time to learn how to get XPath and CSS Path of any element using firebug and firepath add-on. If you remember, We already learnt different ways to get XPath of any element

using many different examples In THIS POST. So I will not describe same thing here. We will look only at how to use firebug and firepath add-on to get XPath and CSS Path In this post.

There are two types of XPath. 1. Relative XPath 2. Absolute XPath. You can read difference between Relative and Absolute XPath on THIS PAGE.

We will use "First name" text box which Is given on THIS PAGE to get Its the XPath and CSS Path.

Get Relative XPath of Element using firebug and firepath

Steps to get relative XPath

Go to THIS PAGE.

1. Click on Firebug Icon from toolbar as shown In bellow Image. It will open firebug Inspector window.
2. Select FirePath tab from firebug window.
3. Click on firebug Inspector Icon.
4. Click on "First name" text box.
5. You will get relative XPath of "First name" text box In XPath text box.

Get Absolute XPath of Element using firebug and firepath

Only difference between steps to get relative XPath and absolute XPath Is you need to select "Generate absolute XPath" option from FirePath tab option selector as bellow.

Steps to get absolute XPath.

Go to THIS PAGE.

1. Click on Firebug Icon from toolbar.
2. Select FirePath tab.
3. Select "Generate absolute XPath" option from FirePath tab option selector.
4. Follow steps 3 to 5 of get relative XPath section. You will get absolute XPath of element as shown In bellow Image.

Get CSS Path of Element using firebug and firepath

Now you know steps to get XPath of element using firebug and firepath. You need to select CSS to get CSS path of any element as described In bellow Image.

Steps to get CSS path of element.

1. Select CSS as shown In bellow Image.
2. Follow steps 3 to 5 of get relative XPath section. You will CSS path of element as shown In bellow Image. 

This way we can use firebug and firepath add on to get XPath or CSS path of any element. Also you can view THIS POST to know how to use firebug and firepath with webdriver firefox instance.

<< PREVIOUS || NEXT >>