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.
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:
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:
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:
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:
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:
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”:
Next up, I specified the destination where it would create the VMWare-compatible files:
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:
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.
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:
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:
The key thing is that it’s not a screenshot of your site; it’s a fully-functioning browser that you can interact with.
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.
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.
Source : internetwebsitedesign[dot]biz
0 comments:
Post a Comment