Readers’ Poll: How Do You Cross-Browser Test?
It’s not on many people’s things I like most about web design list, but cross-browser testing just comes with the territory. Many argue that there is no best method – but how do you go about testing your work across multiple browsers?
Breaking it Down
In order to make this poll digestible, I’ve categorized cross-browser testing methods into 5 main types. Here’s what I mean by them:
1. Multiple Installations
Having various browsers installed on your systems gives you straight-forward access to check how they handle your work.
This can cause complications where some browsers are concerned (Internet Explorer for example) when they don’t allow multiple versions running on the same O.S. There are workarounds however, most commonly in the form of running virtual desktops with services such as VMWare and VirtualBox.
2. Web-Based Screenshot Service
Services which grab a screenshot of your chosen website in a wide array of browsers and operating systems, all from the comfort of your own browser. Think of Adobe BrowserLab, Browsershots and Net Mechanic Browser Photo .
3. Web-Based Browser Simulator
Viewing screenshots is fine for aesthetics, but what if you need to test the javascript, pick apart the DOM, or even log in to a secure session? This is when you’ll likely rely on a simulator (or emulator, whatever) allowing you to take control of a remote machine and play with its browsers through your own system.
Scout, Spoon Browser Sandbox, Crossbrowsertesting and Browsera are common examples of what I mean by this.
4. Desktop Application
Desktop applications will often fulfill both screenshot and simulator needs, but require installation on your system.
Think of IETester, multibrowser viewer, Microsoft Expression Web Super Preview and Browserseal.
5. Browser Developer Tools
Some browsers offer plugins and tools which allow them to mimic the behavior of other browsers. Safari has its Debug > User Agent, Internet Explorer 8 will run in Compatibility Mode and there are plenty of extensions such as the User Agent Switcher for Firefox.
Other
Have another way of doing things? Let’s hear it!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
There are some nice ressources for crossbrowser testing here. I think the Scout thingy is great! Didn’t know it before :-)
I just have a bunch of browsers installed on OS X Lion. Sadly (yeah right) i can’t test in IE 6/7/8 because Parallels doesn’t play nice yet with Lion.
At work I use multiple installations. I have IE 5-7 on one computer and had IE 8 on the other. I recently updated that to IE9 but I need to set up some VMWare on it. I know in IE9 you can set the compatibility mode to IE8 or IE7, yet I’ve heard they don’t portray a 100% experience compared to actually using IE 8, though it’s worked so far for me ok.
With IE10 set to launch soon, I’ll probably have to get some VM going so I can run IE8, IE9, and IE10 natively all on one comp. I also have FF 3.5, FF3.6, FF4, and FF5 and different computers. For Chrome and Safari, I just test the latest versions, as well as Opera.
With all the new mobile devices coming out, it’s getting harder to test your website on every device/browser. This just illustrates how important standards are. I wish more browsers would adhere to them.
I use Virtual Box and have every browser covered pretty much. I find it difficult to test cross browser compatibility without actually using actual browsers. IETester is really good, mind you. I use it to test sites when I don’t need to boot an OS through virtual box.
I completely agree. Multiple browsers is really the only way to test all of a project. Otherwise you miss interactions like hovers, drag, etc…
Recently discovered this handy tool for testing various screen resolutions.
Screenfly by QuirkTools
Test Your Website at Different Screen Resolutions
http://quirktools.com/screenfly/
Great little tool, thanks for sharing njenney :)
That’s a great tool :)
I use http://www.infobyip.com/testwebsiteresolution.php which is good too.
I have finally taken the time required to set up 3 separate but full VirtualBox installations on my Mac. I can now test IE6 (rarely), IE7 and IE8. I just need to set up another one and install Windows 7 to install IE9.
I generally just develop in Chrome, test in Firefox occasionally (usually I don’t encounter any problems there), and then when I’m nearing completion or am actively working on IE compatibility, I fire up IE8 and use compatibility mode to test in 7. It’s kind of annoying when I have to test in IE, as I generally use Linux, but I make do with either a dual boot or a virtual machine.
I have Firefox, Safari, Chrome, Opera, & IE 8 Installed on my machine + IE Tester for basic IE testing when developing, and also Virtual Machines for Real versions of IE6+ as IE tester has proven to not be 100% realistic to the real broswer version although it is quite good.
I dont usually text for specific versions of Firefox, Chrome etc, only the latest versions as users of these broswers are prompted to update when updates come out.
I use adobe browser labs, but it can be a pain in the butt sometimes.
As many, i develop in the fast Google Chrome.
Then i have Parallels Desktop to test native IE8 functionality and additionaly in it “Multiple IEs” (http://tredosoft.com/Multiple_IE) to test native IE6 support.
Aside i got IE Tester on Parallels for first Quicktests in all IEs, but the known PNG Fix and some Javascript Bugs in IE Tester lead to a native Installation of IE6 in “Multiple IEs”.
I never use Browsershots like websites, because that’s too slow and not reliable because you only see one static screen without animations (so no Javascript) and no availability to click through your pages.
Thanks for the other Resources!
You’re welcome, thanks for the input :) Pretty conclusive results coming in so far…
Multiple installations when it comes to IE9, chrome, FF and opera and IETester for older versions of IE (IE8 and 7).
On the various machines I have around I have IE 6-9, chrome and firefox. For the most part, I don’t worry about safari, since it is webkit based, it’s usually close to what chrome gives me.
well I have all Browsers installed on my machine… Its how I work…. Apparently its tideous way of doing thing,,.. But I have gotten use to it.
I think I should try Virtual Box thought… thanks for the article..
I use Parallels on my Mac which lets me run Windows 7. I have all the modern browsers installed (Safari, Google Chrome, Firefox, and Opera) on both Mac and Windows. I use IE9 to test ie7, ie8 and of course ie9.
Parallels – http://www.parallels.com/
Isn’t IE9 installation with different browser modes enough to test IE8 and IE7? I believe these inbuilt rendering engines are 100% the same as standalone installations?
Besides I’m happy to drop support for IE6 :)
For me the best way is with VirtualBox, Firefox, Safari and Chrome on my iMac, and IE 6,7,8 on my virtual machine (VirtualBox) everything works perfectly.
The problem is JavaScript: IETester & browser compatibility modes don’t switch JS rendering engine (not sure about IE9, perhaps they have changed this?).
While this is not a problem in 90% of the cases, it can be very frustrating on the cases where it does matter.
A year ago, I used PIE.htc with some jQuery animations. Tested IE7 with IEtester and IE8 with compatibility mode. So I didn’t realize that the rendering after animations took 10 seconds(!) on a native IE7 install. Of course we found out after going live: a disaster.
Since then I have a few virtual installs.
I have Firefox, Chrome and Safari on my Mac. I test all the other browsers with Adobe Browserlab.
I use multiple portable browsers :)
VMware Fusion on my Mac for testing Windows & Ubuntu browsers.
I use Browserseal integrated in a Python script for automated testing
http://browserling.com/ recently came out and it looks awesome
I typically have all browsers installed on my system and test it in browsers. But I check it in screenshot software just because I’m a test freak.
Multiple installations seems to be the cheapest option as most browsers are free! Some screenshot services pay per screenshot etc, and this can be quite costly!
I use Microsoft Expression Web Super Preview for most cases. It is very helpful if you want to compare the results between different browsers. It also has the advantage to test your work offline.
I develop using chrome and have opera, safari and firefox installed. Also I have a shitty windows laptop with on it and IE tester on it. In my opinion, testing directly in the browsers is the only way of being sure your code is solid. And when I need to debug in IE tester (real pain in the ass), I go for the bookmarked firebug lite link. It’s not perfect, but it’s ten times better than any other option.
Btw, IE9′s modes for IE7 and IE8 are NOT reliable, I can guarantee that.
I think I can say that I’ve used all methods on a project before. Especially when trying to figure out a problem the client says they are having.
I too, didn’t know of scout before….thanks for that!
I love VMWare Fusion. I use it all the time on my Mac to test Windows browsers.
damn it , from these comments, I thought IETester was accurate ….
I usually use virtual box. ie tester has some great features but it’s just to slow at least for me. I just wish that there a was a firebug for ie, it would make my nightmares go away : (
Checkout Firebug Lite. http://getfirebug.com/firebuglite. You can use it with almost every browser even including IE6.
Multiple Installations can show you the brute problem or incompatibility..
And this right away…
I use multiple browsers, I use spoonbox IE6 (unfortunately, I can’t find where I can download it anymore) and IE Tester (becasue spoonbox have problems with png-24, and IE Tester with JS). For IE7 and IE8 test I use IE8 (switching modes).
Nothing beats having all the browsers installed on your own machine.
Testing for multiple screen resolutions is equally important. I use http://viewlike.us/ .
http://www.webconfs.com/web-page-screen-resolution.php is another great multiple resolution viewing site.
Always used different browsers, never liked screenshot services (bad for rapid tests), wanted to try application that can render with different engines, but didn’t find it and I’m lazy trying to find it.