MultiBrowser or CrossBrowser Testing and deconstructing Microsoft Expression Web SuperPreview
Cross-browser testing is a hassle. Most of the time you can follow standards and get a decent looking website working cross browser, but there's always variations. All browsers have their quirks and older IEs have more than their fair share.
As I see it, there's basically three main pillars of cross-browser testing:
|Gets you screenshots of your site on a million browsers and platforms||No interaction with the browsers, no way to debug interactions.|
|Depth - Interaction |
|You really get to see how your site looks and works on many browsers.||You have to maintain a bunch of Virtual Machines, or a be aware lot of browser installations.|
|Depth - Look and Feel |
|Lets you see what DOM elements align to what on screen||No interaction with the browsers, no way to debug interactions.|
Here's what's good and bad about each:
Breadth - Covering all Bases with a Screenshot Service
How does the site look across the big few browsers? What about the little several-dozen? You never know when someone running Iceweasel 2.0 or Kazehakase 0.5 is going to show up and complain.
I've used online tools like BrowserShots to basically run by website through several dozen browsers before and send me screenshots of how they all look. These are services that typically run a farm of virtual machines that are setup a hit your site with a few dozens different versions of browsers, then they give you screenshots.
This is really cool stuff, and very powerful, but it's tedious and takes time. It's not exactly "make change, hit reload."
Still, it's a tool in the toolbox.
Depth - Interacting with Many Browsers or Virtual Machines
You can always install a bunch of browsers, and everyone does this anyway. For IE6, IE7 or different versions of Windows, you can run Virtual Machines.
ASIDE: A lot of people don't know that you can download five different virtual machines for Application Compatibility testing and run them in Virtual PC for free.
This download page contains different VPC images, depending on what you want to test. You can get:
- IE6 on Windows XP SP3
- IE7 on Windows XP SP3
- IE8 on Windows XP SP3
- IE7 on Windows Vista
- IE8 on Windows Vista
Here's IE6 running in Windows XP under a Virtual PC on my Windows 7 installation:
Looks like my header doesn't show up in IE6! That's not good. I wonder why?
Depth - Look and Feel with SuperPreview
Expression Web SuperPreview (and the Free SuperPreview IE - 18megs) is a tool that makes it easy compare designs in multiple browsers side-by-side. You can also compare the site in the browser against a Photoshop comp. The thing that I think makes SuperPreview different from the other techniques and a useful tool for my toolbox is its depth inspection and quick iteration of comparisons.
Above, see how my site looks wrong in IE6? I can fire up SuperPreview and put Firefox 3.5 on the left and IE6 (or 7, or 8) on the right:
I can roll over the element in question and I get details synchronized between the two panes.
Fixing an IE6 Problem
I can see there are some differences in size (note the red numbers in the lower left corner of the IE6 site) and also the kind of obvious fact that my blog's header totally doesn't show up on IE6. It's not visible, but I can see in the DOM that it IS there. Looks like the problem is the CSS background-url, not the element itself.
If I'm really detail oriented, I can even overlay the two browsers 'onion skin' style and see compare element positioning in a unique way.
It seems I'm using a PNG as a background-image in my CSS and this technical is too amazingly 2002 for IE6. While I certainly don't want to encourage IE6 usage, if there's something simple I can do to at least make sure people see my header, I'll do it.
<!--[if IE 6]>
/* EXAMPLE */
Now, I'll refresh the SuperPreview in one click. I'll also turn on "Lights Out Highlighting Mode" to better see how this one element looks.
Looks like I nailed it. From a positioning perspective, I'm off by a few pixels, but I've just made my site nicer for my IE6 (*cough* upgrade *cough*) visitors.
The SuperPreview team has said that they recognize the important of supporting other browsers like Chrome and Safari as well as other platforms like OS X. They are planning a cloud service to do Safari on OS X rendering, and I assume it'll look like just another browser to SuperPreview and give you all the same details and information! Take a look at the screenshot on their site. There's a section under the local browsers that says "Remote Browsers." The plural "Browsers" is a good hint to me that they've got some cool plans. Maybe they'll say something in the comments.
(Disclaimer: I don't know the SuperPreview Team and I don't work for them.)
WARNING OBSCURE STUFF ONLY I CARE ABOUT HERE: How does it work?
Well, note the disclaimer above. I'm just a dude with notepad.exe. That said, let's figure this out. If I go to the Help Menu, then Send Feedback, then click Create Attachment, I see this dialog, showing me the location of a zip file:
Anytime there's a ZIP file going somewhere, I'm there to unzip it and find out what's up. What's this? A "View Attachment" button? I love these guys already.
Looking inside the zip shows me a settings.xml that looks like just some serialized settings data, but it also shows a bunch of stuff like this, which makes me wonder if I could get my own plugins in there. (Probably not, but I can dream, right? And also mention that an SDK would be nice...more on that in a few sentences. ;) )
<PropertyBag Key="browserie6" Type="Microsoft.Expression.Web.PageAnalysis.Preview.Actions.PreviewPageActionDescriptor,Microsoft.Expression.Web.PageAnalysis.Preview, Version=18.104.22.168, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<KeyValuePair Key="AssemblyName" Value="Microsoft.Expression.Web.PageAnalysis.Preview.InternetExplorer, Version=22.214.171.124, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<KeyValuePair Key="TypeName" Value="Microsoft.Expression.Web.PageAnalysis.Preview.InternetExplorer.InternetExplorerUriCommand" />
<KeyValuePair Key="Endpoint" Value="C:\Program Files (x86)\Microsoft Expression\Web 3\pipsone.exe" />
<KeyValuePair Key="ActivationContext" Value="OutOfProcess" Type="Microsoft.Expression.Web.PageAnalysis.Core.Actions.InvocationModel" />
<KeyValuePair Key="Id" Value="browserie6" />
<KeyValuePair Key="FileName" Value="iexplore.exe" />
<KeyValuePair Key="BrowserName" Value="Internet Explorer" />
<KeyValuePair Key="BrowserVersion" Value="6.0" Type="System.Version" />
<KeyValuePair Key="Enabled" Value="True" Type="System.Boolean" />
<KeyValuePair Key="InternetExplorerUriCommand.HostedModule" Value="hostedie6.dll" />
<KeyValuePair Key="InternetExplorerUriCommand.InternetExplorerVersion" Value="IE6" />
OK, so they've got a nice plugin model. Note the "ActivationContext" Out of Process...they're controlling browsers, sometimes out of process.
Looks like there's a Microsoft.Expression.Web.PageAnalysis.Sdk file, and some interfaces in there. Cool that there's an SDK that they are using themselves for their analyses.
I notice also that there's a "HostedIE6.dll" which is unmanaged code. Looks like they've got a version of IE6 that's along for the ride. Awesome, that explains that.
There's folders with data for each browser involved in the analysis. Inside each is a file that shows a screenshot of the COMPLETE page as a very tall PNG. See the IE6 one at right.
This is what's giving me that rich exploration UI where I can hover over DOM elements and see things synchronized between four windows, two previews and two markup.
Of course, this isn't supposed to be Human Readable, as it's a serialization format, but here's the general idea:
<DetachedDomNode TagName="div" id="header" X="26" Y="22" Width="971" Height="80" HasLayout="true" Position="relative" style="behavior: none; zoom: 1; position: relative">
<DetachedDomNode TagName="div" id="syndicateheader" X="860" Y="46" Width="123" Height="32" HasLayout="true">
<DetachedDomNode TagName="a" class="rssLinkStyle" X="860" Y="46" Width="32" Height="32" HasLayout="false" href="http://feeds.feedburner.com/ScottHanselman">
<DetachedDomNode TagName="img" class="rssLinkImageStyle" X="860" Y="46" Width="32" Height="32" HasLayout="true" alt="RSS 2.0 via Feed" href="http://www.hanselman.com/blog/images/feed-button-32x32.png" src="http://www.hanselman.com/blog/images/feed-button-32x32.png" />
<DetachedDomNode TagName="a" X="895" Y="49" Width="88" Height="26" HasLayout="false" href="http://feeds.feedburner.com/ScottHanselman">
<DetachedDomNode TagName="img" X="895" Y="49" Width="88" Height="26" HasLayout="true" href="http://feeds.feedburner.com/~fc/ScottHanselman?bg=FF6600&fg=FFFFFF&anim=1" src="http://feeds.feedburner.com/~fc/ScottHanselman?bg=FF6600&fg=FFFFFF&anim=1" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; border-right-width: 0px" />
<DetachedDomNode TagName="h1" X="40" Y="36" Width="943" Height="32" HasLayout="false">
<DetachedDomNode TagName="a" X="40" Y="36" Width="533" Height="32" HasLayout="false" href="http://www.hanselman.com/blog/" />
<DetachedDomNode TagName="div" class="description" X="40" Y="68" Width="943" Height="20" HasLayout="false" />
I love this stuff. Very clever. I look forward to see the next steps from the SuperPreview team.
Where do I get it?
There are two versions of SuperPreview right now. First there's the full version you get with Expression Web (which includes Web, SuperPreview, Design 4 and Encoder 3), then there's the Free Internet Explorer only version, it's 18 megs and you can download it here.
Expression Web SuperPreview can render in IE6, IE7 and IE8 and it won't mess up your computer.
- Virtual PC Tips and Hardware Assisted Virtualization
- Windows 7 - Seamless Apps in Windows Virtual PC (Virtual XP) and Application Compatibility
- Free: Expression Web SuperPreview "IE Version"