Cross Browser Testing

I have just finished a major refactoring of a legacy website.  I thought it would be useful to share some of the lessons I learnt.  One of the main lessons I learnt was to make the best use of the tools available.  In particular, I spent a lot of time testing for cross browser compatibility (this legacy site was originally developed in 2007/08), and I wanted to discover the best way of quickly uncovering any browser rendering issues. 
There are several different ways of testing websites for cross browser compatibility:

• Installing multiple versions of the various browsers on a local PC to allow for testing (belts and braces).  This can be difficult, as some browsers don’t allow for different versions being installed on the same system (Cough *Internet Explorer* Cough). Normally, you end up using multiple virtual images with the various target browsers installed, which can be a pain to manage.
  
• Use a web-based screenshot service in order to view how a site renders on various combinations of browsers and operating systems. A multitude of these services have sprung up recently, making use of various cloud-based virtual environments.  Several of these sites allow you to use a browser on a remote machine and test the functionality, as well checking the actual page rendering.
  • CrossBrowserTesting – A commercial service that offers both automated screenshots and access to browsers in remote machine sessions to interactively test your website. Covers all major browsers and operating systems, including all mobile smartphone devices.

• BrowserCam – Another commercial service, again offering both automated screenshots and remote access to various browsers. Covers all major browsers and operating systems, including all mobile smartphone devices.
  
• Adobe BrowserLab – An excellent online service that allows you to view sites side by side and even to set different browser renderings over the top of one another (thought this onion skin mode isn’t that useful in practice!).  The service is fast and allows you to test using Safari (5.1), Internet Explorer (6 – 9), Firefox (5, 7 on both OS X and Windows) and Chrome (13 and 14).  The service is currently free until April 2012, when it will become a paid service.

• Spoon – A free virtualization service that allows you make use of all the major browsers except Internet Explorer.
• Desktop applications typically bundle multiple browser installations, allowing you to switch browsers when viewing your site.
  • Lunascape Browser - This browser comes with all three major browser engines, allowing it to mimic the behaviour of all the major browsers (IE, Firefox, Chrome, Safari).  The browser is free to download.
    
  • Microsoft Expression Web SuperPreview – A free tool to allow to test all versions of IE locally, and also to test the other browsers remotely. This tool is free, and is normally found as part of the Expression IDE.

• Browser developer tools and plugins.  There are various browser tools and plugins to allow developers to check how web pages will display in other browsers.
  • IE Tab for Firefox
    
  • Web Developer Toolbar for Firefox
    
  • F12 Developer Tools in Internet Explorer (v8+).

Of the above methods, I would recommend Microsoft Expression Web SuperPreview as the best way of checking how your site renders in the main browsers, because it is both free and fully featured   I found Adobe BrowserLab to be the best online solution, but I wasn’t testing against mobile devices.  The two commercial offerings may be more relevant if you are developing against mobile devices.  I intend to look at cross browser testing on mobile devices in a future post.