Browser Compatibility Testing

The issue of browser testing has always bothered me. It is so time consuming and can even sometimes require you to rethink how you have written your JavaScript code to support all browsers. To make things worse, certain browsers like Internet Explorer do not allow install of multiple versions on a single machine. So what are the options for browser testing?

Virtual Machines (Installing Browsers Natively on Multiple PC’s)

With virtual machines you get the truest sense of browser compatibility because you are actually using the browsers natively. This inolves creating actual machines that run in a virtualized environment (like Microsoft Virtual PC or VMWare). It is a lot of work to set and also requires you to have licenses to use the OS’s needed. You can be sure that this solution acts like the intended target machine.

Single Machine Install of Multiple Browsers

For the most part many browsers do allow multiple versions. Browsers like Firefox, Opera and Safari all allow you install previous versions without overriding the current version (providing you set it up in a new install directory). For those that force an installation directory like Internet Explorer (because of its integration into Windows) it is a little harder to work around. The best way to do this is by Upgrading your browser to IE8 and then install some standalone prior versions as follows:

I will note that using the Standalone or Multiple IE versions of Internet Explorer do have its fallbacks. The intended JavaScript engine may not be in full use. Problems have also been seen with ASP.NET AJAX in MultipleIE 6.0 that are not seen in the native version of IE6.

Services that Check Rendering of all Clients

This is pretty cool. There are a number of free websites on the Internet that allow you to specify a URL and it returns an image of the web page rendered in each client (and there are a ton for some of these services). One in particular is from Adobe which is exceptionally fast, and also allows you to render in a Browser, specific version and OS. It includes special features like onion skin comparing when looking for exact matchups, however it does require signing up for a free acount:

“Basically you select your browser and os set (Firefox, Safari, Exploder, Chrome, WindowsXP, OS X) and  type in a live url, hit enter and in seconds BrowserLab shows you a preview of what the site will look like in your chosen browser/browsers. The interface is elegant and simple to use. The whole process takes 10-15 seconds! There is even an onion skinning view that layers your selected screenshots on top of one another with a slight transparency allowing you compare versions very precisely. The only drawback from what I can tell is that you must enter in a LIVE url. That is unless you are lucky enough to have Dreamweaver CS4 that allows for a BrowserLab plugin to be installed. This enables the normal live site viewing as well as local site viewing without ever having to leave Dreamweaver. Pretty cool.”   —   (Stephen Acheson, Toolbox Solutions)

That being said, if you are a designer this approach works very nicely, especially with the CS4 integration. Find this tool at: https://browserlab.adobe.com/.

Some other great rendering tools, that are free that do not require an account include the following:

http://browsershots.org/

http://www.anybrowser.com/index.html

http://ipinfo.info/netrenderer/index.php

Of course the limitations on these tools are still an issue. The fact that I could not test a local URL really hinders my DEV process. Also, you may want to check the JavaScript features and functions on  a page as your interact with it…which these types of services would not support.

Running Multiple Browser Versions in Virtualization Mode

This is probably the coolest of all the above tools. This site basically allows you to start many of the common browsers all from within the website. It is a simple plugin you install for each browser to test, which will allow the browsers to run under some type of virtualization mode. I am not familiar with how accurate and true to the native browser each version is, but right out of the box this seems quite good and requires little overhead or knowledge to implement.

Check it out at: http://spoon.net/browsers/

Please let me know by commenting on this article of any experiences you have had with spoon.net.

Conclusion 

That being said the truest and surest form of testing still is with complete Virtual PC environments to run the browsers natively (and is the only prospect supported by Microsoft themeselves). But hopefully these other tools provide a little more convenience when testing…it has for me.