Breadcrumbs

Web Browser Testing 101

Browser testing can become a huge hassle and pain, especially with the wide variety of web browsers available nowadays. You have Opera (external link), Internet Explorer, Firefox, Safari, Seamonkey, Konquerer, K-Melon, Netscape... and the list goes on. How are you going to test in all of these browsers? Wait, you don't even have IE6 on your computer anymore! You don't have a Mac, how do you test in Mac browsers? Don't worry though! There is a sensible way to approach browser testing. First, you must ask yourself in which browsers you are going to test. Second, you must decide how to go about testing in each of these browsers.

In this article, we are going to focus on desktop web browsers only. If you are interested in testing your website in mobile web browsers, I highly recommend this SitePoint article about mobile web development (external link).

Which browsers to test?

The general consensus amongst web developers is to test in Internet Explorer, Opera, Firefox, and Safari. These four browsers cover all of the rendering engines used amongst the general population. To much avail, Internet Explorer remains the most used web browser, so it is impossible to avoid testing in it. Many web browsers are based off of the Gecko and WebKit rendering engines, so testing in Firefox and in Safari generally covers many of these smaller browsers. Opera has a small user base, but considering it supports standards well and is used on a lot of other devices (mobiles, the Wii, etc.) it is worth spending the extra time to test in Opera.

You can also test in multiple versions of each browser, because they often behave differently. However, being practical, unless you're using slightly more "advanced" styling or code, it is usually safe to test in only the latest versions of Opera, Firefox, and Safari. Surveys show that these browser users tend to upgrade their browsers more often and the standards support in these browsers was more acceptable from the get-go. However, there is no way around having to test in both IE6 and IE7, simply because they behave so differently and a large majority of people are still using IE6. Simply accept the depressing truth.

The bare minimum of your testing, in my opinion, should be IE6, IE7, Opera, Firefox, and Safari. Do not skip out on testing in Safari, simply because it has a few JavaScript quirks that could very well affect your website. Depending on your browser statistics, you may also have to test in other browsers and versions. For example, a number of my clients' websites receive a substantial amount of visitors from IE5.5, so I have to ensure support from a rather decrepit browser still. If you have the resources and the time, I would recommend to test in as many browsers and versions as you can, simply to ensure basic support in each of them. At Lowter, everything is tested in multiple versions of both Opera and Firefox because a large portion of our visitors use one of these browsers. Take a look at your browser statistics for your website and decide for yourself in which browsers to test, but the browsers I mentioned earlier should remain the bare minimum nonetheless.

How do I test in all of these browsers?

Now, how to test in each of these browsers proves to be the more difficult task. You can plan to test in every browser under the sun, but you may find that to be extremely difficult. First, browsers run on various different operating systems: Windows, Mac OSX, Linux, etc. Second, you probably don't have each of these operating systems installed on your computer. So, what do you do?

First, we need to look at which operating systems support which browsers. Windows can run IE, Firefox, Opera, and Safari, which basically hits all of the major browsers right there. Thank Apple for releasing Safari for Windows (external link), as it eliminates the necessity to purchase a Mac in order to test in Safari. Overall, Safari for Windows is lacking for consumer use, in my opinion, but it works fine for browser testing. Mac OSX can run Safari, Firefox, Opera, and Mac IE5.5. You should note that Mac IE 5.5 uses the Tasman rendering engine (external link), which is not used in any other browsers, so it can only be tested on a Mac. Whether or not you want to test in Mac IE5.5 is up to you, as its usage is luckily declining, but you need a Mac to test in it nonetheless. Linux can run Firefox, Opera, and Konquerer (which uses the WebKit rendering engine). Also, note that not every browser performs identically across each operating system, particularly Opera and Firefox. Across different operating systems, you can also run into issues with fonts and other seemingly basic matters. Therefore, your goal should be to run at least two operating systems: Windows and Linux or OSX and Windows.

You can run two (or multiple) operating systems using dual booting or virtualisation. Dual booting is when you have two separate operating systems installed side-by-side on the same computer, such as Windows and Ubuntu. On the other hand, virtualisation is basically running an operating system within another operating system. A "virtual machine" is created to run the additional operating system, such as running a virtual installation of Ubuntu on Windows.

If you have a PC, you can easily dual-boot both Linux and Windows on your computer, allowing you to test extra browsers on Linux such as Konqueror and Epiphany, in addition to the Linux versions of Firefox and Opera. If you have a Mac, you can even more easily dual-boot with Windows using Boot Camp. You can also use virtualisation: Parallels (external link) for Mac and VMware (external link) both for Windows and for Linux. Personally, if you are only going to use the other operating system for browser testing, I recommend using virtualisation because it's easier, it doesn't require half as much setup, and it is easy to remove later.

Also, if you have a spare computer lying around the house (as many geeks do), you can use that computer for testing. If your main computer is a nice, speedy PC with Windows Vista and you don't want to meddle with it, but you have an old PC lying around, install Linux on that old computer instead of dual-booting or virtualisation. For testing on Macs, you can often find old Macs on eBay pretty cheap that will work fine for browser testing.

One issue that you probably will encounter is not being able to run both IE6 and IE7 on one Windows installation. If you virtualise Windows, you can easily have two installations to test each version of Internet Explorer, because they cannot really run standalone. However, to run multiple versions of IE on one Windows installation, the official method is to use the "Internet Explorer Application Compatibility VPC Image (external link)" provided by Microsoft, which expires and requires you to update from time to time. You can also experiment with the Multiple IE installer (external link), but I have not heard of anyone having complete success with it. Virtualisation proves to be easier as you can simply setup multiple Windows installations to test in both versions of IE.

Luckily, if you want to test in multiple versions of Firefox and Opera, you can simply install multiple installations of each, one for each version in which you wish to test. For example, you can have Firefox 2 and Firefox 3 running on your computer at the same time with no problems.

Screenshot of BrowserShots.org

To fill in any gaps of browsers that you cannot run on your own computer(s), you can use services like BrowserShots or BrowserCam. BrowserCam (external link) is a paid service that allows you to test in multiple web browsers and operating systems. BrowserShots (external link) is a similar service, except it is free (as in beer). If you have the money, I would recommend shelling out the money for BrowserCam simply because it works much better and they have additional plans where you can test on mobile devices and even test your website on a remote access computer. Otherwise, BrowserShots works fine and lets you test in a plethora of web browsers.

The browser testing websites present some limitations, particularly in being able to test additional functionality not present in a screenshot, such as DHTML effects and such. I recommend to test in as many browsers as you can right on your computer and to use BrowserShots to test the basic look for any web browsers you cannot get your hands on.

Summary

The general rule of thumb is to test in IE6, IE7, Opera, Firefox, and Safari. Test in as many browsers as you can using your current computer and fill in the gaps using BrowserShots or BrowserCam. You can use virtualisation or dual booting to test directly in web browsers not available on your usual operating system. All in all, browser testing can be tricky and bothersome, but it pays off in providing support for all of your visitors.