Best QA Tools - Part 2 - Top Chrome Extensions for Testing Web Apps

All these plugins are totally free. So get ready to cut your address bar a bit and make room for some shiny new Chrome extensions which will make your day-to-day work much easier!

Our favourite QA tools

What font?

Have you ever been curious about which fonts are used on your favourite websites? It’s easy to check using the What font plugin! In addition to the name of the font, this plugin also gives more detailed information, such as the size of the font, line height and exact colour (in hex or RGB). You can use this information for, say, comparing the graphic design/mockup with the demonstration model of your website.

Advantages:

• Very simple and intuitive - just click on the font you’re interested in with the plugin and grab all the data!

Disadvantages:

• There is no option to copy to clipboard the info about a particular font, which would really come in useful.
• You cannot make any custom adjustments.

PerfectPixel

If you are a manual tester, you probably have some experience comparing designs with frontend changes in the application. This can be a total nightmare. Constantly switching between screens, straining your eyes to see small differences, or using specialised tools to ensure better accuracy. But it doesn’t have to be this way! There’s a great Chrome extension - PerfectPixel - that helps you perform such comparisons on the fly. You can simply load a .JPG or .PNG file with the design into PerfectPixel and it will add a semi-transparent overlay on top of your website - you can then manually adjust its position, size and opacity level.

Advantages:

• You can add multiple layers for the same page

• It’s possible to invert the layers to better see the differences.

Disadvantages:

• The image overlay is fixed in position, so you need to change its size and position whenever you resize your browser window.
• It would be useful if there were an option to manipulate the display of the layer, so that you can still interact with the page without hiding the overlay.

Check My Links

Making sure that all of the links on a page work is an easy but terribly monotonous task that you would surely assign to a robot if you could. Guess what? Such a robot exists! Well, it’s not exactly a robot, but it does the job. Check my links is a small but very useful extension that lets you automate this mindless, but extremely important, task. With just one click it finds all the links on your website and highlights which ones are valid and which ones are broken. It’s amazing and saves a ton of time.

Advantages:

• It’s really fast, even on pages with hundreds of links.
• Its highlighting feature is great.

Disadvantages:

• There’s no option to go straight to the broken links, you need to manually scroll through pages to find them (highlighting helps a great deal, but it would be useful to have such a feature).

Note Anywhere

Note Anywhere is a really simple plugin - but its simplicity is not a shortcoming, but rather a virtue! It’s easy to use - just click on the icon of the chrome extension and note template will appear. You can leave notes and hard refresh the page - they won’t disappear. The plugin can be helpful in making notes about what works or doesn’t on the page which you are testing. You can leave comments about design inconsistency and illustrate them with a picture from the tool in our previous blogpost - and violà!

Advantages:

• If you have ever tried to make a comment using screenshot tools, you’ll know that it can be less than convenient, at times...

Disadvantages:

• When you use an application which is not reloaded and refreshes dynamically after changing and switching to the next site (Single Page Applications, for example) the notes from previous pages will still be visible - you’ll need to manually refresh the page to make them disappear

Bug Magnet

Searching for the appropriate phrases to thoroughly test forms can be a time-consuming task, especially on multi-language websites where forms must be tailored to different types of characters. BugMagnet can be a great help in such situations. It offers multiple sets of ready-made phrases to fill out forms. You can choose from pre-generated snippets of text in different languages, names with special characters and many other options. There are also examples of phrases that often cause errors in forms (broken URL addresses, blank characters, numbers in the wrong format), or even expose security issues in your app (e.g. SQL injections).

Advantages:

• Ability to add your own config file with additional phrases.
• Really easy to use with convenient access from the context menu (right-click)

Disadvantages:

• Nothing really; it’s just a great extension.

Web Developer

In our opinion, this is a must-have chrome extension - it’s a whole bunch of utilities in a one place. This plugin adds a toolbar button to the browser with various web developer tools. By various I mean p l e n t y of different options; from editing the CSS, to checking detailed information about your website - for example finding duplicate ids (which is really cool option, isn’t it?) - or viewing page metadata. It’s almost impossible to describe all the potential of this tool because it’s extremely comprehensive. You definitely need to explore it yourself, but we are pretty sure that everyone is going to find something useful. We’ve listed some of our favourite options in the advantages section.

Advantages:

• A variety of options: manipulating cookies, help with forms (clearing forms, check all checkboxes etc), displaying picture attributes and dimensions, hiding pictures, displaying id and class details, marking all links visited/unvisited and much more!

Disadvantages:

• Some of the options are more comprehensively implemented in separate plugins. For example: searching for broken links works better with the Check My Links plugin - but with Web Developer, you have everything in one place.
• Some of the features seem to be broken or unintuitive to use.

That’s all for now folks! Do you have any feedback about these tools useful for web development? Or maybe you use something else which is useful in the QA world? Leave a comment below and let us know! We haven’t ruled out the idea of writing another blogpost about useful QA tools, so we are wide open to suggestions :)