Install FireBug Addon for Firefox
Firebug (Firefox Add-on) is a web development tool that facilitates the debugging, editing and monitoring of any website’s CSS, HTML, DOM and JavaScript. In Selenium, Firebug is used to inspect the UI elements of the web application under test.
How to Install Firebug ?
Firepath and Firebug are very useful and powerful Firefox add-ons that could be use to inspect and generate XPath 1.0 expressions. Before using them, you need to install them in Mozilla Firefox browser. Make your Mozilla Firefox browser open and active, and then follow the steps to install firebug and firepath. 2.FirePath Installation: Firebug is Add-on to Firebug,Installation process is same like firebug. Open Firefox browser –Tools–Add-ons–Extensions–search for Firpath–Install. Once you install Firepath, Restart the Firefox browser, open any website any open Firbug.
You can use Firefox TruePath or Chrome TruePath. This XPath Plugin dynamically generates multiple relative XPath, just right click on the target element. TruePath Supports. Page Object XPath,. Normal XPath format,. XPath in iFrame,. XPath in F. Download Firefox extensions and themes. They’re like apps for your browser. They can block annoying ads, protect passwords, change browser appearance, and more.
Please follow the below steps for installing the Firebug Addon for Firefox Browser:
- Verify that a Firefox is instead in your system else download it from http://www.mozilla.org/en-US/firefox/new/ and read the version of the Browser from About Firefox in Help menu.
- Launch the Firefox Browser and browse for https://getfirebug.com/downloads . Then, select the Stable FireBug version which is compatible with your Firefox Browser version installed in Step#3 and click on ‘Download’ link
- Ensure that Firefox ADD-ONS page is displayed with ‘FireBug’ add-on and click on ‘Add to Firefox’ button to install the ‘FireBug’ add-on.
4. Click on ‘Install Now’ button on the displayed Popup Window.
5. After Installation restart (i.e. close and reopen) the Firefox Browser.
6. Ensure that FireBug icon is displayed on the FireFox Browser Window as shown in the below screenshot:
Firepath Addon for Firefox
Before explaining how to install Firepath, I would like to explain why Firepath is used in Selenium Test Automation. Firepath is used to create the CSS and XPath locators to locate the UI elements of the Web Application Under Test.
How to Install Firepath ?
1. Open Firefox browser and access https://addons.mozilla.org/en-US/firefox/addon/firepath/2. Ensure that Firefox Add-ons page is displayed with Firepath Add-on
1. Open Firefox browser and access https://addons.mozilla.org/en-US/firefox/addon/firepath/2. Ensure that Firefox Add-ons page is displayed with Firepath Add-on
3. Click on ‘Add to Firefox’ Button to download the Firepath Add-on
4. Ensure that a Popup dialog is displayed and click on ‘Install Now’ button on the displayed dialog
5. Restart (i.e. Close and Reopen) the Firefox Browser after Firepath is installed
6. Click on FireBug icon on the top right side of the page as shown below:
7. Ensure that Firepath tab is now displayed in the FireBug interface after installing Firepath as shown below:
How to use FireBug and Firepath
Firepath Plugin For Firefox
1. Launch Firefox Browser and browse any site say www.google.com
2. Press F12 key or click on the ‘FireBug’ icon on the Firefox Browser
3. Ensure that the FireBug options gets displayed as shown below
2. Press F12 key or click on the ‘FireBug’ icon on the Firefox Browser
3. Ensure that the FireBug options gets displayed as shown below
4. Click on the ‘Inspect Element’ option of the FireBug as shown below, select any UI element on the page say ‘Google Logo’ and ensure that the source code of the selected UI element (i.e. Google Logo in this example) is highlighted as shown below
5. Observe that the above highlighted source code is in html format. We may need this source code to identify the properties of the selected UI element (i.e. Google Logo in this example)
6. For example if we want to know the id property details of the selected UI element Google Logo. First we need to inspect the Google Logo by following the above 4 steps and copy the ‘id’ details from the highlighted source code as shown below7. Click on the ‘Firepath’ tab to find out the Xpath value of the inspected element (i.e. Google Logo in this example) as shown below:
8. Ensure that ‘Xpath’ property value of the selected UI element (i.e. Google Logo) is displayed by default as shown below:
9. Click on the Dropdown field as shown below and select ‘CSS’
10. Ensure that ‘CSS’ property value of the inspected UI element (i.e. Google Logo) is displayed as shown below11. You can Copy the ‘CSS’ Selector property value in Step 10 or ‘XPATH’ Selector property value in Step 8 of the inspected element.
FirePath addon is a Firebug extension that includes a development tool to review, edit and produce XPath 1.0 articulations, CSS 3 selectors and JQuery selectors.
This module broadens the ability of the FireBug add-on. It brings the choices to change, investigate and produce XPath and the CSS Selector locators.
You can supply custom XPath values and test their rightness by spotlighting the impacts straightforwardly on the Webpage. It restores the XPath of the component you’ve chosen as the Firebug add-on does.
We’ve told above that selenium FirePath just expands the FireBug abilities. So you should install it after adding the FireBug add-on.
Step by step instructions to Download and Install Firepath Addon
Step 1- First Install the FireBug and then Go to Tools > Web Developer > Get More Tools.
Step 2- It will open a Webpage and will show all the modules accessible for Firefox program. As I said before that it is an extension to Firebug, you have to click on the Extensions link and the type Firepath on the Search field. As we need FirePath addon, simply click on Add to Firefox button for FirePath.
Step 3- Hit on the “Install Now” button to continue.
Step 4- Once it is installed, it will request to restart the program. Click on the Restart Now button.
Step 5- Once it is opened, press ‘F-12′ to open Firebug tool. It will show the FirePath on the same console like this:
Difference between FireBug and FirePath Addon
The main contrast from an Automation tester perspective is FireBug returns Absolute XPath and FirePath returns Relative XPath.
Firepath Tool
Pros of utilizing FirePath Addon:
- Edit XPath articulations, CSS3 selectors and JQuery selectors.
- Assess the articulation/selector on any HTML or XML records.
- Show the consequence of assessments in a Firebug-like DOM tree.
- Highlight the outcomes straightforwardly on the document shown by Firefox
- Produce an XPath articulation or a CSS selector for an element by right-clicking on it and choosing “Inspect in FirePath” in the setting menu.
- Characterize the evaluation context (parent) of an articulation/selector.
- Pick the report wherein to assess the articulation/selector.
Although the FirePath Addon played an important role in order to locate selenium scripts, so, it is vital to install it first. You can follow the steps mentioned above and easily download as well as install the FirePath