Skip to content

Iptv Assist

Learn More from us

Menu
  • HOW TO
  • Firestick
  • Chromecast
  • PC Apps
  • Lg Smart TV
  • IPTV Services
  • Automation Testing
  • Smart TV
  • Software Testing Tools
  • Contact Us
Menu

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

Posted on January 22, 2023

Best Iptv Service Provider 2023 With 40k+ Channels And 100k+ VOD . 24/7 Suppport . Paypal Supported

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.

Best Iptv Service Provider 2023 With 40k+ Channels And 150k+ VOD . Hurry Up

Just a reminder – this is our 4th tutorial in free Selenium training series.

Recommended IPTV Service Providers

  1. IPTVGREAT – Rating 4.8/5 ( 600+ Reviews )
  2. IPTVRESALE – Rating 5/5 ( 200+ Reviews )
  3. IPTVGANG – Rating 4.7/5 ( 1200+ Reviews )
  4. IPTVUNLOCK – Rating 5/5 ( 65 Reviews )
  5. IPTVFOLLOW -Rating 5/5 ( 48 Reviews )
  6. IPTVTOPS – Rating 5/5 ( 43 Reviews )

 

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.

Selenium script using Firebug

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?
  • Creating Selenium Script using Firebug
  • Conclusion

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 would be discussing later in this tutorial.

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.

install firebug

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.

install firebug 1

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.
  • install firebug 2
  • 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.

Scenario:

  • 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.

Selenium Script using Firebug 1

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.

Selenium Script using Firebug 2

Selenium Script using Firebug 3

Step 4 – Open the application under test (https://accounts.google.com) in the Firefox.

Step 5 – Launch Firebug in the web browser.

Selenium Script using Firebug 4

Step 6 – Select the empty test step within the Editor.

Selenium Script using Firebug 5

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.

Selenium Script using Firebug 6

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.

Selenium Script using Firebug 7

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.

Selenium Script using Firebug 8

Step 11 – Paste the title copied in step 8 into the Target field of the second.

Selenium Script using Firebug 9

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.

Selenium Script using Firebug 10

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.

Selenium Script using Firebug 11

Choose “Inspect Element with Firebug” option. Notice that the Firebug automatically highlights the corresponding HTML code for the web element i.e. “Email Textbox”.

Selenium Script using Firebug 12

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)

Selenium Script using Firebug 13

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.

Selenium Script using Firebug 14

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.

Selenium Script using Firebug 15

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)

Selenium Script using Firebug 16

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.

Selenium Script using Firebug 17

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.

Selenium Script using Firebug 18

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)

Selenium Script using Firebug 19

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.

Selenium Script using Firebug 20

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 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

Related

Best Iptv Service Provider 2023 With 40k+ Channels And 150k+ VOD . Hurry Up

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • IPTV List: Best iptv lista 2023
  • IPTV Premium: Best Premium IPTV Service Provider List And Benefits
  • Nikon IPTV Review: Over 10,000 Live Channels for $12/Month
  • Iptvwings. Com Review: +18000 Live IPTV Channels ,+70000 Movies, +40000 TV show For $15/1 month
  • IPTVUNO Review: More Than 16000 Live TV channels, 55,000 Movies & VOD For $15/Month

Recent Comments

  1. IPTV List: Play lista iptv 2022 - Iptv Assist on Best IPTV Player in 2023 for Watching Live TV
  2. Cola IPTV – Over 18,000 Live Channels for $12/Month - Iptv Assist on FileLinked – How to Install on Firestick/Fire TV and Android Devices
  3. Cola IPTV – Over 18,000 Live Channels for $12/Month - Iptv Assist on 50+ Best IPTV Service Providers for Streaming Live TV 2023
  4. XoomsTV IPTV – Over 11,000 Channels & VOD for Under $13/Month on Best VPN for IPTV in 2023 and How to Install on Firestick/Android
  5. Voodoo Streams IPTV Review – Over 12,000 Channels for $11/Month - Iptv Assist on Dynasty TV IPTV Review – Over 6,000 Channels for $10/Month

Archives

  • January 2023

Categories

  • Activate
  • Agile Testing
  • Alternatives
  • Android
  • APK
  • Apple TV
  • Automation Testing
  • Basics of Software Testing
  • Best Apps
  • Breakfast Hours
  • Bug Defect tracking
  • Career in Software Testing
  • Chromebook
  • Chromecast
  • Cross Platform
  • Database Testing
  • Delete Account
  • Discord
  • Error Code
  • Firestick
  • Gaming
  • General
  • Google TV
  • Hisense Smart TV
  • HOW TO
  • Interview Questions
  • iPhone
  • IPTV
  • IPTV Apps
  • Iptv Service SP
  • IPTV Services
  • JVC Smart TV
  • Kodi
  • Lg Smart TV
  • Manual Testing
  • MI TV
  • Mobile Testing
  • Mod APK
  • newestiptv.com
  • News
  • Nintendo Switch
  • Panasonic Smart TV
  • PC Apps
  • Performance Testing
  • Philips Smart TV
  • PS4
  • PS5
  • Python
  • QA Certifications
  • QA Leadership
  • QA Team Skills
  • Quality Assurance
  • Reddit
  • Reviews
  • Roku
  • Samsung Smart TV
  • Screenshot
  • Selenium Tutorials
  • Sharp Smart TV
  • Skyworth Smart TV
  • Smart TV
  • Soft Skills For Testers
  • Software Testing Templates
  • Software Testing Tools
  • Software Testing Training
  • Sony Smart TV
  • Sports
  • Streaming Apps
  • Streaming Devices
  • Tech News
  • Test Management Tools
  • Test Strategy
  • Testing Best Practices
  • Testing Concepts
  • Testing Methodologies
  • Testing News
  • Testing Skill Improvement
  • Testing Tips and Resources
  • Toshiba Smart TV
  • Tutorials
  • Twitch
  • Types of Testing
  • Uncategorized
  • Vizio Smart TV
  • VPN
  • Web Testing
  • What is
  • Xbox
©2023 Iptv Assist | Design: Newspaperly WordPress Theme