What's the best way to do cross browser testing?

Question

What's the best way for me to check if my website is compatible in IE7,8, Safari, FF, and Chrome without having to install each and everyone? I mainly want to check the CSS, HTML, and JavaScript.

Update I put a bounty in hopes there is a more practical solution for someone like myself. I am using Windows 7 Home Premium x64.

Update2 I don't mind installing these browsers now, but I can't even if I wanted to. Windows 7 doesn't allow me to install IE7.

Browsershots - It's very slow and not very practical when fixing bugs. It takes like 4-15 minutes to get screenshots and I can't view the whole page. Hope there's a better solution!

Answer 1

http://browsershots.org/ is a start, at least. It shows you screenshots of how the various browsers will render your page. Of course, that won't check the Javascript.

Answer 2

Also check- http://www.browsercam.com/Default2.aspx.

Here is also good article regarding browser cam. http://www.masternewmedia.org/2003/05/22/browser_compatibility_testing_online.htm

For Internet Explorer 6.0,4.02 and Netscape navigator 3.0/4.0- If you are using visaul studio to check browser comparability then there is a toolbar for w3c validation where you can check that.

Answer 3

Browser Shots is probably the most well-known service that does exactly what you’re asking.

However, if you only need IE testing, I recommend using IE NetRenderer. No waiting times! They also have an (unofficial) API, i.e. you can predict the URLs. For example, to see how Google.com looks in IE6, you could just visit:

http://ipinfo.info/netrenderer/index.php?browser=ie6&go=Render&url=http://www.google.com/

Answer 4

This thread could perhaps help you too, as I answered regarding different resolutions, but also mentioning the tools used for examining the results with links.

http://stackoverflow.com/questions/2484796/what-tool-can-i-use-to-test-my-web-app-in-different-resolutions/2485178#2485178

Btw. I always have at least 4-5 browsers installed for test purpose. I like the fact that I can switch between each browser with a click and get a very fast response.

Virtualize might be your solution?

You could also just use a virtualmachine and install them all into that one?

Or if you have CPU power enough, run a virtual machine pr. browsertype you want to test. Eg. make a "low budget" XP install and see how the browser looks.

If you need a free virtualmachine player, I personally prefer VMware's "player" edition. But if you can spend some money, the workstation version is a bit better.

Answer 5

The only way to reliably check your pages is to install the browsers on your system. The "snapshot" sites are OK but don't help you find what's wrong where the browser itself has a built in debug tool. Sometimes the online tools don't render the complete page, too. And none of them will help with javascript.

I find it funny where someone shows an image of a problem they have with a page but no code. I want to ask them if I can show them an image of the fix with no code.

Answer 6

Of course you can:

• Opera, Safari, FF & Chrome - just install (use i.e. ninite for quick&simple install)
• IE8 - preinstalled
• IE7 - switch IE8 to compatibility mode (or turn on developer window in IE8 with F12 and set it to IE7 rendering - does the same for me. Not for everyone, apparently (@Rob in comments)
• IE6 - download VMLite (or any other free virtualizing software) and you can virtualize on anything. (and of course, you have xp mode direct links)

Note

The other thing is, that I often need to check minor changes, and sending page over somewhere to check screenshot later... it suck, not to mention debugging minor differences with JavaScript (yes, even with jQuery). So install every browser you possibly could and test test test - you have first-hand experience.

Answer 7

For IE in all it's version without having to install them you can try IETester

I've used in the past when i used windows and it was flawless. It's an application where you just point to your webpage file and select the version of IE you want to render Or All IE versions all at once and it'll open all of them tabbed.

Update 1: Honestly there's nothing better than actually testing your websites on the real browser so even if you use these apps you ultimately will need to virtualize, use VirtualBox which is free, along the different versions of XP SP's in order to get the different versions of IE.

Answer 8

There is a tool that does this called Super Preview, it is a part of Expression Blend and Expression Web (Web is a subset of Blend). It includes previewers for IE6, IE7, IE8, FireFox and Safari. You can have them all up on the screen at the same time for side-by-side comparison. Download it from here. You can trial it for free for 60 days. The beta version for Expression Blend 4 is available, not sure what the expiry date is on it though.

Alternatively, you can use the free standalone Super Preview without Expression Blend/Web, it is available from here. Be aware that the standalone version does not include FireFox or Safari.

There is also a starter kit for Super Preview, which has some materials that will help guide you with its use, for a synopsis check this page (half way down), there is also a download link there or you can get it directly from here.

Answer 9

I generally find that the standards compliant browsers will all render my sites fine - so there is less of a need to test in more than one of, say, Firefox, Safari, Chrome, Opera. I use IENetRenderer for testing IE6 & IE7 for simple things or, if I need to do more in depth testing, I'll fire up a virtual machine with a stripped down version of Windows XP and test in there.

Also - just saw this (I haven't used it, just seemed like it might be helpful): https://browserlab.adobe.com/index.html

Answer 10

CrossBrowserTesting.com provides both live, interactive testing and automated screenshots across all major browsers and on multiple OSs. It is a service - no downloads.

Live testing - lets you run the real browser interactively via a vnc connection. You can check to make sure the page functions correctly - javascript rollovers work properly, you can complete a checkout process, etc.

Screenshots - allows you to easily check the rendering of a page across a bunch of browsers. Once you see one which does not render properly, you can click the 'live test' link next to the screenshot to start an interactive live test. Makes for a quick testing environment, as you can keep the live session up and just hit 'refresh' as you make changes to the css.

We provide testing across multiple versions of Windows (98, XP, Vista, 7), Mac OSX (10.5.7, 10.5.8, & 10.6), and Ubuntu. The configurations are each loaded with tons of browsers at various version levels - see http://crossbrowsertesting.com/configs for a list of the available combinations. System also allows you to select the resolution you want to test at. Not free, but Basic plan is only $20/month.

If you signup - let me know if you have any questions or ideas for the service at ken@ our domain.

Answer 11

BrowserSeal comes with standalone versions of all the browsers that you need (and some more) and an automatic screenshot tool that will capture your website under all browsers and present the result in an easy to use way.

If you discover some rendering inconsistency you can run the problematic browser manually in order to debug the issue.

It is not a web service like browsershots hence it is very fast and there is no monthly subscription fee.

Check it at http://www.browserseal.com

P.S. For IE7 on Windows7 it automatically configures IE8 to IE7 mode.

Answer 12

We're using Browser Sandbox at the office - http://spoon.net/browsers/

Answer 13

I think it depends on what you're trying to test, exactly. For testing functionality, we use Selenium. We define automated tests, and then have them integrated with our continuous integration system to run tests on 2-3 different machines with different browsers installed.

If you're doing visual testing, Joel and Jeff recently interviewed some people from Litmus, who has a pay solution for doing cross browser (and cross e-mail client) testing. I tried using it for some e-mail rendering testing, and it seemed really promising. I tried their free solution though, which only tests Outlook and Gmail, but it gave me an idea of how the tests works, and I'd definitely use it in the future, if the need arises.

Answer 14

I like using desktop virtualization to test multiple browsers. User either VirtualBox or MS Virtual PC, install different operating systems and different browsers on each virtual pc and launch as needed.

You will need, however, alot of RAM on your system (at least 2GB) to be able to work properly.

Using this method you can also test http://localhost sites quite easily and naturally debug.

It also emphasizes the differences between different OSs (XP vs 7 vs Linux)

Answer 15

We've played around with using Selenium Remote Control. You still need to install the browsers on a PC or VM somewhere, but you can then ask for the test to be run in each browser type you want. It will test all the JavaScript, but it isn't as elegant for testing how they render.

Sauce Labs has Selenium testing services you can use and avoid installing each browser, but I've never used them. You might be able to pull back screenshots at certain points in your test, but that is a total assumption of their API.

Answer 16

Sleipnir is a web browser which supports more than one layout engine. Might make testing a little bit easier.

Answer 17

I have developped a newsletter module recently. some of the user are using Lotus Notes, other using Outlook 2003 and other a standard webmail like gmail, hotmail or yahoo. We had to test in different browsers, mail clients and so on.
LitmusApp is really a nice tool. It takes screenshots on all different kinds of browsers, all the versions, and lets you mark them as valid or invalid, or partially valid. and you see the whole page (takes a full page screenshot including the scrolling)
It is also versioning the screenshots so that you can see the evolution while you are developing.

Fabulous tool at a very fair price (free for the basic usage). And no I don't work there :)

http://litmusapp.com/

Answer 18

Here is the basic tips to make and test cross browser compatible site.

For testing, there are many app like browsershots,IETester..etc. See following for the best apps to test cross browser compatibility

http://www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/
http://designm.ag/resources/cross-browser-testing/

Answer 19

https://browserlab.adobe.com

Free, fast (seconds, not minutes). Tests IE 6/7/8, FF 2/3/3.5, Safari 3/4, and Chrome 3. It also supports onion layering to detect tiny differences in the rendering (very convenient when you want to get a layout exactly right).

Answer 20

Well,

I am in the same situation. What I do is use virtual machines with Windows XP and Linux and whatever version of browser I need.