In the previous tutorial, we learned how to create automated test scripts using Selenium IDE and its recording feature. We also flipped through populous features of Selenium IDE. We aimed at harbingering the reader with the most vital features and commands of Selenium IDE.
Just a reminder – this is our 4th tutorial in free Selenium training series.
Now that you are accustomed and capable of creating automated scripts using recording mode of Selenium IDE, let us move ahead with another tool which plays a very important role in assisting us to create effective test scripts known as “Firebug”. Firebug helps us in inspecting the properties of web elements and web pages.
Thus, this tutorial is comprised of the installation of Firebug and its usability.
Take a note that the content of this tutorial is not only applicable in the context of Selenium IDE; rather it can be applied to each and every tool of Selenium suite. Thus I would preferably be using term Selenium instead of Selenium IDE.
In this tutorial, lets learn how to use Firebug add-on for creating Selenium scripts. In the process, we will also learn how to install Firebug.
What You Will Learn:
Introduction to Firebug
How to Install Firebug?
For the ease of understanding, we would bifurcate the installation process into the following steps.
Step -1: Launch the Mozilla Firefox browser and navigate to this Firebug add-on download page. The URL takes us to Firefox add-ons section.
Step -2: Click on the “Add to Firefox” button present on the webpage. Refer the following figure for the same.
Step-3: As soon as we click on the “Add to Firefox” button, a security alert box would appear, click on the “Allow” button now.
Step-4: Now Firefox downloads the add-on in the backdrop and a progress bar is displayed.
Step-5: As soon as the process completes, software installation window appears. Now click on the “Install Now” button.
Step-6: As soon as the installation completes, a pop up appears saying that the firebug has been installed successfully. Now choose to close this pop up.
Note: Unlike Selenium IDE, we are not required to restart the Firefox to reflect the firebug installation, rather it comes readily.
Step-7: Now to launch firebug, we can opt either of the following ways:
- Press F12
- Click on the Firebug icon present in the extreme top-right corner of the Firefox window.
- Click on Firefox menu bar -> Web Developer -> firebug -> Open Firebug.
Step-8: Now the firebug can be seen at the bottom of the Firefox window.
Now that we have downloaded and installed firebug, let’s move ahead with the types of locators that we would be creating using firebug.
Creating Selenium Script using Firebug
Unlike Selenium IDE, In Firebug, we create automated test scripts manually by adding multiple test steps to form a logical and consistent test script.
Let us follow a progressive approach and understand the process step by step.
- Open “https://accounts.google.com”.
- Assert Title of the application
- Enter an invalid username and invalid password and submit the details to login.
Step 1 – Launch the Firefox and open Selenium IDE from the menu bar.
Step 2 – Enter the address of application under test (“https://accounts.google.com”) inside the Base URL textbox.
Step 3 – By default, the Record button is in ON state. Remember to tune it OFF state so as to disable the recording mode. Notice if the recording mode is in ON state, it may result in recording our interactions with the web browser.
Step 4 – Open the application under test (https://accounts.google.com) in the Firefox.
Step 5 – Launch Firebug in the web browser.
Step 6 – Select the empty test step within the Editor.
Step 7 – Type “open” in the command text box present in the Editor Pane. The “open” command opens the specified URL in the web browser.
Recommendation: While typing commands in the command text box, the user can leverage the feature of auto selection. Thus, as soon as the user types a sequence of characters, the matching suggestions would be auto-populated.
The user can also click on the dropdown available within the command text box to look at all the commands provided by Selenium IDE.
Step 8 – Now, motion towards the Firebug section within the web browser, expand “head” section of the HTML code. Notice the HTML tag <title>. Thus to assert the title of the webpage, we would require the value of the <title> tag.
Copy the title of the webpage which is “Sign in – Google Accounts” in our case.
Step 9 – Select the second empty test step within the Editor.
Step 10 – Type “assertTitle” in the command text box present in the Editor Pane. The “assertTitle” command returns the current page title and compares it with the specified title.
Step 11 – Paste the title copied in step 8 into the Target field of the second.
Step 12 – Now select the third empty test step in the Editor Pane
Step 13 – Type “type” command within the command text box. The “type” command enters a value in the specified web element on to the GUI.
Step 14 – Now switch to the web browser, bring the mouse cursor to the “Email” text box within the login form and press a right click.
Choose “Inspect Element with Firebug” option. Notice that the Firebug automatically highlights the corresponding HTML code for the web element i.e. “Email Textbox”.
Step 15 – The HTML code in the above illustration manifests the distinct property attributes belonging to the “Email” text box. Notice that there are four properties (ID, type, placeholder and name) that uniquely identify the web element on the web page. Thus it’s up to the user to choose one or more than one property to identify the web element.
Thus, in this case, we choose ID as the locator. Copy the ID value and paste it in the Target field of the third test step prefixed with “id=” to indicate Selenium IDE to locate a web element having ID as “Email”.
(Click to view enlarged image)
Make a note that Selenium IDE is case sensitive, thus type the attribute value carefully and precisely the same as it is displayed in the HTML code.
Step 16 – Click on the Find button to verify if the locator selected finds and locates the designated UI element on the web page.
Step 17 – Now, the next step is to enter the test data in the Value textbox of the third test step within the Editor Pane. Enter “InvalidEmailID” in the Value textbox. The user can alter the test data as and when it is desired.
Step 18 – Now select the fourth empty test step in the Editor Pane
Step 19 – Type “type” command within the command text box.
Step 20 – Now switch to the web browser, bring the mouse cursor to the “Password” textbox within the login form and press a right click.
Choose “Inspect Element with Firebug” option.
Step 21 – The HTML code below manifests the distinct property attributes belonging to the “Password” text box. Notice that there are four properties (ID, type, placeholder and name) that uniquely identify the web element on the web page. Thus it’s up to the user to choose one or more than one property to identify the web element.
Thus, in this case, we choose ID as the locator. Copy the ID value and paste it in the Target field of the third test step prefixed with “id=”.
(Click to view enlarged image)
Step 22 – Click on the Find button to verify if the locator tabbed finds and locates the designated UI element on the web page.
Step 23 – Now, the next step is to enter the test data in the Value textbox of the fourth test step within the Editor Pane. Enter “InvalidPassword” in the Value textbox. The user can alter the test data as and when it is desired.
Step 24 – Now select the fifth empty test step in the Editor Pane
Step 25 – Type “click” command within the command text box. The “click” command clicks on a specified web element within the web page.
Step 26 – Now switch to the web browser, bring the mouse cursor to the “Sign in” button within the login form and press a right click.
Choose “Inspect Element with Firebug” option.
Step 27 – The HTML code below manifests the distinct property attributes belonging to the “Sign in” button.
Choose ID as the locator. Copy the ID value and paste it in the Target field of the third test step prefixed with “id=”.
(Click to view enlarged image)
Step 28 – Click on the Find button to verify if the locator picked finds and locates the designated UI element on the web page.
The test script is completed now. Refer the following illustration to view the finished test script.
Step 29 – Play back the created test script and Save it in the same way we did in the previous tutorial.
In this tutorial, we introduced yet another script creation tool or rather a tool that aids to script creation.
Firebug surprisingly has a great potential to locate web elements on a web page. Thus the user can leverage the tool’s capabilities in creating effective and efficient automation test scripts manually.
Next Tutorial #5: Moving ahead in the next tutorial, we would have a look at the various types of locators in Selenium and their accessibility technique to build test scripts. In the meantime, reader can start building his/her automation test scripts using Firebug.
Have you used Firebug for inspecting HTML elements or for creating scripts? Do you find it useful? Please share your experience in comments
41 thoughts on “How to Use Firebug for Creating Selenium Scripts – Selenium Tutorial #4”
firebug also used in webdriver scripts?
Firebug is dead long time ago.
Yes we do use firebug for identifying web elements while creating WebDriver scripts.
Yes i am able to success in identify object in firebug and my script is also run successfully, and take different site for scripts
Thanks for share this valuable tutorial
Thank you for your kind words.
Which version of Firefox , firebug addon and firepath are need to install. Any body says me firefox 29.0 above version do not support for web driver.! Please confirm.
Thank you very much for sharing such valuable tutorials.
Could you please tell me how can we automate, click on a Google search result?
Came across a situation where a bit confused with identifying objects on web page
For example follow the below steps.
-> logon to facebook using ‘https://www.facebook.com’
-> You can identify the object properties of ‘Email’ and ‘Password’ text boxes uniquely using ‘Inspect Element with Firebug’ option
->But right below the textboxes of ‘Email’ and ‘Password’ there is an title header ‘Sign Up’
Below ‘Sign Up’ header there are some text boxes named ‘First Name’, ‘Last Name’ and so on..If I am trying to identify there properties using ‘Inspect Element with Firebug’ option but it is displaying the same for all the text boxes.
How can I identify them uniquly?
Even I am able to identiy a text box property for example ‘Email’ it is overriding the already existing text how can I come over that.
Write your own xpath: For example –
How to select a value from dropdown using selenium IDE tool.
How to select radio buttons in selenium ide tool
Ur tutorials are great for a beginner like me. Thanks so much.
Thank you very much for sharing such a valuable tutorials.
I have implement this concept in my E-Commerce real time project (Like Flipkart) and found an error. Could you please clarify my doubt.
Simple intro about my project:
Its an e commerce project. It has a Login page and after login it has a homepage including Menu and Submenu for the products (Example – Flipkart –> (Menu – Electronics, Book, Media), (Submenu for Electronics –> Mobiles, –> Samsung).
List of products are displayed under sub menu (10 products per page).
Any few products will be displayed in homepage. I gonna choose a product from home page (This product is dynamic and it will not display in the home page when we refresh the page and it may display after 3 or 4 refreshes of the home page)
The scenarios are
1. Enter URL
2. Give username and Password
3. Click Login button
4. Select Add to cart button for the product which is in homepage.
5. Click View cart button (Add to Cart label is replaced as “View Cart” (Same button in the same place for the same product)
6. It should move to Checkout page.
It was executed successfully till No.3. But shown an error for the 4th step. (Because the product is not displayed in the home page when I execute my test case (But its there in the submenu under menu).
I have given the proper firebug id for all the fields. But its shown an error.
My question is, How to execute my test case successfully if the product is not in the home page (But its in submenu under menu).
Very useful Add in… Thanks for the info.
Could you please let me know why are we adding value as ‘Invalid’ for email/password? Is it just an example?
How to use more than one property to identify the object?
In the above example “id” is used. If i need to use id and type then what would be the syntax?
Thanks for such a fabulous guide, keep tuning.
Thank you so much for this!!
My doubt is how to test a site which having captcha in the login screen,
Thanks a lot for these tutorial. Really helpful. :) loving it!! :D
Apparently the properties look same because controls are of same type (Text boxes) but look closely and you will find the IDs and names are unique.
Still if you face problem, reloading the page might be helpful.
Drop downs store multiple values as options. These options have “value” and label properties. You can use either of them by using click command over the drop down. Below is an example
1. Enter “click” in Command box
2. Enter “id=id of your drop down” in Target box
3. Enter “value=1” in Value box.
This will select the First value in the drop down. Alternatively you can enter “label = your required text from combo list” into the value box and it will select the given text.
Thank you so much for the best tutorial ever.
awesome nice tutorial
I tried the above all steps for creating script and used valid user name and password, but my test case fails at password level by giving a valid password too.
Please help !!
I am able to sign in to redbus application.but i dont know how to search for buses.In the onward date field there will be a calendar icon and a textbox.can you please tell me how to select the date?
I directly mentioned as type id=textbox,value =02-Feb-2017. but the calendar image is not closing which is stopping me from search.please help me with the code for selecting the date of journey
I’m not able to identify the id links etc….
ple help me
what is the difference between the normal inspect element in browsers and the inspect element with firebug?
In the first place it is a wonderful website to learn .I am more than satisfied with the given inputs for us to make selenium more comfortable.I have a small doubt
In the above example it is older version of gmail ,currently am not able to inspect element for “next” option and what if there are no specific locators for that element .How to identify the locator in such case?
hi this is chandu,
what is the use of firebug? if you have selenium IDE, no need of run firebug know. same functions we are identifying in the selenium IDE tool only. whetever function your doing within the browser means it will recorded in selenium IDE only….. why should we use Firebug?? please kindly clarify my doubt
Hi, The latest version of firefox does not support firebug/firepath so what is the alternate option, specially for xpaths, can you please let us know what the alternate option, this solution will be very helpful and thanks alot in advance,,
Firebug isnt available for the latest version of Firefox (Firefox quantum)
how can i use selenium with the last firefox edition?
firefox has firebug as a different edition and browser now.
“xPath Finder” addon can also be used as alternate option for firebug
NOt able to install firebug
ChroPath addon is available in both Firefox Quantum as well as Chrome. It integrates with the developer tools (where Firebug/FirePath have been integrated for Firefox)
Please update this site as firefox is no longer supporting any exclusive browser debugging addons.
How do you run/export/import a firebug script? That bit was lost?
How relevant is Firebug still today in Nov 2020? I’m not seeing anything major here that Selenium IDE version 3 does not help me to do shown.