Cross Browser Testing on Mac.
Mon, Nov 16, 2009 by Erico Vinicius
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 browsershots.org 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:
- Download and install VirtualBox
- Find a copy of Windows XP and Install on VirtualBox (It HAS to be Windows XP, otherwise IE6 won’t work)
- Install Multiple Versions of IE or the standalone version of IE7 on top of the default IE6 + firefox (renders different from the mac).
- If you are testing from your local, create a virtual host. Here's a quick tutorial on how to do this.
- Update the hosts file on the windows install - Go to: C:Windows/System32/Drivers/etc/ and add “10.0.2.2 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, there is a tutorial to get both browsers on the same system. I simply have them installed on different partitions since they are quite similar beside all the CSS3 support that Safari4 have
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!
Jeremy Hutchings posted on November 24, 2009 4:16 am
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.
"which is great" or "that is great" ? .......
P.S. the nicely styled form looses the sexy theme when an error pops up like :
The URL of your homepage is not valid. Remember that it must be fully qualified, i.e. of the form http://example.com/directory
Anonymous posted on November 19, 2009 11:37 pm
Yeah, If your making a few bucks, don't bother with the free stuff on this one. Spend $80 and buy VMWare fusion for Mac. I tried to find all kinds a free stuff but times money. With VMware you don't have to mess about..
admin posted on November 19, 2009 10:13 pm
Good news on multiple Safari installs:
http://michelf.com/projects/multi-safari/
I will definitely be testing this over the weekend.
Érico Vinicius
elv posted on November 18, 2009 11:49 pm
I also use VMware and MultipleIE and it works wonders. Even IE's conditional comments can work. I already used MultipleIE before I switched back to the Mac.
But it seems it's no longer maintained. It doesn't do IE8 so far, so I'll have a look at Internet Explorer Collection (thx Tom James).
IETester for now is crashy to the point of being unusable.
If I didn't already have a Windows licence and VMware, I'd really evaluate CrossBrowserTesting.com. The monthly cost seems good to me compared to the price of the software, plus the hassle of maintaining a Windows install.
Ken Hamric posted on November 17, 2009 1:19 pm
CrossBrowserTesting.com provides both screenshots and interactive use of all configurations (PC, Mac, and Linux) via VNC. It basically outsources your need to build and maintain multiple different machines with the various browsers loaded. You can use the screenshot service to 'screen' your design changes, quickly checking across 10 or 15 browsers/os combos, then use the live vnc testing to interactively work with the page 'live'. Ajax and javascript in the past few years have really increased the need to actually use the local browser to validate the look AND the functionality of the site - unlike BrowserLabs and others, we provide this ability. As we say, if a screenshot is worth a thousand words, a live test is priceless!
The service is actually built on top of Drupal 6 using the Acquia Marina theme, and we support the Drupal project by providing a number of the core developers with free testing time to help improve Drupal. Check us out.
Ken
Founder
garbanzito posted on November 17, 2009 6:05 am
one browser per VM is the way to go
i just download the free browser testing VMs from Microsoft
go.microsoft.com/fwlink?LinkID=70868
it's not hard to convert them from Virtual PC format to VMWare Fusion; VirtualBox might be harder, but i'm sure it's possible; either way you save the trouble of procuring and installing Windows
Anonymous posted on November 17, 2009 4:17 am
Don't forget Adobe Browser Lab
https://browserlab.adobe.com/index.html
Ryan Dempsey posted on November 17, 2009 1:25 am
I use VMWare Fusion to run XP on my Mac. Works and performs great. On Windows I also run IETester. http://my-debugbar.com/wiki/IETester/HomePage
Brian Egan posted on November 17, 2009 1:11 am
I gotta say I've been loving VMWare Fusion 3.0. I tried VMWare Fusion 2.x and Parallels, and both were pretty good, but VMWare Fusion 3.x is blazing fast (literally feels twice as fast as either previous setup). Also, the Unity mode in 3.x is improved and now my favorite type of "Seamless" integration. Works great all around. How does VirtualBox stand up against VMWare Fusion for speed? Have you guys tested that at all?
I personally run a separate instance of windows for each version of different browsers. Seems retarded, but it's the only truly "native" way to do it. Screenshots don't work for me, either. I like to get up in there and experience my sites with those browsers.
Multiple IEs produces some inconsistencies for me, and as you said doesn't work that great with IE8.
Here's what I do:
Win Instance 1: IE6 / Firefox 1.x
Win Instance 2: IE7 / Firefox 2.x / Safari 3.x / Chrome 2.x
Win Instance 3: IE8 / Firefox 3.x / Safari 4.x / Chrome 3.x
Thanks for the info on virtualbox! I'd thought about playing with it before, and may have to give it a shot!
Tom James posted on November 16, 2009 11:50 pm
Nice article!
I just switch from Multi IE to Internet Explorer Collection (http://www.softpedia.com/get/Internet/Browsers/Internet-Explorer-Collect...), it does IE 8 down to 3 i think, so very nice!
Have to check on virtual box, Parallels is a total resource hog!
Tom
Samir Nassar posted on November 16, 2009 11:33 pm
I'm a fan of Litmus (http://litmusapp.com/). They even have a Mac client. Of course this doesn't help with interactivity but it's pretty cool to get full-page screenshots of a page in multiple browsers to check for rendering issues.
Post new comment