How to test sites in IE 6/7/8, Firefox 2/3, Safari 3/4, Opera 9/10 and Chrome from one machine.

Testing your website in as many browsers and platforms as possible is essential to ensure in this golden age of choice, that a site works for everyone and with “most” browsers following the same standard - can you guess which company doesn’t? – a good design leads to good results for the client.

A lifetime ago, while I was working as a semi-software engineer come ASP/PHP web developer, I had to test all of my changes on multiple platforms to ensure whatever updates were applied, worked for everyone.

To do this, we used a vast array of Virtual Machines using VMWare. A virtual machine is a PC that runs in a window (or full screen) on another machine (called the host) as if it was a separate PC in its own right. This allowed us to set up different versions of IE (and then Netscape), for Windows 95/98/ME/XP etc for testing. Any problems with our test release on virtual machines and it was right back to debugging stage. In conjunction with this, we also used development, test and live servers. At each stage, the changes were tested and then passed to the next level and so on until finally the changes went live.

Slow and cumbersome? Well yes, but wholly essential. Imagine sending a change to a live server only to find out an hour later that the client has had reports from customers that the site has gone down, or worse, the change has gone live and now can’t be backed out. Designers and developers who do that send shivers down my spine. Maybe you need to learn that mistake, to get the cold chills, to feel like an idiot – no thank you. Not saying the process is cast iron proof, it’s only as good as your testing (and developers make for bad testers of their own code!), but it still there as quality and assurance layer to cover proverbial back end.

Today, I employ the exact same process, though more streamlined, on all the sites I’ve worked on, be it a small brochure site or a completely customised solution. I also use version control software on my files (web and images as well as Photoshop) which needs its own article for a fuller explanation, but this too has saved my life more than once.

Why bother testing sites in different browsers if all the browsers follow the same W3C guidelines and standards?

Well, they don’t. There are subtle differences, and the bane that is IE6 which all web developers will testify to (did you know support for IE6 has been extended for a few more years? *sigh*), Microsoft are the worst at taking a standard and breaking it and bending it to their own needs and devices.

So, in this new decade of the 10’s, what’s the best way for testing your site? If you’re a Mac user, setting up Paralles is the best option, but for Windows’ users like myself, I’m going to stick with showing you how to have IE 5.5/6/7/8, Firefox 2/3, Safari 3/4, Opera 9/10 and Google Chrome running off your Windows 7 Professional (or greater) box by simply clicking the icons on the desktop.


Step 1: Install / Set-up your free copy of Windows XP on your Windows 7 machine.
As mentioned, you’ll need Windows 7 Professional or greater for this to work. If not already installed, get the XP Mode installer from: http://www.microsoft.com/windows/virtual-pc/download.aspx


Step 2: Install a virus checker!
Once XP mode has been installed, follow the on screen instructions for first time setup. Then download a free copy of AVG Free (www.avgfree.com) or similar to install on your virtual machine. Is there much point to installing a virus checker on a virtual box? Hell yes. Regardless of what anyone tells you.


Step 3: Upgrade / Downgrade XP Mode IE to version 7
Run Windows Update to patch the XP Mode machine to the latest fixes. DO NOT installed IE8, untick this from the list and expand it then chose “hide from updates”. IE 8 will be the main browser on your host, or main PC. You’re better off doing this via the Update website (http://update.microsoft.com) rather than the system tray icon.

If you’ve already installed XP Mode and upgrade to IE8, you can uninstall it (rollback) to version 7, or you may need to reinstall IE7 from here:

http://www.microsoft.com/downloads/details.aspx?familyid=9ae91ebe-3385-447c-8a30-081805b2f90b&displaylang=en


Step 4: Install multiple IE mode software
Kudos goes to Andrew @ Hoffi (www.hoffi.com) for the heads up on this application. Download and install the application below in your virtual XP mode machine:

http://tredosoft.com/Multiple_IE

I installed versions 6 and 5.5, though unless you have any specific reason for installing lower versions, just stick with 6.

On your XP Mode virtual machine, you now have IE 7 and 6 installed side by side!

But that’s just the start…


Step 5: Installing other browsers
For the full range of browsers, go here: http://filehippo.com/

In the search box enter “Firefox”. Click on the top result (currently 3.6RC1). In the right hand side is a list of all the different versions of Firefox released. Ignore all v3, and look for the last v2 release by clicking on “view more…” and going to roughly page 5 to install version 2.0.0.20. Make sure you install this on the XP Mode virtual machine!

Do the same for “Safari” but install the last version of 3.

Do the same for Opera, but install the last version of 9.

On your XP Mode virtual machine, you now have IE 7 & 6, Firefox 2 and Safari 3 installed.

Close your virtual machine using the “cross” icon. Allow it to hibernate.


Step 6: Install latest production versions of browsers on your host PC.
Your “host” machine, the Windows 7 PC that has XP Mode installed on it, should be updated with the latest versions of the same browser, so IE8, FF3.5, Opera 10, Safari 4 and Chrome v3.

Don’t install any beta or release candidates (RC) versions of these browsers; keep to the latest stable releases as you’ll need to test in stable environment your clients will also use.


Step 7: Completing the magic.
Now comes the best bit! Keep the XP Mode virtual machine closed/turned off.

In Start -> All Programs scroll down to “Windows Virtual PC” and click on it to expand the folder.

Click on “Windows Virtual Mode XP Applications”.

Right click and drag “Internet Explorer (Windows XP Mode)” to your desktop and create a shortcut (or copy it). Rename this as “IE 7” or similar.

Do the same again for the IE 6 and another other versions you installed under “MultipleIEs”

Again, repeat this step for Opera, Safari and Firefox renaming them something meaningful like Opera 9, Safari 3 and Firefox 2.

If you can’t find any of these shortcuts under “Windows Virtual Mode XP Applications”, then open up the virtual machine, double click on My Computer -> C: -> Documents and Settings and copy the short cuts from the XP Mode User (sometimes called XPM User) to All Users -> Start Menu. Close the virtual machine and they should appear in the Windows 7 start menu under “Windows Virtual Mode XP Applications”.


Step 8: Start Testing!
That’s it. On your Windows 7 desktop, you’ll now have shortcuts for various versions of browsers. Just double click on the shortcut icon and it’ll open up the application as a window on your Windows 7 desktop without first having to open the virtual machine manually. You can do this as many times as you like with the different browser versions.

If like us at Webfibre, you have a Windows Server 2003/2008 development server in the office which all your web designers or developers are using, then by altering your hosts files (on the host and VM) or using IP redirection software, you can test your websites locally on your development server in a similar server environment (to test ASP.Net, PHP and such server services) as your live web server. Very handy!

Jay.


...more