Blog

Tools for Cross Browser Testing

Testing that your website looks good and functions properly across different browsers is a necessary but often tedious part of the development process. Fortunately, the drudgery of this task has diminished a bit over recent years as modern browsers increasingly adhere to web standards, thus reducing rendering and functional differences. It has also been aided by an an increasing public awareness that websites do not necessarily need to appear identical across different browsers.

However, not everyone is fortunate enough to be able to target modern browsers alone. So how does one go about testing across multiple browsers, of varying versions, perhaps even on different platforms? The answer really depends on the browers/platforms/versions that you must target as well as the extent of the testing that you need to perform.

If you simply need to perform a visual check of a page, then you might be able to get away with a simple snapshotting utility such as BrowserShots or the fancier Adobe's BrowserLab. Let's face it though, if you are developing a web application or anything non-trivial really, odds are that you will need a bit more.

Adobe BrowserLab
Adobe BrowserLab

If you have more extensive and interactive needs, but like the hosted/managed approach, perhaps something like Browserling (an open source Node.js based StackVM implementation) or BrowserStack might suit your needs. These apps basically run a VM with a particular platform/browser/version and pipe it through to your browser for an interactive browsing session. Yay – nothing to install! They often have dev tools available in the browsers as well, so you can really dig in to your front end code too. The downside is that these types of services typically have ongoing service fees, though you can try them out for several minutes at a time for free.

Browserling
Browserling

Alternatively, if you prefer more of a DIY approach as I do, you can always set up some VM's and build a browser/platform suite to fit your needs. If you develop on a Mac, then use VM's for other platforms, then you can pretty much cover all bases.

To go this route, we'll need to first download/install a free copy of VirtualBox

If you really only want/need an environment in which to test different versions of Internet Explorer, rejoice as things are about to get really easy. Check out IEVMS. This script automates the process of downloading and setting up separate Windows VM's for ie6, ie7, ie8, and ie9. (Legacy Firefox versions are actually preinstalled as well.) Run a single command from your terminal (shown below), wait (and wait some more) for things to download and install, then fire up your chosen flavor. Honestly, it is pretty much that easy.

Run this… curl -s https://raw.github.com/xdissent/ievms/master/ievms.sh | bash

And get this…

VirtualBox
VirtualBox with multiple IE VM's

If you need to test on other operating systems as well, be sure to check out http://virtualboxes.org as they provide a number of downloadable VMs to help you get up and running in no time. Here's a quick walkthrough of adding another virtual machine to your testing arsenal.

I chose to install an Ubuntu desktop machine. Visit http://virtualboxes.org/images/ to choose one of your liking and download it to your system. Sorry, but you won't find any VM's for Apple OSX as it violates the license agreement. NOTE: This is also a great way to learn and experiment with alternate operating systems in a very non-committal way.

The downloaded file was compressed in .7z format. I had to grab a utility to unarchive it, of which there are a number of free ones out there. I used Unarchiver. Unarchive the downloaded file and copy the .vdi file (hard disk) to a stable location on your machine. I placed mine in /Users/brent/VirtualBox VMs/hard_disks.

Next, follow these steps to set up your new VM in VirtualBox.

  1. Open up VirtualBox and click "New" to create a new machine.
  2. Name it whatever you like. eg) Ubuntu Desktop.
  3. Select the appropriate operating system/version. eg) Linux/Ubuntu
  4. Memory settings – fine as is
  5. Virtual Hard Disk – browse for the .vdi file that you extracted above
  6. Continue. Finish. Start your VM. The credentials are ubuntu : reverse.
Ubuntu
Ubuntu desktop

There you have it – your own cross platform/browser testing environment. Now you have no excuses for delivering code with cross browser/platform inconsistencies. 😉

Also, don't forget about mobile device testing – but that is another story…