How to Use Firebug for Creating Selenium Scripts – Selenium Tutorial #4

In the previous tutorial, we learned how to create automated test scripts using Selenium IDE and its recording feature. We also flipped through the 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 the free Selenium training series.

Now that you are accustomed to and capable of creating automated scripts using the recording mode of Selenium IDE, let us move ahead with another tool that 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 comprises the installation of Firebug and its usability.

Take note that the content of this tutorial is not only applicable in Selenium IDE; rather, it can apply to every tool of the Selenium suite. Thus I would preferably use the term Selenium instead of Selenium IDE.

In this tutorial, let’s learn how to use the Firebug add-on to create Selenium scripts. In the process, we will also learn how to install Firebug.

Introduction to Firebug

Firebug is a Mozilla Firefox add-on. This tool helps us in identifying or, to be more particular, inspecting HTML, CSS, and JavaScript elements on a web page. It helps us identify the elements uniquely on a webpage. The elements can be found uniquely based on their locator types, which we will discuss later in this tutorial.

How to Install Firebug

For 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

Step #2: Click on the “Add to Firefox” button present on the webpage. Refer to the following figure for the same.

Step #3: As soon as we click on the “Add to Firefox” button, a security alert box will 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 is completed, the 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 Firefox to reflect the Firebug installation, rather it comes readily.

Step #7: Now to launch Firebug, we can opt for either of the following ways:

• Press F12
• Click on the Firebug icon located in the 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 will create 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.

Scenario:

• Open “https://accounts.google.com”.
• Assert the Title of the application.
• Enter an invalid username and invalid password and submit the details to log in.

Step #1: Launch Firefox and open Selenium IDE from the menu bar.

Step #2: Enter the address of the application under test (“https://accounts.google.com”) inside the Base URL textbox.

Step #3: By default, the Record button is in the ON state. Remember to tune it OFF state to disable the recording mode. Notice if the recording mode is in the 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 will 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, and expand the “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 the “type” command within the command text box. The “type” command enters a value in the specified web element onto 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 the “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 the “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 the “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 the “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 the “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 to 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.

Conclusion

In this tutorial, we introduced yet another script creation tool, or rather a tool that aids in 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 will have a look at the various locators in Selenium and their accessibility techniques to build test scripts. In the meantime, the 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 the comments.