Use VirtualBox snapshots to create an awesome browser testing environment
Feb 15, 2011
TweetPosted in Web Development
I'm going to show you how to create a browser testing environment using VirtualBox, Oracle's free virtualisation software.
Creating a browser testing environment can be fraught with difficulty. There are a number of options available including having multiple test machines, multiple VMs, IEtester, IEcollection and so on, but these solutions are not without their problems. Having to keep multiple test machines around is rather cumbersome, installing multiple VMs takes up large amounts of disk space and the accuracy of IEtester and the like is questionable.
Jonathan Snook wrote an article entitled How I use VMWare Fusion and snapshots back in December 2010 outlining how to set up a browser testing environment using VMWare snapshots. However, I wondered if the same could be achieved using the snapshots feature in Oracle’s free VirtualBox virtualisation software. After a bit of experimentation I confirmed that it was possible. This walk-through applies to Mac OS X but I would imagine the same principals can be applied in the Windows and Linux versions of VirtualBox.
Setting up browsers with VirtualBox snapshots
- First of all you'll need to download Oracle VirtualBox and install it.
-
Create a new VM and install your operating system on it. I installed Windows 7.
-
Once you have the operating system installed take a snapshot by clicking the snapshot icon (the one that looks like a camera) and give it a name. I've called it “Original state (IE8)” because IE8 is installed along with Windows 7.
-
Now boot the VM by clicking the “Start” icon. Start up the web browser (in this case Internet Explorer) and download and install a browser of your choice. I chose Chrome 9.
-
Once the browser has finished installing, open the VirtualBox window again. Select the current state then take a snapshot. Give your snapshot a name (in my case I named the snapshot “Chrome 9”) and click OK. VirtualBox will now take a few seconds to save the snapshot. Once the snapshot has been saved shutdown the VM. That's the first browser set up!
-
To begin installing the next browser, select the root snapshot (in my case “Original state (IE8)”) and click the “Restore snapshot” icon (the one that looks like a terminal with an upwards arrow inset).
-
Simply repeat steps 4 to 6 until you have finished installing all the browsers you need in your browser testing environment.
Solutions for Internet Explorer
Internet Explorer isn't as straight forward. One of the simplest solutions was to test with the virtualised versions of IE on Spoon.net. Unfortunately, Microsoft asked Spoon to take down the IE browsers in November 2010. However Spoon have announced they will return on 2nd March 2011 (2 weeks away at the time of writing) so look out for their return.
Of course you can always use the Microsoft compatibility testing VHDs which should work with VirtualBox, although I was unable to get them working with VirtualBox for Mac OS X.
An alternative solution for IE 7 and IE 8
If you have setup a Windows 7 VM, as I have here, you will have IE8 installed. You can switch IE8 to IE7 rendering by switching the Browser Mode of IE8 to IE7.
- Go to the “Tools” menu and select “Developer Tools”.
- In Developer Tools go to the “Browser Mode” menu and select “Internet Explorer 7”.
See Testing sites with Browser Mode vs. Doc Mode on the IE Blog for more details.
…and here's one I prepared earlier
Once you have all your browsers and snapshots set up you should have something resembling this.
Loading a snapshot
You should now have all your browsers and snapshots set up. To load a snapshot simply select the snapshot you require from the snapshots list and click the “Restore snapshot” icon. It will take a few seconds to restore the snapshot. Once the snapshot has been restored, start the VM by clicking the “Start” icon. The great thing about snapshots is that the VM will restore in only a few seconds, rather than having to reboot the whole operating system.
Useful links
- How I use VMWare Fusion and Snapshots by Jonathan Snook
- IEtester
- IEcollection
- Oracle VirtualBox
- Internet Explorer comapatibility VHD images
- Spoon.net browsers
- Testing sites using browser mode vs docmode
Did you find this article useful? Why not say hello and let me know by leaving a comment below.
And while you are at it, why not follow me on Twitter and
subscribe to my RSS feed.
I'm also available for guest posts, get in touch for more details.
You can leave a response, or trackback from your own site.
2 Responses to “Use VirtualBox snapshots to create an awesome browser testing environment”
Leave a Reply
[...] This post was mentioned on Twitter by Jimmie Österberg, Made in the North. Made in the North said: I've blogged: Use VirtualBox snapshots to create an awesome browser testing environment http://goo.gl/rcdct (RTs appreciated) #webdesign [...]
Hi,
that’s exactly what’s I’am using as my production environment
but instead of Sun product – VirtualBox I’am using VMWare Workstation. Great idea.
For IE I’am using 3 tools:
- IETester (comes also with debugbar. It’s quite buggy but’s works)
http://www.my-debugbar.com/wiki/IETester/HomePage
- Microsoft SuperPreview
http://expression.microsoft.com/en-us/dd565874
- Browsersshots
http://browsershots.org/
hope this will help someone