As the front end guy for Fresh Interface I loath browser testing. It's messy, it brings tears to my eyes, it makes me drink too much coffee and is the source of odd looks from my colleagues as I moan, groan and then cheer. Having said that, it is a must. Quality assurance is something that is normally an after thought in my line of work, yet in my opinion it is one of a number of things that separate the kittens from da lions. It is often a hard gig to keep up and to those who do their best, here's a cookie

Browser Support

For the majority of the projects I work on A-Grade Browser Support is required. Right now that means supporting Firefox 2 & 3, Safari, IE6 and IE7.

So what are your options in testing across these browsers on a Mac?

Option 1: An army of machines or friendly colleages

Maybe you have a few decicated machines you can jump onto or remote into in the office? Maybe a few Macs and PC's have retired to a screenshot farm. Or maybe you have a few colleages that you sneak up on and push down the other end of the office on their chair while you pinch their computer to test your work out on a browser you dont have.?

All of these work, but are painful. Additionally, if you have been stealing colleages computers by force or while they are not looking you run into the risk of retaliation or having to return the favour.

Option 2: Online screen captures

There are a number of sites such as Browsershots and Browser Cam that will lovingly take a capture of websites in just about every browser on earth.

They work great for a quick glimps of how things are working in an obscure browser, but if you are trying to test or fix in a more fiddly browser then it can be quite time consuming. A static screenshot is exactly that, no fluid layout testing for you.

Option 3: An army of browsers on your very own Mac

It is the war machine that will win the battle, a lone Macbook with the tools to take on any A-Grade browser.

Safari 2 & 3

A wonderful browser that is a favourite among many of the people I work with. To boot, Safari's built in Web Inspector is fantastic and a simple alternaltive to Firebug on Firefox. To enable just run defaults write com.apple.Safari WebKitDeveloperExtras -bool true. You can also find some great development tools in the form of bookmarklets

If you have not got it already... update update update.

Ok, so you upgraded to Safari 3 and just as you did a client has asked for Safari 2 support. Not to fear, Safari 2 can be run along side Safari 2 as a standalone app.

Firefox 2 & 3

Firefox 3 is my browser of choice for development. With tools like Firebug, The Web Developer Toolbar, Yslow, Pixel Perfect it makes for a great development browser.

It is also really easy to get Firefox 2 running along side Firefox 3. For me it was as easy as setting up a new profile, downloading Firefox 2 and now I run do shell script "/path/to/firefox/Firefox2.app/Contents/MacOS/firefox -P Firefox2 -no-remote &" through Quicksilver. If this does not rock your boat you can also get an app to do it for you.

Internet Explorer 6 & 7

Internet Explorer and Macs do not play well together. In fact it has been years since they spoke to each other. This has made things pretty uncomfortable for us webby types in Mac land. Sure, they are from opposite ends of the world, but that should not stop us from doing our jobs, nor need it when you can have a virtual machine at your disposal!

In an evil universe you would need to buy a copy Windows for each version of Internet Explorer you wanted to test in. So it is a good thing Microsoft release virtual images that come bundled with Internet Explorer 6, 7 or 8. Thanks to VirtualBox you can also run these images on your Mac for free. There is a little magic involved but thse instructions will help you get things running with minimal effort.

Required Apps

The instructions below assume that you have downloaded and installed the following applications

  • VirtualBox - After trying out a few virtual machine apps on the Mac I found VirtualBox to be the quickest and most stable. It is also free!
  • Q - Contains qemu-img which we will use to convert the Microsoft Virtual PC to something digestable by VirtualBox. When installing just drag over to your applications folder
  • Zipeg - Used to extract a windows self extracting executable

Download an Internet Explorer VPC image and convert it to run on VirtualBox

  1. Download the Windows hard disk image you need

  2. Now you have a executable file in Mac world. WTF do you do with it? Zipeg to the rescue.

    Rename the exe to a zip and extract using Zipeg. Alternaltivly, if you have access to a Windows machine just unpack and copy the extracted file back to your Mac

  3. Ok, so now you have a lonesome VHD image. This is perfect if your want to run Microsoft's Virtual PC on a Windows machine but we need it to run on Virtualbox.

    Time get hardcore and convert this VHD to a format that Virtualbox can digest

    1. Open up terminal
    2. Run:
      /Applications/Q.app/Contents/MacOS/qemu-img convert -O vmdk path/to/file/input.vhd path/to/file/output.vmdk

Get things running in VirtualBox

  1. Start VirtualBox and click 'New' to start the New Virtual Machine Wizard
  2. Run through the wizard keeping the default Base Memory Size. When you get to the Virtual Hard Disc screen choose 'Existing' and click on 'Add' to select the virtual disc you converted above
  3. Fantastic, you can now run your Virtual Machine
  4. Cancel any dialogs that hassle you to install hardware or ask you to insert a Windows disk.
  5. Once everything has loaded up, install Guest Additions (Devices > Install Guest Additions)
  6. Setup a Shared Folder within VirtualBox so you can open files on your Mac.
  7. If you wan't access to the intertubes from Windows then install the driver for the ethernet adapter that is in the root directory of the Guest Additions CD at D:\AMD_PCnet (Note: To install update the driver from the Device Manager and choose to install the driver from a specific location and then choose 'Have Disk' on the 'Select Network Adapter' screen)
  8. Thats it, you now have your very own copy of Internet Explorer running on a Mac, rinse and repeat for any other versions you need to setup

So how do you brower test?. Do you have any handy hints or secrets you wanna share?. Leave your comments below =)