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.
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
- Using F12 keyboard key
- 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.
Comments
Post a Comment