The Best Browser Add-Ons for Quality Assurance

Recently, Firefox 29 was rolled out with a new redesign and, while downloading and installing it, I realized all the history Firefox and I have together. I believe the first version I installed was 2.7; since then we’ve been BFFs.

I’ve seen some browsers rise, grow, and die, like Flock (based on Firefox) and Rockmelt (based on Chrome). I have also seen others that always have been there, like Opera and Internet Explorer, but they have never been good enough.

As a Quality Assurance Tester, Chrome became a necessity to test because of its dominance in the market and, while I have grown accustomed to it, I still prefer Firefox.We testers need tools to help replicate user errors on the websites we’re testing, but the browsers alone are not enough for in-depth needs. This is when we can get help from some add-ons that can extend our browsers’ capabilities.

Below are some of the add-ons I use frequently and that all testers should utilize. This list is mostly focused on Firefox, but most of these add-ons (or similar ones) are also available for Chrome.

Fireshot

One of the most common tasks of a tester is taking screenshots. We need to take screenshots to back up our findings and sometimes we need to show the error to the developer. There are many of apps for this task, but my favorite is Fireshot. It has two killer features.

First, it is capable of taking screenshots of a complete page, even when the page is not showing completely in the browser. The second is the ability to add annotations within the app with some other great tools in it. These are important to us as testers because we can point out to our dev/design teams, stuff that is out of place, or bigger/smaller that it should, we can annotate steps to follow in the current page, to replicate some issue, etc. That helps or dev team to visualize what we are reporting and helps them realize faster where in the code that could be fixed.

fireshot screenshot

Another interesting feature is that once we install it in Firefox, it will prompt for installing it on Chrome and Internet Explorer. Unfortunately, this add-on is not available on Mac for any browser, but there are some other pretty good options for this OS. I’ve been using uploadscreenshot.com for my Firefox on Mac, and although is not as complete as Fireshot, it has been working pretty well for me. It can also take screenshots of a complete page, even when the page is not displaying completely on the browser. Fireshot is available for Free and there’s a PRO (paid) version for about $40  for a Lifetime License.

Firebug

This is an add-on that has been around for a while with Firefox. Although now all browsers have their own debugger tools, I still consider this one a must-have. I keep liking it because I’m used to it, and its interface, in my opinion, is more friendly. If we compare it to Chrome’s native tool for example, Firebug is easier to use because everything is one or maybe two clicks away, in Chrome’s native tool there’s some cases we have to navigate through some three-like menus to get some kind of info., like cookies.

Firebug Screenshot

By using it we can edit the cookies, delete any specific cookie to replicate certain behavior, we can navigate through the HTML code of the current website and its CSS, we can even modify it and see the changes on the fly, for example, to fix some little CSS issue, we can give a suggestion on how to fix it, or actually find the part of the code that is causing the problem and that will save some time to our dev to fix the problem. We can also see errors from the console, copy and paste the response of a call and report back to our dev with that information, that would help them debug the issue and a lot of more stuff. This is, if not the most, one of the most important tools for a Tester. It is also expandable, we can install addons on it like Yslow or Firepath (more on this one later).

Every web tester should know how to use Firebug or any of the native alternatives for all the browsers. Firebug is available for Firefox in Mac and Windows and it is also available in a pretty light version for Safari in Mac.

Measure It

Lets say that we want to make sure that the measures of that textbox or that other button meet the requirements described in the specs. We could use Firebug to search through the CSS of the application. However, sometimes the code is not that clean or we can have problems finding an specific item. Measure It is a pretty good tool for this situation. This add-on adds a button into our browser that when clicked will let us draw an area and tell us the measurements on pixels of it. Easy and quick.

MeasureIt Screenshot

It is currently available for free in Firefox and Chrome, in both Mac and Windows.

ABP

AdBlock Plus is a tool that can be very useful if we are not currently working with ads testing or our app doesn’t need them to work. This add-on blocks all the ads from a website based on specific filters we choose. With this add-on, our app can work faster because it doesn’t load them, bringing better performance to our app and less distraction to us.

ABP Screenshot

However, we have to be careful with this add-on as it can hide some bugs that our users are experiencing. For example, when an ad is broken, it can cause a bug in our app and we won’t be aware of it if we have this add-on active. Or, worse, it can cause us a momentary panic if it inadvertently shows us a bug that is not happening when the ads are present in our app. When the layout of an app depends on the ads, if the ads are not present, the layout might break. I’ve always find it useful to get my Application Under Test (AUT) better performance for my tests. This add-on is available for free in Firefox and Chrome for both Mac and Windows.

Link Evaluator

As its name implies, this add-on evaluates all the links in a given page and it colors them green, yellow, or red depending on their response. It colors them green when it receives a 200 or 400 response, and red if it gets a 404, 500, or some other error response. It is very useful to check all the links in a page quickly and to avoid missing any of them. In this way, the tester doesn’t need to click on each one to see if there are any dead ends or some other bad user experience.

Link Evaluator Meetme

It is available for free in Firefox on Mac or Windows, and, although it is not available for Chrome, there are other options for this one. The most similar is Link Checker that is available for free on Mac and Windows.

Dummy Lipsum

This add-on helps us by generating dummy text. Suppose we want to fill a form or see how some text looks in a page. After installing this add-on, we would have a button on our browser’s toolbar that, on click, will bring us a dialog where we can pick between some options, like how much paragraphs or words, if we want to include punctuation or html tags, etc.

Dummy Lipsum Screenshot

After selecting all our options, we just need to click Generate button, then Copy to Clipboard button and then we can paste it anywhere.

This add-on is available for free only for Firefox on Mac and Windows. There are similar tools available there for Chrome or any other browser, like YALIG (Yet Another Lorem Ipsum Generator) that is available for free in Chrome in both Mac and Windows. There are other fun Lorem Ipsum Generators that are not add-ons, but are useful and will add a touch of creativity to our tests. We can add them to our bookmarks for easy access.

  • Fillerama generates dialogs from shows like Futurama, Dexter, Arrested Development and more.
  • Pirate Ipsum  generates random pirate like sentences.
  • Obama Ipsum generates random President Obama quotes.
  • Trollen Ipsum generates trolling phrases between, for example,  Apple Fans to Android Fans and viceversa.
  • Quote Ipsum generates random famous quotes.
  • Picksum Ipsum generates phrases from movie dialogs from characters of Michael Caine, Jim Carrey, Clint Eastwood and Morgan Freeman.

Web Developer

This tool adds a menu to our browser with a whole world of options that can help us to make our day-to-day work a little bit easier. What I’ve used it for is the cookies menu, which lets us clear cookies completely. Sounds like nothing special, right?. Where this is useful and different is that it lets us clear just the cookies from our current session or just current domain cookies. This is a major help for when we have login credentials for various sites and we want to clear cookies for just one of them. With this tool we can also play with the CSS, disabling it, changing it, adding stylesheets to the current page.

Web Developer Screenshot

We can also disable the cache, disable cookies, disable javascript. All that can help us to test certain conditions in an application. It can help us to work with Forms, clearing all fields, with just one click, auto-filling forms, etc. It can also work with images, for example it can display image sizes, disable all images, display alt texts and tons of other features. This one is a must have!

This add-on is available for free in Firefox, Internet Explorer, Chrome, and Opera for Windows and Firefox and Chrome in  Mac OSX.

URL to QR code

Not talking about a specific add-on here, there’s a bunch of them out there for all browsers and OS combinations. What does they do? Very simple, they generate a QR Code using the URL for the current viewing web page. Something like:

When we use a mobile device like a phone or a tablet and we scan this QR Code, it will open the browser in the device and navigate to that URL. In that way, we can easily type our URL in our desktop browser, then take a picture with the device with a QR Code reader. In this way, we would not need to type in those tricky small touchscreen keyboards. This saves some time and hassle from typing if we are working on a browser-based mobile app or website.

URLToQRCode Screenshot

I have tried URLtoQRcode on my Firefox + Mac environment. On my Chrome in both, Mac and Windows I have QR Image from URL. But in my Firefox + Windows I use Etao QR Code, all them are practically the same thing and all they are free.

iMacros

The first automation tool in this post, iMacros allows us to record steps that we are doing manually and while recording it saves those steps as code. Once recorded, we can edit, add, or remove steps on it’s own IDE. And finally we can play them over and over again. While not the most popular app available for this, I find it as good or better than Selenium, the most popular tool out there.

iMacros Screenshot

iMacros has its own versions free for Firefox, Chrome, and Internet Explorer in both Mac and Windows. In that way, we can create our script in Chrome and play it there, but also in Firefox and Internet Explorer.

There are a few caveats preventing it from being perfect. This free add-on has some command restrictions on its Chrome and IE versions, compared with its Firefox free version. And the Firefox free version has some other restrictions that the PRO version doesn’t have. The PRO version is more complete, allowing us to use their own browser, and code scripts in almost all well-known programming languages. However, it is very expensive. For the frugal-minded, the Firefox version is pretty capable–we can build pretty complex scripts there.

Selenium IDE

Who hasn’t used or heard about this tool? It’s free, compatible with all major browsers and OS (including Linux), and programming languages. What else we can ask for, right?

Selenium IDE Screenshot

This IDE is pretty much the same thing as iMacros, letting us record steps made manually and play them back later. All steps are recorded in Selenesse, the Selenium language. This tool has other add-ons that let us export our scripts to other languages as python, ruby, php, java, etc. It also has its own add-ons created by the community that further expand the capabilities of this IDE.

Firepath

Last but not least, now that we are talking about automation, I would like to talk about Firepath. Who hasn’t had problems with the way Selenium’s playback functions from time to time? Firepath is an add-on for Firebug. It lets us select an element from the web page we are on and it will tell us its Xpath or CSS selector. It also works backwards–we can specify an Xpath or CSS selector in the box and it will mark for us the element that meets that selector. We can then use that information in our scripts.

FirePath Screenshot

So, what do you think about these tools? Do you like them? Are you already using any of them? Which ones have I missed? Give us a shout and let us know!