How To Improve Tester's Work Using Browser Add-ons    

In the profession of a tester, it is important to choose the right tools to facilitate and accelerate the work. A large part of these tools consists of browser add-ons that I would like to describe briefly. The tools I describe below are great not only to make error detection faster but also to save a lot of testing time.

Pixel Perfect

Pixel Perfect can be very helpful when verifying the work of front-end developers.
This is a simple add-on that will allow you to put a graphic design on the webpage you are checking. After applying the graphics to the webpage, you immediately see if everything is correct or if there are any incompatibilities. Pixel Perfect, as its very name suggests, allows you to find 1 px-sized incompatibility. Its most important options:
It allows saving many projects without constantly uploading new graphics
you can control the transparency of the mock-up layer
The graphic layer can be moved even by just 1 px, which allows for a more precise adjustment.
The graphic layer can also be locked so that it would not be possible to move it around, which allows you to check the elements that are currently not visible on the screen.

Selenium IDE

In the case of a project for which you expect the need to perform multiple tests of a given functionality, Selerniu IDE comes to your aid – it is a simple automation tool allowing you to easily record, e.g. a scenario where you fill out a purchase form click "save" upon completion. Another example would be having a given landing page and wanting to verify that the text on the webpage or the relevant elements is correct – you can use appropriate assertions that verify it. 
Using this add-on comes down to entering the address of the webpage you want to test, enabling recording, and selecting the appropriate commands from the menu that appears after clicking LMB; after the recording's completion, you click "play" to play back your automatic test. 
When you scroll down the webpage or click on any button, Selenium will automatically add a command corresponding to your movement to the scenario.
The recorded test can be saved to a file so that it can be used later.

Display Ruler

Another add-on, Display Ruler, is easy to use for pixel-based measuring purposes.
The measurement is carried out by drawing a rectangle on the screen, i.e. at the same time you obtain the vertical and horizontal value.
Particularly useful for verifying the distance between the elements and the size of the elements themselves.
Broad choice of manual settings for adjusting the measuring field allows you to refine the measurement. The add-on also allows for tracking and performing automatic measurements of the element over which you hover the mouse cursor.

Edit Anything

Edit anything is, in turn, very simple but also very helpful when you want to verify how the webpage will behave when the length of the displayed text changes significantly. To run it, just click the add-on icon, and you can edit any text on the webpage. Editing is done like in a text editor, i.e. you click on the text in order to edit it.

Screenshoter

When reporting an error, you usually need to attach a screenshot. Screenshooter might be of help here.
It is a tool allowing you to easily take a screenshot of the entire webpage, a screen section, or a visible part of the webpage. After taking a screenshot you can use a simple panel for quick editing. The add-on also has the option of copying the screenshot taken into the clipboard, but it is also possible to save it as a .pdf or .png file.

CssViever

The next add-on is CssViever – a very simple add-on that immediately after launch displays a window in which you can see all the CSS properties of the element over which you hover the mouse cursor. 

Bug Magnet

The last add-on is Bug Magnet. It is used to test fields in forms. Contains correct and incorrect test data for various field types. With this add-on, you can verify fields like e-mail, zip code, phone number and many more. You can also check for vulnerabilities, e.g. concerning JS or SQL scripts. In addition to the sample data, you can use your own test data.

Final thoughts

The add-ons listed above are just some of the tools that Drupal testers and Drupal developers use in Droptica. Only a year ago this list was different. Over time, the tools we use change, new additions come out, testing methods change, etc.

On our blog, you will find many more tips on how to improve the quality of applications provided. We recommend you to read more of our articles regarding browsesync and visualception. If you do not want to miss further articles, subscribe to the newsletter and receive notifications of new entries directly to your mailbox.