All Posts

Testing IE, in a VirtualBox, in a Vagrant, in a Mac, in a Toward

By Matt,

February 2016

—

Web Dev
Making websites is a funny old game. The ubiquity of having a browser on your phone or your fridge is the web's killer feature. It is also a developer's nightmare. With several major browsers to deal with, and some not even available on my computer, why do I even bother?

Internet Explorer (IE) has, for one reason or another been the bane of developers lives for a long while, and hasn't been available on OSX since 2003. At Toward, like a lot of studios we only use Macs. And (like a lot of studios), we have a Windows PC locked in a cupboard which we can log into to test sites on Microsoft browsers.

Thankfully, Microsoft has gotten its sh!t together in recent years. IE11 (and now Edge) are pretty good, and definitely not bottom of the class any longer.

As well as making a decent stab at browsing, they've also gone all developer friendly. Over the last couple of years, they've released a bunch of (free) Windows virtual machines on all platforms. Everything from IE6 on XP, all the way up to Edge on Windows 10.

As well as making these for a few virtual machine (VM) providers, they also provide Vagrant environments. Vagrant is a Command Line tool to enable sharing, installing and running of development environments. It makes the process of setting up a VM slick and easy.

If you want to follow along at home, go and start downloading the VMs from Microsoft (they take ages). I recommend setting fire to your computer and yourself before you develop anything for IE6 or 7, so I got IE9 on Windows 7, IE10 on Windows 8, IE11 on Windows 8.1 and Edge on Windows 10. I feel like that gives me a good spectrum of operating systems and browsers.

In the meantime, install VirtualBox. This is the software for running virtual machines—we won't have to touch this too much once its installed. Go to the downloads page and grab the version for OS X Hosts (the UI is pretty awful, but you need to click the AMD64 link).

Next, we need to install Vagrant. Go to the downloads page and get installer for your system. I'm gonna get a quick game of darts in while you set that up...

Done? Good-oh. Let's get setup.

First, set up some directories for your VMs. Then extract the VM files into them. Here's one I prepared earlier:

vm/
├── win7/
│   └── IE9/
│       └── IE9 - Win7.box
├── win8/
│   └── IE10/
│       └── IE10 - Win8.box
├── win8.1/
│   └── IE11/
│       └── IE11 - Win81.box
└── win10/
│   └── EDGE
│       └── MsEdge - Win10.box

I mentioned earlier that vagrant is a command line tool. We're gonna get in the Terminal now—we only need to use 3 commands though: vagrant init, vagrant up and vagrant halt. Don't fear the Terminal.

Open the Terminal app and direct yourself to one of those directories (hint: You can drag the folder (eg: IE9) from Finder into Terminal to do this). If you've used my directory structure above you can write the following and press enter:

vagrant init IE9/ -/ Win7.box

(the / characters need to go in front of any spaces or Terminal will think you're crazy)

This will create a Vagrantfile in the folder. A Vagrantfile has all the settings for your Vagrant environment. Open that file in your text editor of choice. Find the lines (The hashes are comments by the way):

#   config.vm.provider "virtualbox" do |vb|
#   # Display the VirtualBox GUI when booting the machine
#   # vb.gui = true
#
#   # Customize the amount of memory on the VM:
#   # vb.memory = "1024"
#   end

Replace it with this, and save the Vagrantfile:

config.vm.provider "virtualbox" do |vb|
# Display the VirtualBox GUI when booting the machine
vb.gui = true
#
#  Customize the amount of memory on the VM:
#  vb.memory = "1024"
vb.customize ["modifyvm", :id, "--vram", "48"]
end

For the curious, here's what we did:

  1. We uncomment the first line and last line—this starts the config for our VM provider, VirtualBox and ends the config block.
  2. We uncomment the third line—which ensures we can actually see Windows when it boots up. Vagrant runs the environment without a user interface by default, so we need to turn it on.
  3. Finally we add a line which will configure the amount of memory allocated for video. The minimum to allow the screen to be used at fullscreen (and basically anything over 1000px wide) is 48MB.

Back in Terminal, type the following command and enter:

vagrant up

That will kick off the Vagrant environment. It will go and download everything it needs so it might take a mo. Once its up you should see VirtualBox open and a windows will boot up in a window.

Note: There will be an error in the Terminal—this is to do with SSH not being available in the Windows VM. Don't worry about it as you won't need to SSH into the box for IE testing.

When the machine has started you should see Windows boot and log you in. You can now open IE or Edge and start browsing. You will probably want to access your localhost (as in your Mac host computer's localhost), you'll need to browse to https://10.0.2.2 (and possibly include your port number).

To stop the VM, pop back into Terminal and enter vagrant halt. That will gracefully shut everything down ready for the next time you need it. You can also control the VM via the VirtualBox UI—but that's gross.

Have fun browsing on the Edge... I hope you'll explore Vagrant and VMs a little more... It's virtually painless... Ok I'll stop. Bye.

More

All posts