Tips on cross browser Web testing

As Web applications and Web pages quickly become the dominant computing paradigm, one thing has become a giant stick in the eye: different Web browsers simply work differently. One can decry this all they want, but the various Web standards leave enough room for interpretation (often on purpose) for browsers to do things differently, especially as you switch from one form factor to another. Hopefully, as the HTML5 spec gets closer to being locked down, and more test suites come out for it, much of the difficulties will be resolved, but until then, we need to test on a variety of platforms.

Up until recently, it was pretty easy to check your UI in different browsers, because there were only two with any significant market share. When Chrome became a significant player, it altered the landscape a bit. Also, Macs have grown their market share enough where Safari testing should not be ignored. The real elephant in the room, though, are the multiple flavors of Internet Explorer. Unlike other browsers, IE tends to not get updated by many people for quite some time. To make matters worse, each version of IE tends to be substantially different from previous versions.

For smaller sites or less important projects, it may be enough to just do a quick browse through of the site with a few different browsers. Fortunately, Chrome, Safari, and Opera all look the same regardless of the platform they are on (although if the pixels have different sizes, that can cause some display problems depending on what units your CSS uses). There are also a lot of good tools (such as Microsoft Expression Web and Dreamweaver) that let you do a variety of different previews using different browser engines, sometimes in real time, that allow you to quickly spot differences and problems. One option is to have a variety of virtual machines with different browsers. If you'd like to avoid the headache of managing that (I for one dislike it), Sauce Labs has a great offering called Scout that is like having your own test lab with every imaginable browser install for Windows and Linux.

What has really changed, though, is the explosive growth of the mobile market. All of a sudden, you have a wide variety of different form factors with different implementations of different browsers on them. One nice thing that's been happening is that the mobile devices are quickly converging on using mobile versions of desktop browsers, instead of their own specialized browsers. As a result, it will become easier to test, since you can take your desktop browser, simulate the mobile screen size, and set the user agent to a mobile version and have the browser use the mobile media type for CSS, and get a really good approximation (if not an exact replica) of what a mobile user will see. If you are serious about mobile testing, though, you will still want to get the appropriate devices to ensure that the experience (particularly with readability and the touch UI) is usable.

In terms of testing the JavaScript and backend code, your best bet is Selenium. Selenium is a system for writing unit tests for Web apps, and can even control a variety of browsers like a user would, to allow you to evaluate what real-world use is like. Again, I am going to throw out Sauce Labs' name, as its OnDemand offering is a hosted Selenium product. Selenium is a big enough product to warrant an article all by itself. I've kicked the tires on it a bit, and I've looked at zillions of other products (most of which cost a small fortune, or are absolutely useless), and I think it's worth a serious look. You can expect to see an in-depth article on Selenium in the near future.

Justin James is an employee of Levit & James, Inc. in a multidisciplinary role that combines programming, network management, and systems administration. He has been blogging at TechRepublic since 2005.