SuperPreview: Streamlined Browser Testing for Web Developers
Author: Steven Guttman
We built SuperPreview to help streamline the process of testing web pages in multiple browsers, providing a streamlined interface that lets you easily compare pages in multiple browsers and liberates you from having to physically compare pages across Macs and PCs.
It’s amazing to think that just a few years ago, the variety of browsers available and the capabilities of those browsers was—well, pretty boring. Today, not only are there a lot of different, high-quality browser options. But, the capabilities offered in these browsers—which mirror those in the emerging HTML5 spec—absolutely take what can be done in web pages, to a new level. Where previously, application-like interactions on the web had been exclusively the purview of Flash and Silverlight, now, much of that interactivity is easily created using standards-based web technology.
One thing that people don’t necessarily realize is that building browsers is hard! Not only is there a fair amount of ambiguity in the W3C specs, but there is simply a lot of stuff that needs to be both implemented, and made performant.
As a result, it’s very easy for web developers to create web pages that render differently in different browsers. And, between IE6-9, Safari, Chrome and Firefox, each has a large enough market share that you really can’t (or shouldn’t) ignore testing any. This complicates the process of building web pages that can be experienced consistently in all browsers (and makes it a lot more time consuming).
SuperPreview: Standalone or Integrated, You Choose
SuperPreview can be used as a standalone application with any web authoring tool. However, it is nicely integrated with Expression Web, and provides the ability to easily preview and compare pages while you are building them. SuperPreview, currently, addresses one piece of the cross-browser authoring problem: page layout. Page interactivity must still be tested directly in the browser, although we hope to provide mechanisms for viewing interactivity in a future version of SuperPreview.
To be productive with SuperPreview, it’s helpful to understand some basic concepts.
Available Browsers: Local and Remote
The browsers available to SuperPreview are listed in the Browser picker. These browsers are divided into two general lists—Local browsers and Remote browsers. To provide preview renders for any of these browsers, you simply click on the “+” sign to add a new browser slot, and then select the browser you’d like to fill that slot.
(click image to zoom)
The applications listed under “Local browsers” are various versions of Internet Explorer and Firefox 3.x. Although different versions of IE cannot be installed on the same machine, we have built the IE6, IE7 & IE8 rendering engines directly into SuperPreview. This provides good performance—because the engines are installed on your local machine—and allows you to use the local browsers even when you are offline.
Note that even though you may have other browsers installed on your machine (Chrome, Safari), SuperPreview will not list them as being locally available.
Remote (Online) Browsers
In 2010, we introduced the SuperPreview online service, which provides browser support for Mac Safari, various flavors of IE, Firefox 4+ and Chrome. To use the online service, there’s a simple sign-up procedure, and upon activating the service, the available online browsers will be listed in the Browser chooser. The SuperPreview team is committed to keeping the online browsers current with the available shipping versions of Firefox, IE, Safari and Chrome.
You use these browsers in a fashion identical to local browsers. Simply click the “+” sign at the bottom left of the window to create a new browser “slot,” and then choose the browser you’re interested in from the list of available browsers.
Setting the Baseline Browser
A key concept in understanding how to work efficiently with SuperPreview is the Baseline browser. When we spoke to web developers, they told us that they typically design their pages for a specific browser (often Firefox), and then debug those pages so they work well in other browsers. We refer to this “Design browser” as the Baseline browser, and it is displayed (by default) on the left side of the screen.
SuperPreview is optimized for this workflow. You should set your Baseline browser to be the browser you use for your initial page design, and then select the comparison browser you’re interested in debugging your layout against. To add or delete a browser from this matrix, simply click the “+” or “x” icons.
Layout Options for Visual Comparisions
SuperPreview provides numerous options for interrogating your page to determine layout differences. At the most basic level, SuperPreview gives you several view modes for comparing the Baseline and target browsers.
The view modes allows you to juxtapose the browsers in a variety of ways that help you best identify page differences. These include the two side-by-side modes (vertical and horizontal) and the Overlay mode which onion-skins the two browser images on top of each other.
In conjunction with these view modes, several built-in tools help identify layout differences. Rulers and guides can help to show alignment discrepancies between block elements. The arrow tool allows you to click on an element to highlight it. The element will be highlighted in both browsers. Furthermore, its size and position information will be shown in the Element info panels, where differences are shown in red.
One of the challenges with cross-browser debugging is trying to determine the element that is causing a layout problem. And, while it’s straightforward to find elements that are out-of-position, it’s often difficult to figure out whether it’s the element, its parent or grandparent that is causing the difference.
The browser images shown in SuperPreview include not just picture information but, DOM Tree layout intelligence, as well. You can use the DOM button to show a tree view of the document object model for both browser documents. Using the arrow keys, you can “walk the DOM,” and by inspecting the Element info panes for differences, can find elements that cause misalignment. Once you find these elements, it’s typically easy to figure out the CSS or HTML incompatibilities that are causing them.
SuperPreview has a variety of other tools that help web page authors do cross-browser debugging. In the latest SP1 Service Pack, the team introduced the ability to test pages behind login screens via a new “Page Interaction Mode” feature. This will work on both Internet and Intranet sites that are password protected.