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.
- Install Firebug
- Firebug For Firefox Add On
- Firebug For Firefox Mac
- Firebug For Firefox For Mac
- Install Firebug Firefox
- Firefox Firebug Plugin
Download Mozilla Firefox, a free Web browser. Firefox is created by a global non-profit dedicated to putting individuals in control online. Get Firefox for Windows, macOS, Linux, Android and iOS today! Type 'about:support' in the address bar and press enter. Under the page logo on the left side, you will see 'Application Basics.' Under this find 'Profile Folder.' To its right press the button 'Show Folder.' This will open your file browser to the current Firefox profile. Now 'Close Firefox.' Firebug is great, but Safari provides its own built-in development tools. If you haven't already tried Safari's development kit, go to Safari-Preferences-Advanced,.
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.
Install Firebug
Secondly, we’ll give away some unique tricks to help you find locators on the web pages. Audio unit for mac.
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.
Firebug For Firefox Add On
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?
Firebug For Firefox Mac
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.
Before launching any new website, feature, or upgrade, it has to be tested. The worst nightmare of any programmer, designer, or business is to launch a broken website that drives away users and hurts reputations. It will only create more work, more headaches, and lost profits.
Luckily, there are many great tools for web development testing. These tools test everything from CSS validation to website speed. Making sure that users and customers have a problem-free experience should be the goal of any website. These tools are the final step in that process.
1. WebSitePulse Test Tools
Firebug For Firefox For Mac
Want a fast test for response time, file size, and links? WebSitePulse Test Tools provides a series of quick and easy-to-use tests that graph out everything from website speed to link errors. It also provides numbers on file sizes, redirect speed, and DNS.
2. XenoCode Browser Sandbox
Browser testing is one of the most tedious and frustrating parts of web development. What designer or programmer hasn't screamed bloody murder at broken alignments in Internet Explorer 6? One of the difficult parts of browser testing is that no developer can have every browser type on a single computer for proper testing.
Enter XenoCode Browser Sandbox, a series of virtual applications that can run all popular browsers simultaneously. It does not even require the installation of software. However, XenoCode's Browser Sandbox can be heavy in some browsers and is still lacking in a Mac version.
3. Firebug Firefox Extension
The favorite extension of programmers everywhere, Firebug is one of the best applications around for debugging issues with front-end code and CSS. If there's any image or style that's out of line, checking it out with Firebug is the best response. It's even possible to change styles within the extension to see how a website will actually appear in the browser.
4. Load Impact
If a website goes viral and Digg, Twitter, and StumbleUpon all converge on it at once, will it be able to handle the stress? Load Impact helps answer that question. It simulates large userload on web servers to determine whether or not they can handle the high traffic load. It comes with a free version and several paid versions.
5. Safari Web Inspector
One of the gems of Apple's Safari web browser is its Web Inspector feature. Web Inspector, only available after turning on the development tab, displays stylesheets, images, and scripts on any webpage. However, the most useful part of Web Inspector is its Network feature, which shows in real-time the order and speed in which documents and scripts transfer from the server to the browser. Use it to find which scripts, files, or images are placing the most strain on browsers. Then fix it.
6. Web Developer Firefox Extension
Web Developer is a robust Firefox extension that no developer should be without when testing a website. It provides a wide range of tests, including testing for broken images, testing layouts in multiple screen sizes, viewing cookie information, and validating mark-up. It's the ultimate testing companion for Firefox users.
Install Firebug Firefox
7. W3C Validation Services
W3C is THE standard in all of web validation. The W3C Validator looks into the markup of any website and display errors based on industry standards. It comes in over a dozen languages and a dozen varieties. Here are some of the most important validators:
- W3C Markup Validation - W3C CSS Validation - W3C mobileOK Checker - W3C Link Checker - W3C Feed Validation Service
These tools are designed to make websites as fast and bug-free as possible by detecting problems early. At the very least, they will let a developer know whether or not he or she needs to scream at Internet Explorer 6 for a while.
Image courtesy of iStockphoto, karimhesham
More web development resources from Mashable:
- 10 Most Common Misconceptions About User Experience Design
Firefox Firebug Plugin
- Web Design Toolbox: 130+ New Tools to Make You a Better and Faster Designer
- Web Development Toolbox: 120+ New Tools for Web Development