Cross Browser Testing on Mac.

November 16, 2009
blog author



Most of the front end guys here at Appnovation work on a Mac environment, what is great but make things a little be harder to assure that our CSS and JavaScript will work on Internet Explorer.

Even thought there is only one outdated version of IE for a Mac that doesn't even render the CSS the way it does on a PC there are several ways we can do browser testing. From simple web services like that will give you a screenshot on how your site looks on several different browsers (GREAT service but, has some limitations), to having a windows partition on your Mac.

Because we love free and open-source most of us are using VirtualBox which allows you to simulate a PC environment and have one or multiple windows installs running on your Mac OS.

So, in a nutshell, what your are going to do is:

  1. Download and install VirtualBox
  2. Find a copy of Windows XP and Install on VirtualBox (It HAS to be Windows XP, otherwise IE6 won’t work)
  3. Install Multiple Versions of IE or the standalone version of IE7 on top of the default IE6 + firefox (renders different from the mac).
  4. If you are testing from your local, create a virtual host. Here's a quick tutorial on how to do this.
  5. Update the hosts file on the windows install - Go to: C:Windows/System32/Drivers/etc/ and add “ yourProjectFolder” to the hosts file and you’ll be good go start testing!

It starts to get tricky if you want to have IE8 along with the multiple IEs and/or if you want to have safari 3 and 4 on your Mac Os. Luckily I haven't had big problems with those browsers till this point.

As far as Safari goes, I simply have them installed on different partitions since they are quite similar besides all the CSS3 support that Safari4 has.

For IE8 the best approach so far seem to be having it running on a separate windows install.

Do you know any other ways of doing browser testing on a Mac? Leave a comment, we’ll be happy to hear about it!

Happy debugging!