How do you test your web UI to see if it renders uniformly across different browsers?

Question

Tools like Selenium are good for testing user interactions on the web UI. However, I was curious what are people approaches for strictly testing and verifying that web pages are rendered correctly across a set of browsers?

Is this even possible?

Answer 1

Manually?

I do not see an alternative if you want strict testing. Just install as many different browsers as possible and test in all of them. Of course this includes different versions of most popular browsers, and you need to check on Windows, Linux and Macintosh.

Answer 2

May I recommend browsershots where you can submit pages and have them rendered out in a variety of browsers with various things set on or off such as Flash and JavaScript. At the end of the day you will still want to install FF, IE6-8, Opera and Safari/Chrome for testing manually. Also, if you've got a friend with a Mac (or a PC if you're using a Mac) get them to test in Safari too as I've personally found differences in the way both of them render the same page.

I'd also recommend that you develop mainly in Firefox and regularly check it in IE6 as you work. IE6 is the one that will mostly screw up so if it's working in both it's more likely to be working in all.

When you find rendering weirdness try and fix it in your markup and CSS first before resorting to CSS hacks as they can lead to 'interesting' problems later or in other browsers.

Answer 3

If you just want to see if layout is correct, just submit your website to BrowserShots.org and visit later to see the screenshots.

If you want to test the functionality (JavaScript, etc.) then you'll need to test manually.

Answer 4

Previously I was use WM for different versions of IE, but I find out some new tool for testing layout, and UI as well with this tool, link for FF use fire bug extension, those tools are for manually testing.

Answer 5

There is only a handful of browsers you need to test, as some share a common rendering engine (Gecko or Webkit). Without explaining which or why, here's the current wisdom:

1. Build your site using Firefox or Opera (on any platform). BTW Opera uses its own Presto engine;
2. Test in whichever of the above you didn't use.
3. Validate the (X)HTML and CSS (important!).
4. Test it in IE7 and IE8 and note the glitches, if any.
5. Use conditional comments in separate stylesheets for each version IE - never use CSS hacks as they'll go out of date.
6. Test in IE 5.5 if you like and do the same, or use conditional comments to ask users (politely) to upgrade their version of IE.
7. Test in Safari.
8. Don't test in Chrome, you already have by proxy (Webkit)!
9. Don't test in IE for Mac - the share is too low and it's no longer updated.

Finally, try enlarging the text in Firefox, Opera, IE and Safari. Opera also has a hand-held emulation mode for mobiles.

You will have now covered (theatrical guess) 99.9% of browser setups. If you're on OS X or Linux, you can run Windows in a virtual environment like Parallels or Wine. Apparently Wine also has a Windows binary, but I couldn't find it. You'll need to be sure that your virtual environment allows IE to read conditonal comments.

In practice, I find that if a site has valid code and works in Firefox, Safari and Opera, it'll probably be okay in IE7 up. The only HTML/CSS gotcha is IE's 'haslayout' handling.

Finally, if you're using Javascript, you'll need to go through a similar process, problem being that as a rapidly developing area, newer versions of some browsers handle Javascript in increasingly effective ways, so functions in older versions might break or fail quietly.