Now that we have determined what you should QA let’s talk about how you execute that QA on the Desktop.
There are 2 main approaches to Desktop QA:
- Using a hosted service
- Using a local Virtual Machine (VM)
I prefer using a VM because it’s always available and frequently it is easier to test local development, but we’ll cover both.
In either case, it is essential to be using an actual browser and interacting with your web site/app, not just looking at screenshots. Modern sites tend to be very dynamic and we need to be sure that the site both looks and behaves as expected.
Manual Visual and Interactive QA
It is important to note that throughout this series we’re focusing on manual visual and interactive QA to ensure a satisfactory user experience across browsers. There is absolutely a place for automated testing but it’s important to recognize that you need to start with a very manual QA process to verify that your baseline is correct. Once you are confident of your baseline front-end and you don’t expect large scale UI updates you can consider integrating some automated testing.
For now, we’re going to ignore any automated testing and just use a browser like a regular visitor and compare how design elements are laid out and how they interact.
QA with a Hosted Service
When using a hosted service, you’re actually running a web browser hosted on a computer online somewhere and remotely connecting to it. This connection is frequently made via VNC.
Examples of Hosted Services include:
Each service provides a means for manual testing and a way to test sites that are local to your machine or behind a firewall.
QA with a VM
Using a VM that is installed on your computer gives you a self-contained platform for cross-browser testing. My preference is to use VMware Fusion but Parallels or Virtual Box will also work.
Once you have a VM installed, you need to get the “guest OS”, install it, and configure browsers. There are 2 primary approaches to this:
- Buy a license for Windows 7 and build up your testing platform
- Download VM images provided by Microsoft at modern.ie
Building a Testing Platform
This is the approach that I have been using for years and it works well. Since I’m using a real, licensed copy of Windows, there’s no issue with updates or licences.
A baseline install of Windows 7 will have IE8 on it so that’s your starting point. Rather than having multiple VM images for the different versions of IE, I use the Snapshots feature of VMware Fusion as it saves some space over individual images and I have never needed to run different versions of IE side-by-side.
I name the snapshots by IE version and then a counter for whatever snapshot rev I’m on (i.e. “IE8 – 12”, “IE9 – 12”, “IE10 – 6”). I update the revision process every time I re-snapshot the image such as when I update the OS or install/update a different browser like Chrome or Firefox.
Using modern.ie
A good way to get started if you don’t have a Windows 7 license is to download VM images from modern.ie. I’ve downloaded a few and they seem to work well. PPK has a blog post about using modern.ie that is a good reference for the topic.
One of the concerns that PPK mentions in his article is the fact that the images don’t have the latest version of Windows when you install them. Again, when you update be sure you do not upgrade the version of IE.
QA Process and Tips
Now that you’ve got a testing infrastructure for Desktop (be it hosted or with local VMs), let’s talk about the general process and tips.
Develop in a modern browser
I find it most effective to do all of your initial development in a modern browser. I use Chrome because of its great web dev tools. This lets you focus on the most modern practices and you can then go back and adjust your CSS/JS as necessary to support older browsers.
It is important to have an understanding of what is likely to require tweaking to support older browsers, but in general this tremendously easier than it used to be.
Start testing with the oldest IE you will support
Starting with the oldest IE and working up lets you carry any fixes forward easily. I find that similar things need to fixed in IE7 and IE8, but usually IE7 has more. If you need to support both IE7 and IE8 it’s easier to do all of your fixes in IE7 and then you have a baseline to carry forward into IE8.
If you no longer need to support IE7, that’s good and the guideline is less important. However I still find it handy to “fix forward”.
Enable JavaScript Errors
By default, IE will not alert you to JS errors. This is good for most people online, but bad for us as developers. One the things you should do when you setup a new VM is to be sure that you have JS errors enabled.
Don’t forget Chrome and Firefox
It is important to test both Chrome and Firefox on both the Mac and Windows platforms. Although it’s the same rendering engine, I have found subtle display issues (mostly font sizes and a few CSS issues) that alter the display in unexpected ways. In order to avoid these surprises in your live site, it’s important to have Chrome and Firefox available on Windows and test your site there as well.
In Conclusion
Having a good cross-browser QA setup is very important. You want to make it easy because if it’s hard, you’re much less likely to do it. It doesn’t matter if you use a hosted service or local VM(s) – just get a good, working solution in place.
Next week, we’ll talk about mobile testing.