Cross-browser testing

Last updated February 10, 2013. Created by axyjo on November 25, 2010.
Edited by steveoliver, ArtistConk, Tor Arne Thune, eli-f. Log in to edit this page.

Cross-browser testing refers to the practice of testing your theme in multiple browsers to ensure that each browser renders pages as intended. At times, different rendering agents (Gecko, WebKit, etc.) render pages in a different manner. First, make sure that your theme follows Core Theme Candidate Requirements. These tips should allow you, the themer, to avoid these issues.

Target browsers

Selecting target browsers for your theme mainly comes down to audience. It's good practice to review the list of top browsers by market share (see W3Schools for statistics and trends). Browser versions can also play a role in design, as older browser versions tend not to support some of the newer specifications. Many people still use Internet Explorer 6 which does not always follow current web standards.

At times, due to costs, time or other constraints, it may be feasible to provide only partial support for a certain browser. One example of this would be not including CSS 3 transitions in Internet Explorer 6. This degraded support is fine for a theme. In addition, you might want to consider alerting the user to the fact that he or she is running an outdated browser. However, as stated above, some people may not have a choice in the matter.

Local browser testing

Many browsers allow you to download older, unsupported versions of their browser. For example, older versions of Firefox's 3.x branch can be found here. When downloading these older versions, do be careful to limit your usage, as these versions may have security vulnerabilities. If you are worried about viruses on the web, another option would be to run the older versions in a sandboxed environment using Sandboxie or other similar programs. Finally, the best way to isolate your computer from your testing programs would be to install the older browsers in a virtual machine.

Internet Explorer

Usually, when a newer version of Internet Explorer is installed on a computer, the older version is removed. However, for web developers, this can be a problem as they cannot check their site in previous versions. One possible solution would be to use IE Collection to install the older versions.

Remote browser testing

If you do not want to install multiple browsers on your computer, there are online services which allow you to view your website with other browsers. However, a disadvantage of most of these services is that you need to have a public web server on which your test Drupal installation with your theme can run on.

The most comprehensive browser testing tool BrowserStack is available starting (as high as) $19/month for unlimited interactive testing of public or private/local hosted sites (free 20 minute trial is available). They provide Mac and Windows virtual machines with several versions of browsers and even mobile device emulators for real-time interactive previewing of your sites. (The other options below pale in comparison to BrowserStack).

Another option to test your theme would be to use Adobe BrowserLab. However, you must have a CS5 Live license in order to use the service.

One option for previewing your theme's output in static screenshots of various browsers rendering your page is a service like Browsershots. This service allows you to check your theme from multiple browsers and operating systems. However, you cannot click on screenshots, move through your pages or use dynamic page elements. In addition, every day, you can only check a particular site a limited number of times before it requires you to purchase a paid membership.

There are many other services which can be used. Some of these require payment while others allow for free trials. A list of these services can be found here and here.