• info@helpingtesters.com
  • helpingtesters

Must have Chrome Extensions for Web Testing

February 13, 2018
Chrome Extensions, Chrome Extensions for Web testing, Chrome Extensions for web applications testing, web application testing, web application testing in Chrome, Extensions needed in chrome for web testing, Extensions needed in Chrome for web application Testing, Extensions required in Chrome for web application Testing, Extensions required in Chrome for web Testing

While testing web applications, testers access the application on a supported web browser. The browser is generally the one that most users would be using to access the application. And given the popularity of Google Chrome, almost every web application supports Chrome. So, when a tester manually tests the application on Chrome, he/ she has to test all functionalities and execute test cases with the proper test data. But in every flow, there come a few steps which are repetitive and which takes up quite a chunk of the testing time. And that is when Chrome extensions can come handy.

In this post, we would provide you a brief introduction into Chrome extensions and how they can speed up your manual testing. We would also share a list of 20 different Chrome extensions which can help yours with your regular web application testing.

What are Chrome Extensions?

Extensions, in general, are small programs that run within the browser. The extensions and their behavior can vary on the basis of browser and their version. For Google Chrome, such programs are known as extensions, which for Firefox and Internet Explorer, they are known as Plugins and Add-ons respectively. So, what do these Chrome Extensions consist of?

  • Chrome extensions are programs which are installed within the browser package. These programs can be used to handle small operations which help users in their daily activities.
  • Chrome extensions need to installed separately and can be viewed in the browser’s toolbar section.
  • Chrome extensions generally consist of a basic HTML & CSS component (optional) and are backed up with JavaScripts which perform different actions based on the extension’s purpose and user action.
  • The extensions can be used to retrieve values from a specific website, like the Gmail extension which shows the number of mail or new mail that arrive at your inbox, or can be used to perform a certain action on the active DOM. For example, an Ad blocker which filters out all unwanted advertisements from a website.
  • Once you have installed these Chrome extensions, they appear on your toolbar, and you can even edit or remove them from the extensions menu in Chrome.

Now, how do you actually install a Chrome extension?

How to install Chrome extensions?

There are primarily 2 ways to install a Chrome extension.

  • From Chrome Web Store – The Chrome Web store has a number of different Chrome extensions which you can download and install in your browser. In order to successfully install these extensions, you need to access the web store on your Chrome browser.
  • In the web store, you can find a number of different extensions, both free and paid. Once you have narrowed in on the extension of your choice, simply click on the extension and click “Add to Chrome”.
  • The Chrome extension would automatically get installed in your browser. You can view the extension on the toolbar.
  • Installing unpacked extension – Apart from downloading the extension from the Chrome Web Store, you can also load your unpacked extension. By using this option you can load custom extensions which you have developed or modified.
    • To install the extension, you need to click on the “More Tools” and click “Extensions”. Now click on “Load unpacked extension” button.
    • Now, you need to provide the path or select the manifest.json file present for the Chrome extension that you have developed.
    • Once the manifest file is properly loaded, you can see your extension in the browser.
    • From this page, you can even specify whether you want your extension to appear in the “Private Browsing” mode.

NOTE – You should be extremely careful while loading third-party unpacked extensions, which are not listed in the Chrome web store. Such extensions can be potentially fatal and pose security issues for your personal data.

20 useful Chrome extension for software testers

Now that you are well aware of the different ways to load Chrome extensions, let’s find out the different Chrome extensions which can help you out with your regular testing.

  1. Screen Ruler – Using Screen Ruler, you can measure the height, width, and padding of an element that appears in the DOM of the web application. All you need to do is click on the extension and select the web element that you want to verify. It saves you a lot of time and aids you in UI testing of the application. It can also be considered as a one-stop extension to test all UI related test cases.
  2. Awesome screenshot – It is a popular screenshot capturing extension. Using Awesome Screenshot, you can capture the screenshot of the complete screen, the web page, a particular web-element or a certain portion of the screen. That’s not all, you can edit the captured screenshot and highlight a specific portion, crop the image or add annotations/ texts. Once the screenshot is captured, you can temporarily save it in Awesome Screenshot itself, save it to your local drive or upload it to Google drive.¬† Given its utility and the different customizations available while capturing screenshots, it is extremely useful while testing your web application and while you are logging defects.
  3. Cookie Editor – This tool allows you to go through the existing browser cookies and add, delete, edit, protect, or block them. Using this extension you can even search and export them in JSON format.
  4. WhatFont – While executing UI test cases, you must look into the different fonts and formats. Generally, testers have to look into the page source to find out all such details. Such an approach can be extremely labor intensive, to say the least. But with WhatFont, you can gather all such information at the click of a button. After clicking on the WhatFont extension, you need to simply hover on the text section whose information you want to find. WhatFont will provide you the details regarding the type of font, font size and also provide information about the services used to fetch the font.
  5. Cache Killer – Web Applications store a lot of data in the cache to reduce the loading time of a web application and to enhance its performance. But many a time old data gets loaded into the web application from the cache. That is why testers must clear the Chrome browser’s cache from time to time. With Cache Killer, you can clear Chrome’s cache by simply clicking on the extension. After clearing the cache you can load your web application and see the latest changes. In case you want to test the browser’s cache, you can simply disable the extension. A pretty handy tool indeed!
  6. ColorZilla – If you want to test whether the colors present in the web application actually meets the requirements, then ColorZilla is the extension for you. ColorZilla is a color picker tool which picks the color from the web application’s DOM and shows its value in RGB format or tells you what color it actually is.
  7. Web Developer Form Filler – Filling forms while testing can take up a lot of time. And that is where the web developer form filler comes into the picture. By configuring the extension you can set values for different fields, and set them at the click of a button. You can even assign hotkeys to fill forms/ fields. This extension can be extremely useful for web-applications which has a number of different forms and are required to be filled every time you execute any test case.
  8. PerfectPixel – This tool is used to verify whether the objects present in your web application matches the size mentioned in the requirement document, right down to the pixel. This extension allows you to superimpose a semi-transparent object over the DOM and test whether the size matches the specification.
  9. Lightshot – It is another screenshot capturing tool. By activating this extension you can capture the screenshot of the web application or a part of it. Then you can edit the captured screenshot and add annotations and save it in your local machine. Lightshot also allows you to upload your screenshots to the cloud or share them using a sharable link.
  10. IE Tab – Many web applications need to be tested on multiple web browsers, including various versions of IE. But given IE is only supported on Windows OS, testing on IE browsers can be a bit tricky. For this reason, the IE Tab Chrome extension comes handy. This extension lets you test your web application on Chrome using an IE emulator. So, you can test the different features on IE right from the Chrome browser at the click of a button.
  11. Windows Resizer – This is the age of responsive web interface. Now web applications are built in such a way that they can be rendered properly on different devices having different resolutions. One way of testing the responsiveness of a web application is by resizing the browser. Using Windows Resizer extension, you can resize the Chrome browser to emulate different screen resolutions. You can select from existing resolutions or create custom resolutions. To speed up the testing, the extension allows you to assign hotkeys for different resolutions. You can even export custom resolutions and settings so that you can configure Windows Resizer on other computers.
  12. Postman – Postman is a REST API testing tool. You can use it to test web services and test their responses for corresponding requests. This extension is easy to learn and work with and you can start testing REST APIs and at an extremely fast pace. All you need to do is enter the web service endpoint and specify the type of response expected. Then you can validate the response with the expected output to test the web service. It’s that simple.
  13. Spell Checker – You can use the spell checker extension to test the spellings of the content in your web application. Also, you can check spellings of your test cases or defects that you log in it. Whenever you type in or copy-paste the content in spell checker, it highlights the words that are faulty and automatically provide you the suggestion for the correct word. It supports 12 different languages.
  14. Bug Magnet – The bug magnet extension can be of huge help while performing exploratory testing. During exploratory testing, you need to fill appropriate values in the different fields of the web application under test. For that, you need to take out some time to create the test data. But with Bug Magnet, you need not invest time in preparing test data for exploratory testing. All you need to do is right-click on the element where you want data to be filled. Now, you will be able to see a context menu with pre-defined values for postal codes, email, phone numbers, names, e.t.c. By simply clicking on the type of entry, you can fill the field with the correct value. It can be used for negative testing as well.
  15. Form Fuzzer – It is yet another form filler. It can help you save a lot of time which would have otherwise been utilized for test data preparation. To fill fields using Form Fuzzer, you need to right-click on the field and select the value that you want to fill from the preset. You can use this extension to fill names, pin codes, addresses, contact number, e.t.c.
  16. Grammarly – It’s a quite popular and powerful spell-checking and grammatical error detection tool. With the help of Grammarly, you can detect errors in the written texts within the web browser. It is extremely useful while logging defects in the browser (using Redmine, JIRA or other defect tracking tool). The extension continuously checks the typed texts and find out any spelling issues or grammatical error present. It also provides suggestions which help you to correct them in no time.
  17. Screencastify – Screencasting is a useful recording tool which recording user actions in the current browser tab. When you click on the “Record” icon from the extension, it records all the actions you make in the current browser tab and saves it. This extension is useful when you want to share the steps to reproduce a bug with the developers. The captured videos are saved in your local drive and can later be attached to the right defect.
  18. Web Developer – The Web Developer extension is also available as a Firefox plug-in. This extension serves multiple purposes. You can use it to fill forms with predefined values, control browser cache, inspect and highlight web elements, manage cookies and even anchor information.
  19. Edit this Cookie – Cookies are used to store a user’s browsing information to enhance their experience. So, if are performing cookie or session testing, this is the right extension for you. Using Edit this cookie, you can search for browser cookies, and add, delete, edit, protect, or block them. To further extend its usage you can edit configure the extension from the extension settings to use it according to your web application’s needs and requirements.
  20. Firebug Lite – While you are creating scripts for automating test cases, you need to find selectors for the web elements present in the DOM of your web application. These selectors can be simple ones, like ids, class name, and tag name, or complex ones like CSS selector, XPath e.t.c. Firebug Lite helps you capture different selectors for the web elements. It makes inspecting HTML elements easy and effective.

Arindam Bandyopadhyay is an automation tester with over 5 years of experience in software testing. While during the day he juggles between Eclipse and spreadsheets, at night he lets his fingers do the talking as he writes about anything and everything his paradoxical mind desires.

About the author

arindam bandyopadhyay author

Arindam Bandyopadhyay is an automation tester with over 5 years of experience in software testing. While during the day he juggles between Eclipse and spreadsheets, at night he lets his fingers do the talking as he writes about anything and everything his paradoxical mind desires.

Leave a Reply

Your email address will not be published.