For the past couple of years I’ve been trying to get a reasonable setup for testing Internet Explorer on my Mac. With the recent release of IE 8 RC1, I thought it might be a good time to revisit my browser testing setup.
I use an Apple Macbook (the black one) with OS X 10.5 and 4GB of RAM as my sole machine. With my Mac I should be able create a reasonable setup to test all major web browsers. I’m less interested in testing all OS and browser combinations simply because that seems unreasonable for most projects.
Operating System and Browser Testing Combinations
The following is the list of OS and browser combinations I want to be able to test; each OS has browsers listed in the order of which I care most about supporting:
- OS X 10.5
- Firefox 3
- Safari 3
- Windows XP
- IE 7
- IE 8
- Firefox 3
- IE 6
- Firefox 2
Developing on a Mac, I’m always running things in OS X 10.5 / Firefox 3, making the combination always supported. I will also occasionally checkout how Safari 3 is doing while developing, although it’s usually fine.
When in browser testing mode (not developing new features) I’ll run through the Windows XP / Firefox 3 and Windows XP / Firefox 2 combinations; mainly to checkout how the font-renderings are holding up in Windows.
Then comes IE testing. I start with IE 7 which I find not too difficult to get working, usually just have to fix the hasLayout issues. With IE 8 coming into the mix soon I’m going to start testing it; hoping that it will be even easier to get working than IE 7. JavaScript frameworks like YUI are pushing hard to support IE 8; which is great as the CSS support in IE 8 seems to be much better than in IE 7. Of course the hardest of all to get working, IE 6; some projects need to support it no matter what, others can just not worry about it (like my personal web page).
I feel that I’ve found a testing setup that will allow me to carry out my browser testing process much easier than I could in the past.
My Browser Testing Setup
Let me just say, VMware Fusion 2 is awesome, simple to use, and works really well; much better than the 1.0 version. Initially after buying Fusion 2 I setup a virtual machine for Windows XP SP3 with an old XP install disk I had laying around. I installed all the updates, including IE 7, and also put Firefox 3 on; basically this is my standard Windows XP VM.
Windows XP Virtual Machine showing IE 7 and Firefox 3
Now I just have a standard Windows XP VM, I still need to have a way to test IE 8, IE 6, and Firefox 2 on Windows XP. In the past I’ve messed around with trying to install multiple versions of IE and Firefox on a single OS instance. My experience with that approach has been that it’s hard to manage and update, and is pretty crufty. This time around I wanted something simple, more straight-forward, and standard.
I thought about what I have, a self contained virtual machine; it’s up to date with the latest service pack of Windows XP and the latest production versions of IE and Firefox all wrapped up into a single package-file on my MacBook. It occurred to me that since VMware Fusion is a hardware emulator, that I should be able to copy the .vmdk (Virtual Machine Disk) file that is contained in the VM’s package contents and create another VM using the copied disk file.
I created two copies of my Windows XP VM’s vmdk file for two new virtual machines to use. I created one VM for IE 8 (XPSP3IE8 and had it use one of the vmdk copies for it’s disk); which I downloaded and installed Internet Explorer 8 RC1 on. For the other new VM (XPSP3IE6 which used the other vmdk copy), I uninstalled IE 7 which reverted to IE 6, and also installed Firefox 2. This process left with me 3 virtual machines of Windows XP SP3 each set to use 512MB or RAM: one has IE 7 and Firefox 3, one has IE 8, and the other has IE6 and Firefox 2.
(Details on creating copies of existing VMs)
My Virtual Machine Library with 3 Windows XP VMs all running
This approach feels much better for multi-browser testing; no hacks, no cruft, and easy to maintain. Another useful feature of VMware Fusion is Unity Mode, which allows you to have application windows from VMs present on your host machine’s (my MacBook’s) desktop. Meaning you can have IE browser windows on your desktop as if they were native to your Mac.
IE 6, IE 7, IE 8, Firefox 3, and Safari 3 all running together on my Mac's desktop
My browser testing setup should now hold me over for the projects to come and help me get new and existing web projects supporting IE 8.
The YUI team has updated their Graded Browser Support today. Interesting as the comments point out, YUI isn’t [formally] tested on Linux nor Google Chrome.
I also use a Mac for browser testing, using Fusion in Unity mode. I find the performance of the 3 XP VM (IE6/FF2, IE7, IE8rc1) to be sufficient with only 256MB assigned to each VM; but then the Mac only has 2GB of RAM. It’s definitely the best testing setup I’ve had.
So far I’ve found IE8 to be better than FF2 in CSS2.1 support, and I’ve only found one area where it differs from FF3/Safari 3:
Test
FF3 and Safari 3 render a 200px-wide button, with 20px padding inside that. IE8 renders it 240px wide.
@Andrew: That’s good to know your having success with 256MB of RAM per VM. I might try switching mine to, because with each one at 512MB things do run slower than I like even with 4GB on RAM on the host Mac.
You don’t even bother trying to test in at least one version of Opera? Give Dragonfly a whirl, it’s in alpha so it has its share of bugs but it’s more feature-rich than Firebug.
@Han I don’t test Opera because I’m not an Opera user and there aren’t enough of them to justify the time. If a project I was working on saw or estimated > 1% Opera users, I would test it.
just look http://www.xenocode.com/browsers/ and you will need only one instance …
recently switched to macbook – as my primary dev. machine and have same problem with testing cause in our company are almost all apps only IE friendly so I had several instances of XPs (as you, IE5, IE6, IE7 and now it will be IE8) and I really hated it… now with Xenocode it's really simply – of course there are sometimes problems with stability – mainly with new IE8 (which is still beta so I dont care…) but in conclusion – can't live without it anymore and life with mac is fun again :D
@Lukas Interesting. I might give it a try on my main XP instance… What are your reactions from using Xenocode?
Can you tell us how you copied your VMWare Fusion virtual machine? I tried this by simply copying the VM file yesterday, and now it seems there is a networking conflict between the original and the copy, as only one can be on the network at a time. Is there an “official” way to duplicate a VM in VMWare Fusion to avoid networking issues?
@Dan I’m not aware of an official way to copy a VM that’s been published by VMWare. I never investigated if they have such documentation on their site or in their support area. For you networking issue, I can tell you that all my VMs are setup to use NAT, sharing the Mac’s network connection. I haven’t tried the Bridged option; are you using NAT or Bridged?
I will elaborate more on the process I used to make copies of my VMs:
You should now have a new VM that is a copy of an existing VM. This is the process I went through twice to create a VM for IE6 and one for IE8, which were based of my original Windows XP SP3 w/ IE7 VM. I hope that helps.
this looks like exactly the info I was looking for (and honestly couldn’t find documented anywhere)! In the mean time today I managed to hose one of my VMs, and am now starting over from scratch. I’ll be sure to try out your steps later on tonight. Thanks!!!
I wanted to let you know that I followed your instructions and it worked perfectly! There’s no way I could have figured that out on my own. I’m saving your tutorial for the inevitable time when I have to do this again. Thank you!
What a great article and thorough instructions on making copies of the VMs. I’ve been wanting to install VMs on my Mac but haven’t had the time to do the research as to which product to purchase. I’m sold on the VMware Fusion. Thanks Eric, AGAIN!!