9 Magical Chrome Extensions for QA Testing

Courtney Johnston von Nieda

Development

Chrome extension options are many, but there are a few add-ons that are pure wizardry for browser based testing. Here are 9 of my favorites that help me test faster, write better bugs, and cover more exploratory ground.

BugMagnet

Easy text testing with BugMagnet

A work-life game changer, BugMagnet provides quick access to problematic values and edge cases. It comes pre-loaded with names, URLs, and strings known to cause display issues, along with some basic XSS and JavaScript exploits. You can also load your own JSON files with project specific data.

My favorite feature is the provided test data for 8 different payment processors. It makes quick work of testing for specific Stripe errors.

Bug MagnetRight-click context menu to help with exploratory testingchrome.google.com

FireShot

Look at that beautiful full page scroll

Screenshots are easy to capture until you need one of a full length scrolling page.

FireShot makes full page screenshots a breeze, allowing you to save as PNG or JPG. There are also options for capturing the visible page or a selection, and for setting up a hotkey.

Take Webpage Screenshots Entirely - FireShotTake FULL webpage screenshots. Capture, edit and save them to PDF/JPEG/GIF/PNG, upload, print, send to OneNote…chrome.google.com

WAVE

Alt text errors are common, and they prevent screen readers from describing your image

Accessibility makes your users happy. QA is also in a great position to ensure your apps are as accessible as they are functional.

WAVE (web accessibility evaluation tool) is the gold standard for accessibility checking. Go to the page you want to check and click the WAVE icon to get a report. This report outlines problematic errors for screen readers and other assisting devices. Also on the report are alerts on color contrast issues, and info supporting inclusions like labels and alt text.

WAVE Evaluation ToolEvaluate web accessibility within the Chrome browser.chrome.google.com

Check My Links

As advertised, this Chrome extension checks that all the links on a page are valid and active. In a floating pane it provides a count of valid links, redirect links, and invalid links found.

Check My Links also provides a small options menu that allows set up of excluded domains, caching, and a choice to override nofollow attributes. I appreciate this extension for being exactly what I need and not trying to be more.

Check My LinksCheck My Links is a link checker that crawls through your webpage and looks for broken links.chrome.google.com

Ghostery


Ghostery giving me a few moments of untracked peace.

Ghostery has almost 3 million installs and is most popular as an ad blocker. I use it to block everything else.

The internet is rich with trackers. Analytics, heat mappers, on page chat, integrated CRMs, they’re on all the web applications I test, and sometimes they’re in the way. Ghostery allows me to kill them one by one, for as long as I need. It’s double handy when one of these services loads a UI element over something I need to see.

Ghostery - Privacy Ad BlockerSee who's tracking you online and protect your privacy with Ghostery.chrome.google.com

Window Resizer

Great for testing responsive sites, Window Resizer is fast and has more options than Chrome DevTools.

Keeping me from having to pull out a test device or spin up an emulator, I can quick check a screen through multiple screen sizes for popular devices, laptops, and desktops. Switching between standard 13" and 15" monitor sizes is where I get the most value.

Window ResizerResize the browser window to emulate various screen resolutions.chrome.google.com

Page Ruler


Using Page Ruler to get the max height of this variable text area

Sometimes things just don’t look quite right. Page Ruler gets you an accurate pixel dimension on any element on your page. It settles arguments. It backs up your bugs. It’s simple, but exact…and I like exact.

Page RulerDraw a ruler to get pixel dimensions and positioning, and measure elements on any web page.chrome.google.com

Copy CSS Selector


Copying CSS Selector from https://the-internet.herokuapp.com/

UI automation for React applications has a few quirks, like IDs that change per build. It means instead of referencing specific IDs I use CSS Selectors to identify an element.

Copy CSS Selector shows up in your right click menu and clicking on element will copy the CSS selector, leaving it ready to paste. It saves a ton of time when dealing with data grids where that nth-child counts get real.

Copy Css SelectorExtends the Developer Tools and context menu, adding a sidebar that displays the css path of DOM element.chrome.google.com

Exploratory Testing Chrome Extension

The best testing money can buy is solid exploratory testing. Critically thinking about the app and mapping out a plan (or mindmapping a plan!) is a great start but this extension lets you keep working in the browser without breaking your focus.

The extension allows you to jot things down in 4 buckets: Bug, Note, Question, Idea. You can attach screenshots to those sections, and when you’re ready to go through your exploratory testing data and file bugs you can download a file with the info.

Exploratory Testing Chrome ExtensionExploratory testing session using Chromechrome.google.com

Are there any Chrome extensions that magically save your day? I’d love to hear about them.