There are lots of ways to test for multiple browsers. Way back in the
good ol’ days we had our own little browser ghetto—a seedy corner of the
office where dusty, dishevelled computers and their unloved browsers
gathered. Testing involved that most despised of activities: walking across
the office.

Later, we installed virtual machines with different browser versions
and different operating systems—a hefty investment of time, energy, and
often machine-grinding frustration.

Other developers subscribed to solutions involving online tools such
as browsershots.org, which
render your pages in multiple browsers and return those renderings to you as
bitmap images. Unfortunately, this approach is often slow and cumbersome,
and only works on public URLs, which makes it difficult to debug as you’re
building a site, and certainly doesn’t integrate easily with your
development tools and lifecycle. More critically, none of these bitmap-based
approaches allow you to debug beyond simple layout tests. For example, they
offer none of the DOM inspection tools that you’d expect in a layout
debugging system.

A little over a year ago, Microsoft released its first concerted
attempt to make Internet Explorer testing easier: the
SuperPreview—er…preview. In the year since its test-launch, a number of
notable events have taken place.

Firstly, SuperPreview now incorporates non-Microsoft browsers into its
test bed, which means you no longer need to switch out to test Firefox or
Safari. It’s also become a much more mature, finished product. Finally,
SuperPreview has been integrated into Microsoft’s main web development play,
Expression Web.

So, if you’re late to the SuperPreview party, let me give you the
executive summary.

When you’re done, remember to have a go at our Microsoft-sponsored
Article
Quiz.

Conducting a Basic Test

From Expression Web, launching SuperPreview for the current page is
simple: choose Display in SuperPreview from the
File menu. Once SuperPreview loads, you’ll see the
display shown in Figure 1, “SuperPreview awaiting browser selection” as the program
waits for you to select your desired browser.

Figure 1. SuperPreview awaiting browser selection

Select Internet Explorer 8, on th left-hand side, as shown in Figure 2, “Selecting IE8”.

Figure 2. Selecting IE8

And on the right, click on Firefox 3.6.3, as shown in Figure 3, “Selecting Firefox 3.6.3”.

Figure 3. Selecting Firefox 3.6.3

And voilà! You now see a side-by-side
comparison rendering of your page like the one shown in Figure 4, “Comparing the site, at a glance, in different browsers”.

Figure 4. Comparing the site, at a glance, in different browsers

If you want to test the page in other browser versions, simply click
on the add (+) button next to the browser you need,
as shown in Figure 5, “Adding more browser versions to the test”.

Figure 5. Adding more browser versions to the test

Which Browsers Are Supported?

So, which browsers are supported by SuperPreview? Out of the box,
the tool supports IE6, IE7, IE8, and IE8 in Compatibility Mode. To add
Firefox, simply install th browser on your machine.

Interestingly, SuperPreview also supports Safari 4.0.4 on OSX. I’m
sure you’re a little curious as to how Safari on OSX magically renders on
a Windows PC. The answer is that Microsoft has implemented a web service
that renders Safari on OSX in the cloud.

To enable this feature, simply click on the Remote Browser button on
the main tool bar, as illustrated in Figure 6, “The Remote Browser button”.

Figure 6. The Remote Browser button

You’ll be prompted to sign in for a free Remote Browser account. And
from now on, whenever you choose to get a page render using Safari on OSX,
SuperPreview will call the web service and bring back a render. Pretty
cool, eh?