Back to the basics: Best browser add-ons for web testing

Originally posted on the blog of my last company.

This is a repost of my old blog, I did check it up for updates but I can’t promise there will be no outdated stuff

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 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, in my opinion, all testers should use. 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 our 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 on Windows. 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 Web 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.

Measure-it Screenshot

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

AdBlock Plus

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.

For example, 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 Screenshot

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.
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.

URL to QR 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.

Selenium IDE

Recently overhauled after being neglected for a while Selenium IDE is the tool of choice for those who are starting with web automation. It helps you automate by record and play. 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

All the 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

Bonus

In addition of our browsers add-ons there are other desktop tools that we can get help from. These are a couple that I’ve been using and I think they are very useful.

Jing

This is a tool developed by TechSmith, the company behind Screencast.com, Camtasia and others. One of the main features is that it can take screenshots, but, you would say, what’s different between this and some other browser add-on? The difference is that because Jing is not a browser add-on it can take screenshots to the browser including the toolbars (with the address bar for example) and also can take screenshot to other desktop apps, or the desktop itself. Jing also has the ability to take 5 min videos, long enough to show steps to replicate a bug. In addition to that all these screenshots and videos can be uploaded to their cloud (screencast.com) directly from the app and when the upload is finished it copies the URL to your clipboard so you just need to paste it whatever you need it. It also includes annotation tools.

What do you think? Do you have any other tools that you like? Leave me a message in the comments section below

One thought on “Back to the basics: Best browser add-ons for web testing

  1. Hi Gustavo,

    Good to see you writing (or at least re-posting). Yes there are a few items out of date here including the version of Firefox, Firebug (which has been discontinued) and Selenium IDE (although some version of this is / will make a comeback).

    Keep writing!

Leave a Reply

Your email address will not be published. Required fields are marked *