Design Ninja

Design Ninja

By David Moore

Friday, 05 April 2013

Cross Browser Testing - how we roll!

Cross Browser Testing - how we roll!

Now for anyone who has read the Code Guru's latest blog post you will know we are not a fan of non standard compliant web browsers here at Symphony Towers. Cross browser testing for defunct browsers can be very time consuming, restrictive and extremely difficult to do.

So while we certainly can not guarantee that the websites we build will function and look the same for every user (the variables of device, browser, configuration etc make this extremely difficult) we believe our testing process is pretty darn good.

So what do we do? I hear you ask

Well we test all our website builds with the following devices and browsers:

Apple Imac 27"  (Snow Leopard 10.6.8) - Running Firefox, Chrome and Safari (latest versions)
Apple Mac book Pro 13" (Lion 10.7.5) - Running Firefox, Chrome and Safari (latest versions)
Apple Ipad 3 (IO S 6) - Running Safari and Chrome
Apple Ipod Touch (IO S 6) - Running native Browser
Google Nexus 7 (Jelly Bean) - Running Native Browser
Samsung Galaxy S2 (Jelly Bean) - Native Browser, Firefox (Android), Chrome (Android)
Samsung Galaxy S2 (Ice Cream Sandwich) - Native Browser, Firefox (Android), Chrome (Android)
HTC Desire Z (Gingerbread) - Native Browser

And finally this is the big one

PC (Windows 7) - Running Firefox, Chrome, Safari and IE9 plus a virtual machine set-up with windows XP running IE6, IE7 and IE8 (Below I will go through how we set this up)

Now this is 'our' solution not 'the' solution and as I mentioned before there are so many varying factors that you can never know exactly how a website will manifest itself to the end user but we hope this gives us half a fighting chance.

The most complicated part of this was setting up a Windows based machine to run the older versions of IE, below are some instructions on how we achieved this:

1. We started off with a fresh install of Windows 7 on some crusty old PC that previously had the dual functionality of doorstop and foot rest.  We updated the IE version on this to 9 and downloaded Firefox, Chrome and Safari (just to make ourselves feel better).

2. Now because our choice of software for running IE7 and IE8 requires XP so next we installed windows XP mode onto our Windows 7 PC and then set up a virtual machine.  The link to this is here http://www.microsoft.com/uk/windows/virtual-pc/download.aspx and you basically need to download and install Windows XP Mode, Windows Virtual PC and Windows XP Mode Update then follow the instructions at the bottom to set-up the Virtual Machine (this process was time consuming but fairly straight forward).

3. So we now have a Windows XP virtual machine living within our Windows 7 OS (sounds like a train wreck doesn't it).  Next we needed to get the older versions of IE running on this virtual machine (6, 7 and 8). IE6 comes bundled with XP Mode as its default browser so big tick there, now IE7 and IE8.  To do this we used Utilu's IE collection (http://utilu.com/IECollection/) once you can navigate through Softpedias complex download process (normally the download link most hidden and inconspicuous is the one to click) installing this is pretty easy.  We unticked all options other than IE7 and IE8 (I mean IE1 to IE5.5 really? we are not that hard on ourselves) and then dragged a couple of shortcuts to the desktop.

The result:

So now we have a stand alone PC machine (you really wouldn't want to be using this for much else) with Windows 7 and XP running Firefox, Chrome, Safari, IE9, 8, 7 and 6 (Ever so slightly more useful now than as a foot rest or doorstop).

If you have any good advice or set-up's for cross browser testing please drop us a comment as I believe that this is always going to be a moving target.

Did someone mention IE10 Ahhhhhhhhhhhhhhh!

Comments (4)

  • Tom Batey

    08 April 2013 at 16:28 |
    Really useful to see how you are set up to carry out cross browser testing effectively.

    We take it seriously too at WebDepend, as we test websites (and mobile apps) for a living.

    Instead of the virtual Windows XP machine you could try something like Multi-Browser Viewer, which allows you to run virtualized versions of Internet Explorer on the same machine. It should make testing in different browser versions that bit more straightforward.

    Also, to cover other specific devices or OS/Browser combinations that we don't physically have access to, I use the following software tools depending on what I need:

    www.crossbrowsertesting.com - I use it for different versions of iOS and Mobile Safari mostly but handy also for Blackberry and other desktop OS/Browser combinations.
    www.browserstack.com - similar to the above.
    www.spoon.net - allows me to use access a virtualized IE10.
    www.perfectomobile.com - if you need to test on a number of mobile handsets. Expensive but lets you install mobile apps on the device itself.
    www.scirocco-cloud.com/en/ - similar to Perfecto but cheaper (not quite as good) and only has access to Android devices.

    Another tool of note is https://saucelabs.com, which allows you to build scripts (compatible with Selenium) to automate some of your browser testing.
  • David

    03 May 2013 at 08:35 |
    Hi Tom,

    Thanks for stopping by, I have had a look at the sites/tools you mentioned. We have used saucelabs before. It is such a minefield out there.

    Keep up the good fight :)
  • Dan

    08 May 2013 at 15:46 |
    Great post, and interesting to see how other agencies approach this minefield! (With great care, in my experience...)

    We also have XP running on a virtual machine for older versions of IE (spit), as well as Macs running Snow Leopard, Lion and Mountain Lion. Lots of PC's running Windows 7 and one touchscreen PC running Windows 8 (my Project Managers, I'm not allowed near it unfortunately...! ;-))

    Also, don't forget good ol' IETester ( http://www.my-debugbar.com/wiki/IETester/HomePage) which has dug us out of a hole on many occasions. It crashes every 10 minutes but hey, that's part of its charm :)
  • David

    08 May 2013 at 16:42 |
    Cheers Dan,

    IE tester is a darling isn't she.

    I shouldn't talk to loudly though as the windows PC in the corner running our virtual machine might get jealous.

    Touchscreen PC is another one we can add to the list :-S

Leave a comment

You are commenting as guest.

Latest Big Bad Blog Post

ExpressionEngine Force HTTPS For Selected Sections with Htaccess

ExpressionEngine Force HTTPS For Selected Sections with Htaccess

Have you ever wanted to force a HTTPS connection for your ExpressionEngine website? If so, you may have also wanted to 'unforce' that connection for other areas of your website, either for performance issues or because maintaining both HTTP and HTTPS for the same section can be tricky. Avoid those pesky browser warnings about unsafe (non HTTPS) assets with this htaccess rewrite.

Continue Reading

Latest twitterings

Fill in our contact form

  • Please complete all the fields

Thanks for your message! We will get back to you ASAP!

* indicates a required field

TOP