What are the best tools for accurate Cross-Browser Testing?

May 4th, 2012

One would almost certainly be forgiven for thinking that given the vast array of tools that web developers have at their disposal, there would be one single tool that would allow you to accurately test for all browsers.

Unfortunately this is not the case.

Modern browsers are being updated regularly, which increasingly makes for a more seamless testing experience.  But at the time of writing, us developers and designers still have to cross swords with Internet Explorer and its older versions.  Support for IE6 was dropped at the turn of the year and our main battle now lies with IE7.  Although The Internet Explorer 7 Countdown currently reports that worldwide usage is now around the 4% mark, although different regions report higher figures than others which requires us to support IE7 for just that little bit longer, fingers crossed.

There are numerous tools that are available to test IE7 from simulators and web based solutions through to legacy versions and here I’m going to run through what I’ve used in the past and what I’m currently using now to get the best possible results.

IE Tester

In my personal experience, IE Tester is the most popular tool amongst my old University friends and work colleagues.  I used it religiously when first starting out in web development and thought it bulletproof without looking around for alternatives.

After time, I began to find out about other alternatives which I’ll go over shortly, and I was finding more and more inconsistencies with what IE Tester was rendering.  In short, IE Tester wasn’t really showing what a proper version of the IE7 browser would.  That’s not to mention the crashing every five minutes which required the program to be restarted:

IE Tester Crash

There are other problems which this software has:  CSS filters don’t work in user mode along with conditional statements often failing and the Debug bar was quite frustrating to use compared to something like Firebug.  This leads me on to the next tool I tinkered with, which came from Microsoft itself.

Internet Explorer 9 Browser Modes

IE9 has a feature that allows you to render your application in versions 7+ by pressing F12 on your keyboard and then selecting the version you require:

IE9 Browser Mode

‘This is it’, I thought.  This is the one thing that I can now use and coming from Microsoft, surely it’s reliable to use.

Not quite.

Although the interface and DOM selection tools were smooth along with the Javascript console, there still were inconsistencies with the rendering.  After adjusting something as trivial as a floated list element to fit within its parent container, even though in the browser mode it looked like it fitted,  after updating the CSS file, I found myself scratching my head when I found the list element down on the next line once more.

There were also times that it even failed to load up the DOM for me to inspect:

IE9 Loading Dom

It’s also worth noting that IE9 has a different Javascript engine to the original browsers, meaning that there are differences in experience between it and a properly installed version of IE7.

Eventually, it became clear that the only real way of testing for the older browsers, is testing using older browsers…

Virtual Machines and IE Collection

I’ve come to find that the most reliable testing can only be done on the actual product itself or the closest version rather than most third-party apps.  Operating Systems have come a long way in a short space of time and it can be quite tricky to get an old version of IE running on Windows 7 if there is currently a version of IE9 running on it.  Windows does not allow you to install an older version ontop of a recent version.

The answer is to use a Virtual Machine to run an older Operating System like XP to install the Utilu IE Collection.  Let’s take a look at Virtual Machines to start.

Virtual Machine Choices

Virtual Machines allow us to run other Operating Systems on our machine as guests.  We can allocate as much memory as we like to the installations along with any operating system we wish.  We can then share the files between the ‘guest’ OS and the ‘host’ OS – perfect for testing.  All we need for this is some Virtual Machine software and a disk image of the OS we want to run on it (Windows XP/OSX/Ubuntu etc).

Like most software, there are different alternatives offering the same service, both paid and through Open Source projects.  Paid options include Parallels and VMWare Fusion while options for Open Source software include QEMU and VirtualBox.  The pros and cons of each package is something to discuss another day.  But just to outline my choice, I chose VirtualBox because it’s free, very easy to set up configure, and comes from a big player in Oracle.

Onto the IE collection.  Straight out of the box, it provides:

  • Standalone versions of IE running from 1 – 9 (You choose which versions you install)
  • Accurate rendering
  • Accurate Javascript engines for each version
  • Access to the IE Developer Toolbar
  • Firebug Lite extension on IE7 and 8

Windows XP IE Collection

I did mention that this is the most reliable in my experience, but it is not completely free of its flaws.

Running multiple versions of IE on the same system will produce various runtime issues.  Different configurations will try to override each other which can sometimes produce confusing and eventually misleading results.  One recent example involved me not being able to click on an input box and type in text in IE7 when using my virtual machine.  Once I tested it on another virtual machine with just the one installation of IE, it rendered and processed correctly.

That example outlined another option and route to minimize the risk of the inteferring issues.  There is nothing to stop us running multiple virtual machines which run single versions of each browser.  That is of course down to your resources as you would require a licence for each virtual machine installation along with the memory on your physical machine to run them!

Making up the numbers: Web Based Testing Apps

There are a few web based apps which take static ‘shots’ of your website. A few exmaples are BrowserCam and Adobe’s BrowserLab.

While these sites are useful for static layout testing, they don’t really help with anything else because they don’t allow you to test your sites interactions.  For this reason alone I prefer to stick to the Virtual Machines due to them being a more complete tool.

Conclusion

I hope that my testing workflow has helped shed some light on some of the options that you have available.  It would be great if you could share your thoughts and the tools you use by leaving a comment!

 

Tags: ,

This entry was posted on Friday, May 4th, 2012 at 13:55 and is filed under Blog, Site development, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Switch to desktop version