How do you test your web interface to make sure it is evenly displayed across browsers?

Question

Tools like Selenium are good for testing user interactions in the web interface. However, I was curious to what people are suitable for rigorous testing and verifying the correct display of web pages in different browsers?

Is it possible?

Answer 1

Can I recommend browsershots where you can send pages and display them in different browsers with different settings or such as Flash and JavaScript. In the end, you still want to manually install FF, IE6-8, Opera, and Safari / Chrome. Also, if you have a friend with a Mac (or PC if you are using a Mac), ask them to check in Safari too, as I personally discovered differences in how they both display the same page.

I also recommend that you develop mainly in Firefox and regularly check it in IE6 while you work. IE6 is the one that will basically screw up, so if it works in both cases, it will most likely work.

When you discover rendering, try fixing it in your markup and CSS before resorting to CSS hacks, as they can lead to “interesting” problems later or in other browsers.

Answer 2

There are only a few browsers that need to be tested, since some of them have a common rendering mechanism ( Gecko or Webkit ). Without explaining what or why, here is current wisdom (2009):

• Build your site using Firefox or Opera (on any platform). BTW Opera uses its own engine Presto;
• Test depending on what you did not use.
• Validate (X) HTML and CSS (important!).
• Test it in> = IE7 and pay attention to glitches, if any.
• Use conditional comments in separate style sheets for each version of IE - never use CSS hacks as they will become obsolete.
• Test in IE and 7, if you want, and do the same, or use conditional comments to ask users to (politely) update their version of IE.
• Test in Safari (Webkit).
• Do not test in Chrome, you already have a proxy (Webkit)!
• Do not test in IE for Mac - the percentage is too low and it is no longer being updated.

Finally, try enlarging the text in Firefox, Opera, IE, and Safari. Opera also has a manual emulation mode for mobile phones.

You will now be covered (theatrical conjecture) 99.9% of your browser settings. If you are on OS X or Linux, you can run Windows in a virtual environment such as Parallels or Wine . Apparently, Wine also has a Windows binary, but I could not find it. Caution: you need to make sure your virtual environment allows IE to read conditional comments.

In practice, I find that if the site has valid code and works in Firefox, Safari and Opera, then IE7 will probably be all right. The only version of HTML / CSS is IE ' haslayout '. If you don't have browsers, BrowserStack is a great online testing service.

Finally, if you use Javascript, you will need to go through a similar process, the problem is that as a rapidly developing area, newer versions of some browsers handle Javascript in more and more efficient ways, so functions in older versions can break or fail quietly.

Answer 3

Manually?

I see no alternative if you want rigorous testing. Just install as many different browsers as possible and check in all of them. Of course, this includes various versions of the most popular browsers, and you need to check Windows, Linux, and Macintosh.

Answer 4

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

If you want to test functionality (JavaScript, etc.), you will need to manually test it.

Answer 5

I used to use WM for different versions of IE, but I learned about a new tool for testing the layout and user interface, and also with this tool, link for FF use the fire bug extension, these tools are intended for manual testing.