Firebug and FirePath add-ons of Firefox browser are playing major role to get the XPath and CSS path of any element easily and quickly. Earlier we learnt how to use firebug and firepath add-on with Firefox browser to get XPath or CSS of any element In THIS POST. Now supposing I need both. Firepath is used to identify the xpath. But I could not see any useful plugin like that in firefox quantum browser.Please let us know if there is any alternative for firepath in firefox quantum version selenium firefox selenium-webdriver firefox-addon firebug.

Jun 11, 2020 Usage 1. Click on the plugin icon, cursor will be changed to the crosshair 2. Hover over the desired element (elements are highlighted on hover) 3. Click on the element and his xPath will display in the panel at the bottom of the page. Firebug development is discontinued and it does not work anymore once multi-process Firefox is enabled and clicking the Firebug button opens the Firefox DevTools instead. You can read more about this in the related Mozilla Hacks blog post. This also affects FirePath, because it doesn't work with the Firefox. Firepath and Firebug are very useful Firefox add-on. We need to download and install Firepath and firebug to get xpath in selenium. Download firepath and firebug add-ons. Earlier we learnt how to Install WebDriver Element Locator Firefox add-on and get XPath of any element using It as described In THIS POST.

Let’s start to learn how can we install and use Firebug and FirePath, the two most used Firefox browser plugins for test automation developers.

In our last blog post, we’d explained various types of Selenium locators with useful examples. If you are just a beginner in test automation, then you must read this post.

The next step for you is to learn about the tools that can help you in finding the locators.

In today’s post, first, we are sharing the step by step instructions to install the FireBug and FirePath add-ons for Firefox.

Secondly, we’ll give away some unique tricks to help you find locators on the web pages.

Here is the table of content which you can use to navigate throughout the post.

How to use FireBug and FirePath to find locators?

What is XPath?

XPath is a technique for uniquely identifying an element on a web page. It behaves like an address to an HTML element such as check boxes, text, images, links, and divs, etc. In Selenium, we treat XPath as one of the most trusted element locators. XPath is much more than an address as it not only points to the end point, it also contains the whole map to lead to a destination.

What is FireBug Add-on?

Firebug is the most famous add-on for the FireFox browser. It gels with FireFox so well to bring you plenty of tools for web development. It gives you control over the document object model of the web page so that you can modify, manage, and monitor the CSS, HTML, and JavaScript in real-time.

Why is the FireBug useful in Selenium automation?

Usually, there are four types of operations that you do with the FireBug add-on.

1- Display source – It gives you the ability to review the HTML of the web page after the JavaScript engine completes it processing.

2- Highlight changes – It allows to detect and highlight (in Yellow) any HTML changes as they appear on the web page. This feature would fetch your attention instantly to make sure nothing gets missed.

3- On the fly Inspection – FireBug has its “Inspect” option for quickly viewing the prospective locators as you exercise it on a web element.

4- Copy HTML – You can easily copy the HTML code of the page or part of a web page using the “innerHTML” property or the XPath expression for the element.

How to install FireBug in FireFox browser?

FireBug is an add-on which you can easily download from the FireFox plugin store.

1- Follow the menu option as Tools >> Web Developer >> Get More Tools.

2- The above action will lead you to a web page as shown in the below image. There you will find an option to download/install the FireBug add-on. You should click the “Add to Firefox” button to begin the plugin installation.

3- Upon clicking the add link, you will see the below popup. Now, click the “Install” button to complete the installation.

4- After finishing the FireBug installation, you can use “F12” shortcut key to launch the Firebug add-on. Check out the below screenshot.

Learn how to use FireBug to find element locator?

It is easy to use FireBug, just follow the below steps.

1- Right click on any web object and press the “Inspect Element with Firebug” option. It’ll open up an HTML code window as shown in the below image.

2- From the code window, again right click and select the “Copy XPath” option to retrieve the element’s XPath locator or you can try other ones as well.

What is FirePath add-on?

This plugin extends the capability of the FireBug add-on. It brings the options to modify, inspect and produce XPath and the CSS Selector locators.

Why is the FirePath useful in Selenium automation?

1- You can supply custom XPath values and test their correctness by spotlighting the effects directly on the Webpage.

2- It returns the XPath of the element you’ve selected Like the Firebug add-on does.

How to install FirePath in FireFox browser?

We’ve told above that FirePath only extends the FireBug capabilities. So you should install it after adding the FireBug add-on.

1- It is the same process as we did for the FireBug add-on. Just go to Tools >> Web Developer >> Get More Tools.

2- Search for the FirePath plugin and click on the “Add to Firefox” button.

3- After clicking the add option, the FirePath installation dialog will open as shown below. You’ll have to press the “Install” button to finish the process.

4- Now, you can give the “F12” command and check the “FirePath” option got added in the Firebug’s toolbar.

Learn how to use FirePath to find element locator?

It is, even more, easier to use FirePath than FireBug. Check out the below steps for help.

1- Open FireBug and click on the “FirePath” tab. There you can find an XPath edit field which would point to the XPath of any selected web element. Here you can write a custom XPath and use the “Highlight” button to verify it.

2- The FirePath plugin makes the presentation of the XPath pretty straight. You can easily copy the XPath of the selected web element. And later use the saved XPath value in the test automation project.

Live Action – Installing and Using Both FireBug and FirePath in FireFox.

Now, it’s time to summarize what you’ve learned from this post. We’ve brought you the animated GIF, which contains the step-by-step process of the plugin installation and the usage flow as explained in the above sections.

Compare FireBug and FirePath.

The fundamental difference between the two is that FireBug returns the Absolute XPath whereas the FirePath returns the relative path. Check out the below examples for more clarity on the difference between the FireBug and FirePath. Though you can also tune the FirePath setting to produce the absolute XPath as well.

Best,

TechBeamers.

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 ?

Please follow the below steps for installing the Firebug Addon for Firefox Browser:

1. 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.
2. 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
3. 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

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

Firepath For Firefox How To Show It

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

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

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)

Firepath Add Ons For Firefox

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:

Firepath Tool

9. Click on the Dropdown field as shown below and select ‘CSS’

Download Firepath For Firefox