Cross Browser testing: 4 options, 1 answer.
As web designers we have the difficult task to make sure a website looks nice in all sorts of browsers.With the release of Internet Explorer 8, Google Chrome and Safari slightly but surely taking a bigger piece of the browser pie we have to check our creations in at least 6 different browsers (including Internet Explorer 6, Internet Explorer 7 and Firefox).
I’ve looked at four different ways to check websites in several browsers in order to find the holy grail of cross browser testing. I’ve researched four different options and found one option to be the best. Read on if you want to know whose the winner. (Please take note that I’m talking about cross browser checking on a Windows machine. Some information might still be valuable for Mac users though.)
1. Litmus
Litmus in a web application is which let you test a website by giving it the URL. It will return screenshots from up to 23 major browsers (including the six above)! So theoretically you can test your website in all major browsers. But the problem is you only get a screenshot. So you can’t test the interaction of drop down menu’s or forms, which is a big miss.
Pro
- Web based so no need to install something on your PC.
- Covers 23 different browsers.
Con
- Free version only allows testing on two browsers. (Else it will set you back for at least $24 a day or $49 a month)
- You only get to see screenshots so you can’t test any interaction.
2. Microsoft Expression Web SuperPreview
‘Wow, it’s got SUPER in the title so it HAS to be SUPER right?’. Not really. SuperPreview lets you view your website in Internet Explorer 6, Internet Explorer 7, and when installed, Internet Explorer 8. It has great features like overlaying the IE6 version over the IE7 version or you can place them side by side so it’s easier to track differences. But it also has great disadvantages. It’s not possible to click links or test interaction (drop down menu or forms) and there is no way to use tools such as the Internet Explorer Developer Toolbar which make it easier to solve the problems. But the biggest problem is that the rendering engine isn’t working correctly! There were some major differences in the rendering with Superpreview compared to the rendering of a native Internet Explorer 7. Which renders (no pun intended) Superpreview useless. It’s still in a BETA stage so hopefully they can fix these problems, maybe then it would be a great app but for now it’s still lacking.
Pro
- It’s free (at least for now)
- Easy to track differences
Con
- Not easy to solve problems (no support for Internet Explorer Toolbar)
- Only displays Internet Explorer versions. No Firefox, Chrome or any other non-Microsoft product.
- Unable to test interactions such as drop down menu’s or forms.
- Rendering engine is seriously lacking.
3. IETester
lETester is a webbrowser which enables the user to open tabs using different Internet Explorer rendering engines. In the latest alpha version you can test websites with Internet Explorer 5.5, 6, 7 and 8! You can click links, use forms and test drop downs just like a normal website. A great tool but the only thing lacking is the Internet Explorer Developer Toolbar making it easier to track down and solve problems.
Pro
- Enables testing for Internet Explorer 5.5, 6, 7 and 8.
- It’s possbile to test interaction such as clicking links, filling out forms and functioning of drop down menus.
Con
- Not possible to use the Internet Explorer Developer Toolbar.
4. The Answer: Using Virtual PCs
Virtual PC is an application developed by Microsoft. With Virtual PC you can simulate a virtual desktop PC with a Windows operating system of your choosing. Using Virtual Hard disks you can create different PCs with different browsers. So for example you can create a Virtual PC running Internet Explorer 6, Chrome and Safari (for Windows). Another Virtual PC can run on Internet Explorer 7 and another can be used for testing Internet Explorer 8. Testing in an environment which is an exact copy of the environment of the user is a big plus! You can test all the interaction and use the Internet Explorer Developer Toolbar to iron out those last bugs. Setting everything up can be a hassle but it’s worth it.
Pro
- Testing browser in the same environment as the user.
- It’s possbile to test interaction such as clicking links, filling out forms and functioning of drop down menus.
- The ability to use the Internet Explorer Developer Toolbar.
Con
- It’s a hassle to set up.
- You have to maintain the Virtual Hard Disks as they tend to expire after a certain date.
As you can see testing for different browser can be a bitch but in a way you get a great sense of achievement when your website is running smoothly in all those different browsers. Do you have a better way to test websites in different browsers? Let me know!
June 17th, 2009 at 12:50 pm
It’s a lot of work to set up virtuel machines and maintain them just for testing purposes. A lot of Mac users choose that route as they’re not savvy enough to run any browser but Safari on their machines.
IEtester is bij far the best tool in my opinion and i’ve tried them all. The trouble i have is testing for different versions of Firefox as this browser is growing up fast the last years. FFtester would be a product i’d buy in a hartbeat
October 16th, 2009 at 10:38 am
Try http://www.spoon.net/browsers/ – by far the best way IMO.
December 6th, 2009 at 5:51 am
Try Multi-Browser Viewer – http://www.multibrowserviewer.com – it’s not free but allows you to run 16 virtualized sandboxed browsers on one windows machine including IE6, IE7 and IE8, Safari, Chrome FF 2, 3 and 3.5 each with their correct rendering engines(similar to spoon, but no download required also no extra installs needed).
It also has full page screenshot functionality, similar to browsershots, that let’s you view how a page will load in 45 different browser on 3 operating systems (Mac, Linux and Windows) as well as HTML validation and auto correction.