Browser Testing
Note: this post is from 2010 and is somewhat out of date now.
When developing a website, it’s important to test your site in as many browsers as possible—or at least in the major browsers, which currently include Internet Explorer (IE), Firefox, Safari, Chrome and Opera. Ideally, you should do this testing while you are building the site, rather than once it’s finished. (It’s very painful to discover that your finished website—which displays perfectly in standards-compliant browsers—is completely broken in one or more versions of IE.) It is better to identify problems as they arise, so that one fault does not build upon another. (I see a lot of people in the web forums with this problem, and it’s often obvious that the best option would be to recode the whole site from scratch—which is not unlike pulling down a new building and rebuilding it from the ground up.)
Solutions
Having access to all of the major browsers is a tricky issue for most web developers. For one thing, there is no longer a version of IE for the Mac, so if you are developing on that platform, you’ll need access to Windows. And even if you are developing on a PC, which version of IE do you have installed? You cannot easily have more than one version of IE running on a single machine. (Users of other browsers tend to upgrade to the latest version, but there will always remain users of older versions; and even the better browsers have their quirks—and as with IE, it is not easy to have more than one version running on one computer at the same time.)
Multiple computers
There are various solutions, none of which is necessarily very simple. Of course, you could have a different computer for each browser, but that is not a very efficient or realistic option. A separate computer for IE8, IE7, IE6, Firefox 3.5, Firefox 3, Firefox 2, Safari 4, Safari 3, Opera 10, Opera 9 … and so on is simply not feasible.
Virtualization software
The next best option is probably to make use of ‘virtualization’ software. This allows you to run multiple operating systems on one computer—meaning that you can have each version of IE running on one computer, as well as various versions of the other browsers. This option still leaves PC users with the problem of testing Macs (although, generally speaking, the main browsers for Mac are also available for PC and are generally very reliable, making testing on a Mac not really a big issue). Mac users have the extra luxury of being able to run both Windows and the Mac OS simultaneously on the one machine—either by choosing which OS to use when they turn on the computer, or by installing virtualization software that allows Windows to run alongside the Mac OS.
Various companies—such as VMware and Parallels—compete to offer the best virtualization software; and their products are available for a very reasonable price (if not free):
- VMware offers VMware Fusion for Mac, and for PC they offer the free VMware Player, which enables multiple OS installations.
- Parallels offers Parallels Desktop for Macs, and Parallels Desktop for Windows & Linux.
Free options (online)
These services provide screen shots of how you page renders in various browsers. You enter the page URL into a form field. They provide a handy guide, although you can’t debug any problems.
- Modern.IE is a new (2013) offering from Microsoft that offers a range of tools for testing your websites in various versions of IE. (At least MS is doing something to acknowledge the pain it’s caused!)
- BrowserShots
- IE NetRenderer: screenshots of IE, from version 5.5 up. You can also access this service via a Firefox plugin.
- ViewLikeUS provides some nice screen views of what your sight might look like on desktop and some mobile devices. (A similar tool is Matt Kersley’s Responsive Web Design Testing Tool. While not strictly a browser testing tool, it’s handy for getting a quick sense of what a design looks like at various widths, though you can also do this by playing with the width of your desktop browser, of course.)
Free options (download)
These are software packages that run on your desktop:
- IE tester, a free browser that allows you to have the rendering and JavaScript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.
- Virtual PC
- VirtualBox, virtual machines that allows multiple operating systems to be installed on one machine. (Windows, Mac and Linux compatible.)
- VMware Player, a free virtual machine allowing installation of multiple operating systems in a PC environment.
- Browser Sandbox, which allows you to run the major browsers from the web. It is only available to Windows users. You need to download a plugin that allows you to view other browser renderings through your default browser, which is why I’ve listed it under download products. This service has been recommended by some influential people; and if you can figure out how to use it, it’s all yours! (I don’t get it at all…)
- The Internet Explorer Collection, a downloadable package containing multiple, standalone versions of IE that can run at the same time.
- The Mozilla Firefox Collection is much like the above, allowing multiple versions of Firefox to run at once.
- Microsoft also offers the Microsoft Expression Web SuperPreview for Windows Internet Explorer, described as a standalone “visual debugging tool that makes it easier to migrate your web sites from Internet Explorer 6 to Internet Explorer 7 or 8”.
- Another Microsoft tool for testing websites in different Internet Explorer versions is Internet Explorer Application Compatibility VPC Image, described as “VPC Hard Disk Images for testing websites with different Internet Explorer versions on Windows XP and Windows Vista”.
- The Utilu IE Collection, “contains multiple standalone versions of the browser Internet Explorer, which can be used at the same time”.
- PortableApps had a nice tool for running multiple versions of Firefox, Mozilla Firefox, Portable Edition.
- Browser-sync is a handy tool for keeping your work updated in all your browsers at once. (Warning, though—it’s a bit geeky, requiring knowledge of the command line.)
Commercial products
Other than virtualization software, these services have a popular following:
- BrowserStack is a very handy online service that provides live, web-based access to all desktop and mobile browsers.
- CrossBrowserTesting is a powerful set of tools for testing your sites in different browsers and on different platforms, including screenshots and interactive testing of JavaScript and Flash.
- Earl is a promising crowd-source service that ‘checks your web site on smartphone, tablet and desktop devices every day and notifies you when something looks wrong’.
- Litmus is another handy tool you can register to use.
- Browsercamp allows you to test Mac page renderings in a wide range of browsers. You can also sign up for your own personal remote Mac, install browsers, run scripts, test emails in Mac Mail and even mess with system configuration.
- Sauce Labs. Offers comprehensive texting for both desktop and mobile devices, as well as a whole bunch of other services including video recordings of the tests.
- BrowserSeal is “a fast and easy to use cross browser testing and screenshot tool”, including all the major browsers and also Opera Mini.
- Mogotest is a comprehensive online testing tool that not only provides page views but site spidering, creation of page groupings, test histories, login for testing protected content, code analysis and validation, comparison tools, test scheduling, API access and more.
- Multi-Browser Viewer is another interesting option. It supports many browsers (including mobile ones) and has some other interesting functions as well.
Testing mobile devices
Then there is the vexed issue of testing mobile devices, for which there is a far greater proliferation than for desktop machines. Although there’s obviously nothing as reliable as testing on the real thing, there are nevertheless some tools that can help a little:
- The Chrome desktop browser is gradually introducing some handy mobile emulation tools that are worth checking out. (At time of writing, they are experimental and only available in Chrome Canary.)
- If you are on a Mac, you can download Apple’s iPhone/iPad Simulator as part of their iPhone and iPad developer tools—which does an excellent job of replicating the actual devices. (For the iPhone and iPad, there is also the handy iBBDemo2, a simple, cross-platform tester by Blackbaud Labs that runs on Adobe Air. However, tools like this—such as most of the others below—seem basically to provide a window the size of the device, rather than showing you how a page will really render on each device.)
- Sauce Labs (mentioned above) includes mobile testing.
- You can also download the Android Developer Kit for testing Android rendering.
- Mobilizer is a nice desktop app that emulates iPhone, Android, Blackberry and Palm Pre.
- Opera Mini has a handy online testing tool for desktops, although you won’t necessarily know how Mini will perform in each different mobile device that supports it. You can also download Opera’s Mobile Emulator, which is quite handy.
- You can take srceen shots of any mobile using the free Mobilito service.
- There is also the dotMobi emulator for simpler devices.
- There are also tools for testing the performance of media queries (or rendering on different screen sizes), such as the Responsive Design Testing site (which works on live sites) and the Responsive Design Bookmarklet, a bookmark that you can drag to your browser’s toolbar and which is really handy for testing the effectiveness of your media queries.
- If you have your own mobile devices, you can quickly test designs on all of them by using Remote Preview, a tiny JavaScript based tool that refreshes all your devices at once. A bit geeky, but a good option if that’s your thing.
Hopefully this will be a useful list for somebody. I readily admit that I’ve not tried many of the options above. I use VMware Fusion on my Mac, and that covers all desktop bases for me, really. As far as mobiles go, well, I kind of give up there. There are too many browsers to test for, in my view, so it’s really up to the device makers to ensure that their browsers work acceptably enough to stop customers turning to other products. There’s only so much one can do, after all.
Legacy Comments
Nice listing! I usually use the Application Compatibility Testing Using Virtual PC Images, VirtualPC’s from Microsoft. But most of these will expire in a few days ...
Hopefully Microsoft will update them soon?
Thanks Koesper! Yes, hopefully they will.