Need quick access to website test tools? Look no further than your web browser. Firefox and Internet Explorer both have developer toolbars for Web QA professionals to download and utilize for QA. I have found both to be useful during QA in identifying image attributes, metadata, links and Flash validation.

Helpful browser tools to QA by:

Internet Explorer Toolbar (Add to Explorer)

1.    Selecting elements – Find> Select Element by click, allows you to select an element of the page and view the highlighted code in the Developer window at the bottom of the page. The benefit of this function is that it isolates a section of code instead of viewing source and having to parse through it all.   

2.    Link validation – View> Link Report, allows you to view all the hyperlinks in a list. This comes in handy for verifying whether a link is supposed to pop up a new window.

3.    Identifying images and image attributes

a.    Identifying images – Images>Disable Images, turns off all the images in order to identify and differentiate images from the CSS, which is helpful if you need to report and distribute the bug to the right person. You can do the same by selecting Outline>Images.

b.    Image sizing, click Images>Show Image Dimensions and select dimensions, file sizes or image paths.

c.    View alt text only – Images>View Alt Text, to view alt text for all images on the page, saving time instead of mousing over each one.

4.    Verify background colors – Tools>Show Color Picker, useful for verifying background colors or validate design changes if the color change was just a small variation from what it was before.

Mozilla Firefox Toolbar (Add to Firefox)

1.    Form Validation – a very quick way to test forms in Firefox is to select Forms>Populate Form Fields. The browser will auto populate the entire form minus doc uploads, which will reduce QA time by manually completing the form. Another useful toolbar command is the Forms>Clear Radio Buttons for testing a radio buttons on a form since the only way to “de-select” these form options is to refresh the page or close the browser and start over.

2.    Link Validation – Tools>Validate Links, similar to Explorer, Firefox has an option to validate links. They both use the W3C link checker, which is invaluable for quickly finding 404 links, redirect links to pages that have been removed and details regarding anchor links.

3.    Display Information – contains a large variety of commands regarding links, elements and tables to name a few. Information>View Color Information provides thumbnails of the images that make up the page along with their hex values if colors need to be verified. Another option under Display information is Information>View Metatag Information, which displays the page’s metadata.

4.    Miscellaneous – Don’t let the title fool you. The Miscellaneous option on the toolbar includes several options helpful for QA. Miscellaneous >Display Ruler is useful for quickly measuring images or other elements on the page via the cursor, which turns into a crosshair. Once you have selected an item to measure using the crosshair cursor the coordinates display above with the dimensions.

5.    Resize Window – In lieu of changing your screen resolution, Resize>Resize Window, allows you to change your screen resolution through the browser.

The ability to quickly parse information during QA is so valuable — especially with tight deadlines.  These two toolbars are must-haves in your QA toolbox.