Firefox Add-ons - Very useful for testing

Introduction

This article highlights the usage of Firefox add-ons which are useful for testing various Web applications. Firefox is one of the most important browsers for testers working in Web application domain. Specially, with all the add-ons around it, Firefox is certainly essential for testing Web applications. There are add-ons useful for security testing, analyzing page source, accessibility, debugging and pretty much everything you need for Web application testing.

Though IE is the most prominent browser used for browsing through internet, Firefox is catching up fast. Most of the Web developers and Testers use Mozilla Firefox due its user friendly features, add-ons and usability which make life easier for them. Mozilla Firefox is a free and open source Web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation as of January 2010, Firefox had 21% of the recorded usage share of Web browsers.

Why FIREFOX Add-ons for Testing?

Firefox is an open source Web browser and the rate of development of various add-ons covering a wide variety of Web-age development and testing is very high. The variety of Add-ons provided by Firefox is just amazing due to the below factors:

1. Easy to use.

2. Provides even the minute things in detail.

3. Makes life easy for developers to debug, edit and troubleshoot while building Web-pages.

4. Testers find them easy for debugging.

5. Free download.

Apart from the above rich features, the add-ons can be used in various testing types like Security testing, Compatibility, Functional and Scalability testing. No other browser can even try to compete with Firefox add-ons. Knowing the complete list of add-ons would be a dream come true but utilizing the useful add-ons for testing our Web application should be good enough.

Important Add-ons

Picking up the correct add-on to test a feature is very important. Since there are hundreds of add-ons provided by Mozilla Corporation, some time has to be spent for selecting the best add-ons which suits our requirements. Picking up a few important add-ons to explain is also tough since each add-on cover its own area of Web testing. The below list should cover the basic Add-ons which help us in testing our application:

• Http Fox.
• Fire Bug.
• Measure IT.
• Add N Edit Cookie.
• IE Tab.
• Flash Tracer.

Lets look into the features provided by each add-on in detail.

Http FOX

• Used in incoming and outgoing HTTP traffic between the browser and the Web servers.
• Download Link
• Very much helpful in Functional testing

Description:

HttpFox monitors and analyzes all incoming and outgoing data between browser and the Web server. It enables us to profile Web server responses and dig into the headers to check out cookies involved in the requests as well as POST parameters. We need to install the application and Start the recording to analyze the data transmitted.

HttpFox add-on can also capture and reveal the following information’s:

• Time and duration of the query
• HTTP status codes
• HTTP method (POST/GET)
• Duration of the query
• Size
• Type
• URL
• Caching information

Each request has details like:

-URL: URL used to make the GET, POST, PUT methods.

-Type: Type of data being exchanged between the browser and server.

Typical examples are “text/html”, “image/gif” ,text/javascript” ,”image/png” .

-Result Code: Result code indicates the status of the HTTP call made. Fore more on result codes, please visit http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html.

-Method: Type of method made. (GET, POST, PUT, DELETE etc) .

For more on methods, please visit http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html.

-Start Time, Time – Time data provided to analyze the performance of the call.

-Sent, Received –Data transmitted

Information available per request includes:

- Request and response headers:

Explains the details of the headers used in the requests and responses made.

- Sent and received cookies

The details of the transmitted cookies between browser and server are listed here.

- Query string parameters

The Parameters sent to the server while making calls to retrieve data.

- POST parameters

Posted data in the HTTP call sent to the server.

- Response body (Raw and pretty)

The response sent from the server to the browser.

In addition to the above, the HttpFox has features to

1. Start and Stop recording.

2. Clear the call history.

3. Filter the calls.

4. Auto scroll.

5. Drop down to enable/disable the required data in the HTTP call.

Add N Edit Cookie

• Typical Add-on used to add new cookies, editing of both saved and live session cookies stored in a browser.
• Download Link
• Helpful in Security testing.

Description:

As the name suggests the Add N Edit cookie helps us in add, edit and delete a cookie. This tool is pretty much helpful in testing the cookie value and dependencies between the different cookies in a single Web application. This Tool provides flexibility to set a new value to a cookie by providing name, content, host and path information as well as new expiration time for a cookie which basically helps us in cookie validation and testing the session stability/expiry.

This tool has buttons to

1. Edit the cookie.

2. Add a new cookie.

3. Delete a cookie.

4. Filter helpful in finding a particular cookie.

Fire Bug

• A great add on which is helpful in debugging the CSS, HTML, SCRIPT and Http traffic on the Web page.
• Download Link
• Very much helpful in Functional testing.

Description:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. One can edit, debug, and monitor CSS, HTML, and JavaScript live in any Web page.

When installed on fire fox, it basically looks like a bug symbol in the bottom left hand corner. The add-on completely explains the total CSS part of the Web page. Basically helpful for developers in designing the Web page. Testers can be used to test the various Web elements in the page. Using the element inspector we can easily find out properties of any element in the page. Using the NET tab, we can observe all the HTTP calls made on the page.

Fire bug is very useful in finding out all the JS errors on the page for testers. It basically provides us the environment where we can edit the script of page and view how our changes affect the layout of the page. This particular add on is used by a very large set of audience.

IE Tab

• IE Tab allows users to view pages using the Internet Explorer rendering engine from within Firefox.
• Download Link
• Very much helpful in Compatibility testing.

Description:

This is an interesting add on which helps viewing an IE version Web page in Firefox browser. This will help both developers and testers in unit testing and compatibility testing. Developers can see the developed Web page in an IE browser. Testers can use this IE tab to view the page in FF so that at the same time can use many add-ons supported by Firefox which makes them easy for testing.

The IE Tab basically shows up a small Firefox icon in the bottom left hand corner of the page and has 3 options:

1. Left click of mouse to switch rendering engine of current page.

2. Center click to open the same page in a new tab.

3. Right click to open the IE tab options window.

MeasureIT

• Used in incoming measuring the element dimensions in pixels.
• Download Link
• Very much helpful in Compatibility testing

Description:

A typical measuring device, helpful in measuring dimensions of a Web page element. Once added to Firefox, the MeasureIT looks like a small ruler in the bottom left hand corner on the page. All we need to do is, click on the ruler and drag the ruler around the element to measure its dimensions. The dimensions will be provided in pixels as shown in below screen shots.

The ruler can be used in measuring both horizontal and vertical elements through a simple click. We need to click on the same ruler to de-activate the MeasureIT add-on.

Flash Tracer

• Used in to analyze the flash actions performed in a Web browser.
• Download Link
• Very much helpful in flash application testing.

Description:

The flash Tracer works along with the adobe flash debugger and informs the users about the various actions, warnings, errors performed by a flash application on a Web page.

Install the Flash debugged from Adobe and Flash tracer adds on to make the flash tracer working. Once the flash tracer is installed, we can see the flash errors reported in form of errors.

Error debugging becomes much easier with Flash tracer for Testers. Flash tracer will be available in Tool section in the browser.

Conclusion

So, in the above discussion we have seen some excellent add-ons provided in Firefox. The details provided while help us to use the add-ons in Web based testing. Although the list provided does not contain the total list, it will surely help us in testing a wide range of features in the Web application.

If you are testing a Web application, it is better to test the functional testing in fire fox first and then move for IE. This is easier than trying the other way round.

References

• www.wikipedia.com
• http://addons.mozilla.org
• http://blogs.imeta.co.uk