10/03/2016

Test your website in IE using Linux with Vagrant/Virtualbox

I've had an on-off relationship with Vagrant, having first used it for a short while at a previous job. However, in my current employment, we primarily use Linux based laptops, while a select number use Macs. Either way, testing our website developments in Internet Explorer is an added, but necessary headache.

However, Vagrant is actually quite brilliant for not only hosting development environments with ease, but for also hosting flavours of Windows, all with their different combinations of Internet Explorer. I remember back in 2010, using the likes of IETester to install multiple versions of IE within Windows. It was messy and unreliable.

Back to 2016, Vagrant works with Virtualbox to bring you multiple virtual machines that allow you to test your work easily.

I'll skip over installation of Vagrant and Virtualbox. Just visit their respective websites, and install as required.

If you're intention is only to test one version of IE, you could simply visit modern.ie and download a suitable box to your machine. Or, you could use this gist to grab all of the vms. This link contains a Vagrantfile to save into a given folder on your machine. I've set up a folder called windowsvms, and saved the Vagrantfile there.

I then access my terminal, and cd windowsvms, then type the following:

IE=Win7IE8 vagrant up

Assuming you have a decent internet connection, the box will get downloaded and unpacked to this location. Once everything has completed, Virtualbox will appear to boot your new virtual machine.

By default, you can browse the internet in your guest VM. However, you need to find out how to access your website running on the host. Assuming you have a site running on localhost, on Linux you can use the ifconfig command to get details of your host ip address.

Type ifconfig, and look for the inet addr under usually wlan0 (for wireless connection) – it will look like 10.0.2.110. You can test this by going to your web browser, and replacing 'localhost' part of the address with the ip address. You should still get your website.

Now, check your network connection in the Virtualbox menu. Look under Devices > Network > Network Settings. You should have only one adapter active. If not, then ensure it is enabled and set to NAT, with Cable Connected. Close the window, go to the Start menu, and type cmd, to bring up the command prompt.

We now need to find out the gateway ip address so we can view the website in IE. Type ipconfig, and look up the details for something like Ethernet adapter Local Area Connection 1. Find the IP address under the default gateway, it should resemble 10.0.2.2 or similar. This is the address we need.

Now open IE in your guest VM, and input the following URL:

http://10.0.2.2/website

replace website with whatever your address is, and you should now see your website within IE.

Once you get the hang of it, Vagrant and Virtualbox are an ideal set of tools in your armoury of browser testing.
Post a Comment