Usage of developer tools ,Firebug and Firepath

In the previous post, we have seen How to configure selenium with Eclipse? In this post, we will see the Usage of developer tools ,Firebug and Firepath.

Developer Tools ,also known as Web Development tools are nothing but the browser add-Ons or built-in feature in browsers. These can be used to test the user interface of any web application.

Almost all the famous browser like Google Chrome, Firefox, Internet Explorer,Opera and safari etc. Developer tool allows user to debug and interact with web technologies like CSS, HTML and DOM etc.

Mostly, it will be available in all the browser by default. To open it, either you can go tools –> Developer Tools Option. It has a short cut key to open, which is F12. Open a browser and pres F12 to see a developer tool.

What is Firebug?

Firebug is a free and open source Web Browser extension or developer tool for Mozilla Firefox. This can be used to debug and edit any web application opened in the browser.

How to install Firebug?

It is very easy to install.As a prerequisite,  You need to have Mozilla Firefox Installed on your system. Open Firefox, and type about:addons in the address bar. You will see the screen as shown below. In the search box, type Firebug and hit Enter.

Click on Install button and Install the Firebug successfully.

What is Firepath?

FirePath is a Firebug extension , which is used to inspect elements present in the Web application. (Element could be anything like Edit box, Web page, Button. image etc.)

It is able to generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors which can be used in the programming to identify those Web Elements.

How to Install FirePath?

Follow almost the same steps , as we have done for Firebug. Instead of searching Firebug, this time search for the FirePath.

After installing Firebug, You have 3 ways to open it.

1. Go to Tools –> Web Developer –> Forebug –> Open Firebug.

2. You will see an bug like icon in the right top corner in the Firebug browser.

3. You can directly press F12. It will open the Firebug.

Where to find FirePath and how to use it?

Once you will open Firebug, you will observe one tab called ‘FirePath‘ in the FireBug itself.

You will observe an icon in the left top corner of Firebug. This is used to inspect the element in the web Application.

e.g.

Suppose, we want to inspect the username edit box of the Gmail page.For inspecting , do the following steps.

1. Open Firefox Browser
2. Open Gmail application (Page where username edit box is available)
3. Click on the Icon in Firebug to inspect the username
4. Once you click on the icon , take he cursor to the element which we need to inspect
5. In our case , it is username. So, with the cursor ,click on the username

Expected: It will highlight the username and show its HTML in the Firebug pane.

If you will observe, in the Firepath tab It has captured some value like “.//*[@id=’Email’]. This is nothing but the XPATH which will be used to identify the edit box ‘username’ during execution. In other words, this XPATH will be used for Object identification. There are 2 types of XPATH that we will see in the end of the Post.

In another highlighted box, we can some attributes like id=”Email”, type=”email” etc. These are nothing but the combination of “property=value”. These are properties and values of username fields given at the time of development of the application.

Types of XPATH: 

There are 2 types of XPATH.

1. Absolute XPATH
2. Relative XPATH

1. Absolute XPATH: The formation of Absolute XPATH starts from the root node or a single forward slash (/) in the DOM. The root node is html.

To generate the Absolute XPATH in FirePath, Check the option “Generate absolute xpath” as shown in the below image.

After this, again inspect the element. In our case, it is Gmail Username.

Absolute XPATH of username:

html/body/div[1]/div[2]/div[2]/div[1]/form/div[1]/div/div[1]/div/div/input[1]

2. Relative XPATH:

Relative path can start from any node , not necessary tostart with root node(html) . It should start with double forward slash(//). If you uncheck the option “generate Absolute XPATH”, then relative path will be generated.

//*[@id='Email']

CSS Selectors:

FirePath give one moe locator type which is CSS selector. It can also be used for object identification like XPATH. We will learn about these in later post.

For Selecting CSS, choose the option CSS instead XPATH as shown in figure below. It has generated CSS “#Email” for username.