Selenium Lesson 9 – Finding Elements using Firebug

While automating the application most important part is identified objects. while identifying the objects we have make sure that object which we have identified is “Consistently Identified”.  In Lesson no 8 we have seen several ways by which we can identify the elements. this lesson will focus on how we will identify the elements using Firebug.

What is Firebug?

Firebug is Firefox add-in. Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for. It has following features:

Inspect : Pinpoint an element in a webpage with ease and precision.
Log : Send messages to the console direct from your webpage through Javascript.
Profile : Measure your Javascript performance in the Console’s Profiler.
Debug: Step-by-step interactive debugging in a visual environment.
Analyze: Look at detailed measurements of your site’s network activity.
Layout: Tweak and position HTML elements with CSS and the Layout panels.

Using the “Inspect” Feature we are going to identify the DOM object of element which we want to recognize.

Let’s start!

Step 1:  Install Firebug:  Download and install firbug on your machine. as it is firefox plugin, you should have firefox installed on your machine.

You can download the firebug from URL :  https://addons.mozilla.org/en-US/firefox/addon/firebug/

After installation, Firbug will appears at location mentioned in the email.

Step 2 : Invoke Firebug : you can invoke firebug intwo ways

1. Using F12 keyboard key
2. using menu : Tools menu > Web Developer > Firebug > Open Firebug

once you open firebug, it will appears at bottom of your webpage.

Step 3 :  Locate and Select the element:   To Locate the element, you have to select the  Inspect element icon shown in image below.

once you select it, now are ready to locate the element on webpage, click on element which you want to locate, you will find, in firebug, html code gets changed and it will show the same code of the element which you have selected on the webpage.

In the image below, i have selected the post tile and same html code gets selected in the firebug.

Step 4: Copy Xpath: now select the highlighted/selected code and right click on it, you will get the contextual menu > on top of it, you will find the various options, in which you will find xpath and css option. select the XPath option.

once you copy the xpath, now i can use it inside your selenium code.

Xpath path copied is : /html/body/div[2]/div[2]/div/div/div/div/article/h2/a

Many times you need to optimize the copied xpath, how to optimize the xpath, we will discuss in separate lesson.

we hope that, now you can effectively use firebug.