Advertisement
Tools & Tips

Strategies for Testing IE on Different Platforms

by

You might believe that web developers who use Windows as their primary OS have it easy, when testing Internet Explorer; simply click on the blue "E" and go to town. That might be true if they only had to worry about the version of IE on their PC, but we all know that's not the case. Depending on your project's needs, you may need to ensure compatibility from IE6 through IE10, which certainly poses some challenges. How do we deal with this?

Now if you're on Windows, you definitely have a leg up because at the very least, you can natively test a specific version of IE, but it's a whole different ballgame if you're on a Mac or Linux box.

What I want to do is explore the various ways of testing Internet Explorer across popular platforms, and offer suggestions on how to lower the friction of testing for multiple versions of the browser.


Versions, Versions, Versions...

We all know testing is hard.

Internet Explorer has multiple versions in use, each with their own level of quirks and feature support. While it'd be great if we only had to target IE10, in reality, a lot of users and companies simply haven't upgraded their browsers or operating systems. This means that, depending on what you're building, your test matrix may have to include up to five different versions of IE. I can hear the groans now.

Thankfully, IE9 and IE10 have strong support for standards, and IE6 is starting to go the way of the Dodo bird (albeit slowly). In fact, many top sites have completely dropped support for IE6 and IE7 - a great step forward, especially compared to where we were just two years ago. And with Microsoft publicly stating that IE10 will come to Windows 7, my hope is that IE10+ will help minimize the number of supported versions in the near future.

With that said, these versions still pose a testing dilemma because you can't run multiple versions of Internet Explorer on the same PC. This means that we need to look at alternative solutions such as:

  • Virtual machines
  • Virtualized browser sessions

I'm going to touch on each one of these and discuss possible solutions.


My First Goto Tool for Testing

When I need to test a site in Internet Explorer, my very first tool is the F12 Developer Tools in IE10. Built into the toolset is the capability to switch both the browser and document modes to emulate IE7 through IE10.

alt text
alt text

It basically gives me comprehensive test coverage for the most commonly used versions of Internet Explorer within a single browser. It becomes a simple matter of picking my browser mode so I can work with specific feature support and then choosing the rendering mode for my page.

The reason I say that this is my first line of testing is because it helps me find many common issues. It's a great tool for identifying and interactively testing problems such as missing vendor prefixes or if a page is rendering in quirks instead of standards. And I will say that having used this extensively, it's helped me resolve a number of site issues without the need for loading a virtual machine or using another PC.

To be clear, though, it is definitely not a replacement to testing in an actual version of Internet Explorer.

The IE engineering team does its best to backport functionality, but doing so is a fairly massive effort and not always foolproof. To have the most reliable testing experience, you'll need to either have multiple PCs (physical or virtual) running different versions of Windows/IE. Unless you've got money burning a hole in your pocket, I'm thinking the VM route is probably the best choice.


Virtual Machines

I really like using virtual machines because it gives me the opportunity to test not only browsers, but different OSes from within my own PC. As much as I'd like to have a ton of devices to test and play with, I think my wife might not be happy once the electric bill comes in. I've had VMs at some point for every major version of Windows and Ubuntu. It'd be great to be able to run OSX, but my understanding is that there are technical and licensing issues with doing that.

There are two ways of getting Windows into a VM for testing. The first is to buy a license for each version of Windows you'll test. I actually have licensed copies of Windows XP, Windows 7 and Windows 8 which I bought for my own personal testing. The long-term cost was small, and I considered it an investment as a professional web developer. This allows me to install the OS and activate it without having to worry about Microsoft's infamous time-bomb. I can get all of the updates, and it basically gives me a real working version of Windows.

I know not everyone thinks the same way, and not all of you will want to make the investment.

For those of you on the more frugal side, Microsoft offers the Internet Explorer Application Compatibility VPC Images that provides a preinstalled version of Windows with a specific browser version. These images allow you to work with Internet Explorer versions 6 through 9 nearly indefinitely but with a big limitation. The following sums it up:

My very first tool is the F12 Developer Tools in IE10.

You can activate up to two "rearms" (type slmgr -rearm at the command prompt) which extends the trial for another 30 days each time, or simply shutdown the VPC image and discard the changes you've made from undo disks to reset the image back to its initial state. By using either of these methods, you can technically have a base image that never expires, although you will never be able to permanently save any changes for longer than 90 days.

So you should be able to use any of the VPC images indefinitely, but after 90 days, any configuration settings you've saved in the image will be erased. I look at this as a small price to pay for having a free image to use for testing. I know that when I've used them, I explicitly did so to test IE so I had minimal, if any, configuration changes lost. The only image that behaves differently is the WinXP/IE6 image; it shutdowns completely on a specific date. As of this writing, that would be February 14, 2013 so be sure not to give that as a gift to your special person for Valentine's Day.

If you're using Windows 7, you'll need to grab a copy of Virtual PC, which lets you create VMs and run existing VHDs. Windows 8 Pro includes the Hyper-V virtual machine manager. It's not turned on by default, so you'll need to go into "Control Panel->Programs->Turn Windows features on or off" to enable it:

alt text

Once installed, you should be able to run the VPC images you downloaded from the Microsoft site. I downloaded the WinXP/IE6 image. It comes in the form of a self-extracting .exe file which dumps out the .vhd file for you to use. The .vhd file is your virtual hard drive.

You log into Virtual PC and choose "Create virtual machine", which pops up a dialog to kick things off:

alt text

Next, specify how much memory you want to allocate for the VM and then, most importantly, select that you want to use an existing virtual hard disk so you can use the VPC you downloaded:

alt text

The VM will now be created and show up in Virtual PC. Double-clicking on it launchs the VM and gives you access to Windows XP. You'll be prompted to activate it, but just cancel that request:

alt text

OSX and Linux

If you're not on Windows, you can still use the VPC images, but the steps are going to be a little more involved. On OSX, I use VMWare Fusion. I think it's the best VM software for that platform, and it has great user support. An example is the fact that they have a tool called the VMWare vCenter Converter, which allows you to change VM format types to a compatible version with VMWare's products. Because the IE VPC images aren't compatible, I needed to convert them, and vCenter Converter made it incredibly painless (although it's Windows-only). The steps were easy. I installed the app:

alt text

Once installed, I ran it and started the conversion process. The first thing I needed to do was specify the source file to convert. The converter found "Windows XP.vmc":

alt text

Next up, I specified the destination where it would create the VMWare-compatible files:

alt text

The process to convert the Microsoft VPC image took all of three minutes. I copied those files onto a thumb drive and brought them over to my Mac. I launched VMWare Fusion and created a new VM based on an existing image, pointing it to the image I just created, and chose to make a local copy of the image on my hard drive:

alt text

I was then prompted to upgrade to the newest format. DON'T DO IT. If you do, your VM won't work. I don't know why, but I'm telling you this from experience.

VMWare Fusion will run through the import process and then allow you to configure your VM's settings. You'll need to tweak settings like memory and video options based on your machine's capabilities. I then ran the VM and was presented with the Windows XP login.

alt text

Upon logging in, I was greeted by the standard barrage of new hardware found messages. Just ignore those, along with the activation prompt, and you should be able to use the OS:

alt text

What About Parallels and VirtualBox?

Both Parallels and VirtualBox are excellent VM solutions. VirtualBox, specifically, is open source software and available under a GPL license. I've not used Parallels, so I don't have steps for you to follow that I'd feel good recommending. If you happen happen to use VirtualBox, though, Jon Thorton has done a great job of providing a step-by-step explanation of how to use the VPC images with VirtualBox. It's a little involved, but it works. I've also heard many developers rave about the ievms scripts; they allow you to download the VPC images and convert them to a format that VirtualBox accepts. The process is fairly automated and seems to be a better alternative.


BrowserStack.com

The newest method I've been recommending, with a lot of excitement I might add, is a browser-based service, called BrowserStack. It allows you to test your site using virtual browser sessions--all within your favorite browser. It uses Flash to provide the virtualized session and you can select from any number of operating system and browser versions. For example, if I wanted to test out various browsers in Windows XP, it's as easy as choosing that OS and selecting the target browser:

alt text

The key thing is that it's not a screenshot of your site; it's a fully-functioning browser that you can interact with.

alt text

If you notice in the image, I've clicked on the dropdown menu for the "Security" tab and in the following image, I'm using the Internet Explorer F12 Developer Tools to debug.

alt text

This is a very powerful system because:

  • The service is inexpensive ($20/month)
  • Let's you test all major versions of every browser on every major OS
  • Let's you specify different screen sizes
  • Provides tunneling support for local testing

The last point is important because your development code typically isn't going to go on a publicly available web server (unless of course you're a coding cowboy and dev === production). The local tunneling uses Java to establish the connection, and the setup is really easy. The team at BrowserStack have done a good job of explaining how to get things setup.

While this article is about testing IE, what I love about BrowserStack is the breadth of browser and OS support they offer, right down to the developer tools. Even though the browsers are virtualized, that doesn't mean they don't include their respective developer tools.


Testing is Hard

The newest method I've been recommending is a browser-based service, called BrowserStack.

We all know testing is hard, and having to worry about multiple versions of IE makes it harder. It'd be great if we get to the point where we can focus solely on the most recent version of IE, but for now, customer and project demands tend to dictate which IE versions we need to support. Thankfully, we have solutions that can allow us to test at minimal cost and in some cases, like BrowserStack, with no hardware impact at all.

Testing IE is important. It's one of the most widely used browsers in the world, and the newest versions have excellent support for stable standards. But OldIE is still out there, and making sure users have a great experience is vital.

I hope that the options I presented help you out. For me, I'm going to use BrowserStack for those instances where I need to go back in time.

Related Posts
  • Code
    Web Development
    Easily Deploy Redis Backed Web Apps With DockerDocker wide retina preview
    Learn how to setup and deploy a Redis powered Python web app using Docker.Read More…
  • Code
    Tools & Tips
    Browser Testing in the Cloud ReduxBrowser testing cloud redux retina preview
    I've written quite a bit about browser testing solutions trying to help identify techniques and tools that make cross-browser development easier. My last article on the subject covered how to use BrowserStack to test any number of browsers all from one central tool; your own browser. I was on a Windows PC back then so testing multiple browsers was a bit easier and testing tools were mainly complementary to my work. Now that I'm on OS X, the need for tools to round out my testing strategies is even more important, specifically because of the lack of Internet Explorer on the OS. I'm a bit of a stickler for what I install on my computers and I prefer online tools when available. I'm also always on the hunt for new tools that make cross-browser testing easier and decided to give CrossBrowserTesting.com a run. I'll go over some of the key features of the service and how to leverage it to improve your testing capabilities.Read More…
  • Code
    Tools & Tips
    Using BrowserStack for Cross-Browser TestingBrowserstack retina preview
    Browser testing is the bane of our existence. Well, that's a bit of an exaggeration, but not by much. Multiple browser versions and browser fragmentation can make it difficult to get good test coverage for your sites especially when you factor in the different operating systems developers use to build with. Over the years, we've relied on a variety of tools to help us with this challenge including virtual machines, tools that simulate browsers and even having multiple devices on hand to work with. It'd be great if there were a way to have one viewport that allowed us to easily test across any major browser and their individual versions without jumping through hoops. BrowserStack.com aims to offer this via it's browser-based virtualization service and in this article we'll cover the service and how it helps tackle the cross-browser testing problem.Read More…
  • Code
    Articles
    The New IE11 F12 ToolsIe11 f12 dev tools retina preview
    Disclaimer: I work for Microsoft Corporation. Back in January, I walked you through the features of Internet Explorer 10's F12 Developer Tools. Microsoft's recent release of Windows 8.1 Preview brings with it, not only an update to Internet Explorer (now at v11) but also a welcome refresh to the F12 Developer Tools. The latter is especially important since developers are dependent on them to troubleshoot site-related issues from within IE. Till now the tools have solved most debugging use-cases but it's clear that as sites become more complex, developers need richer tools to work with. This update aims to bring a fresh look and expanded capabilities for developers with a strong focus on the following: Read More…
  • Computer Skills
    Productivity
    An Overview of Virtual Machines in OS XVirtualizing osx retinapreview
    Virtual Machines are a great way to experiment with a new operating system, work safely on a new development project, test new software, or allow a child to play and explore without fear of harming your computer. In this tutorial I will explain what a virtual machine is, reasons you may want to use a virtual machine, how to select the best virtualization software for your needs, and what types of things can be run in a virtual machine.Read More…
  • Code
    Articles
    Windows Apps for Web DevelopersWindows logo
    When the editor of Nettuts+ requested an article to show Windows developers love by listing popular web development apps, I was all over it. OSX devs get a lot of attention, so it's good to mix things up a bit. What I want to do is list the development tools that I frequently use as a web developer on Windows. It may not include your favorite, and if it doesn't, please let me know within the comments section. I'm always anxious to find new tools to enhance my workflow!Read More…