How to use Firebug?

PREREQUISITE:

Considering you have already installed Firebug on your firefox, if not first go through this post: What is Firebug and How to Install Firebug on Firefox

 

Steps to follow:

1. Launch Firefox.

2. There are couple of ways to bring the firebug frame or view in the firefox browser:

a. Go to ‘Tools’ in the menu bar and choose Web Developer > Firebug > Open Firebug

b. Press F12 key.

c. Click the firebug icon as shown below:

 

firebug1

 

3. By performing any of the operation at step 2, firebug frame would come up as shown below:

 

firebug2

4. Now, open any website as an example say ‘yahoo.com’ and try to inspect the properties of its logo using firebug as explained in next step.

5. Click on ‘Inspect Arrow’ icon and bring the cursor of your mouse over ‘yahoo’ logo at the top and click it, you will see the html code highlight in the firebug frame with blue background, this code corresponds to ‘yahoo’ logo and it shows the properties, attributes information there. please see below screenshot:

 

firebug3

 

6. Now, while working on selenium, you need to look such properties to handle the web element, for example, in the screen above, html code contains the <a> tag with id, class etc. So, you can use them to inspect web elements like in this case ‘yahoo’ logo.

 

NOTE:

How to automate actual selenium test case using firebug help would be explained in upcoming posts.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s