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.

Progressive enhancement enables different browsers deliver different user experiences. Thanks to progressive enhancement, anyone can access the content in any browser, but people with more advanced browsers get more advanced features. That way, we’re able to deliver an optimal browsing experience across the board.

Say you go to a site that has a lot of data in a table form and you have the option to filter that data. Every time you click a filter, the page reloads to show you the filtered data. For browsers that have Javascript enabled, the new filtered data will show up without the browser refreshing the page. This gives the user a smoother and better experience on the site.

Here’s a more advanced example. If you log onto the Atebits website using Internet Explorer, you will see a nice site that is designed well. If you log onto the site using the new Firefox web browser, you will notice a new detail: The words on the homepage have drop shadows on them. Traditionally this would be done with images, but with the addition of CSS3 this can now be done in code. If you log onto the site again using the latest Safari browser, you’ll notice another new feature — when you hover over one of the three icons, you’ll notice they get a little larger and rotate left. While it’s possible to make this happen with Javascript, in this case it’s being done purely with the CSS3 that is unique to Safari.

You can use progressive enhancement in other ways than just CSS. The trick is to only use progressive enhancement on features that are not site-dependent. If you added something really nice but someone can only see it if they have that feature, you just restricted other users from being able to see that content. 

If you want to learn more, go through other parts of the Atebits site using various browsers and look for other progressive enhancement features. They're all over the place.