Cross Browser Testing

Testing the Cross Browser Compatibility of Web sites across various browsers and operating systems.
The goal is that a website can be used by the largest possible audience, with minimal variation in the user-experience
A webpage should ideally look and work the same in all web browsers. The unique challenge of achieving this goal lies in the nature of the medium itself .
Some applications are very dependent on browsers. Different browsers have different configurations and settings that your web page should be compatible with. Your web site coding should be cross browser platform compatible.
 

Why Browser Tests are necessary ?

• The browser-environment is still very quirky and the risk of inconsistent presentation is simply too high to ignore it
• Different browsers and operating systems use different techniques for rendering fonts (Win vs. Mac on handling fonts).
• The font size isn’t identical on different platforms and some fonts might not be installed on the user’s system.
• Ex:- Firefox on Linux doesn’t display web-sites as Firefox on Windows does.

Definition Of Cross Browser Testing

• When a software program is developed for multiple computer platforms, it is called a Cross Platform program.
• Similarly, when a website is developed for multiple browsers, it is called a Cross-Browser Website.
• Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.
• For example, Apple’s Safari uses a different HTML rendering engines than Internet Explorer. This means the browsers may display the same Web page with slightly different page and text formatting. Since not all browsers support the same HTML tags, some formatting may not be recognized at all in an incompatible Web browser.
• Because of the differences in the way Web browsers interpret HTML and JavaScript, Web developers must test and adapt their sites to work with multiple browsers.
• For example, if a certain page looks fine in Firefox, but does not show up correctly in Internet Explorer, the developer may change the formatting so that it works with Internet Explorer.
• The easiest fix for browser incompatibility problems is to use a more basic coding technique that works in both browsers.
• However, if this solution is not possible, the developer may need to add code that detects the type of browser, then outputs custom HTML or JavaScript for that browser.
• Making a cross-browser site is usually pretty simple for basic websites.
• However, complex sites with a lot of HTML formatting and JavaScript may require significant extra coding in order to be compatible with multiple browsers.
• Some developers may even generate completely different pages for each browser.
• CSS formatting has helped standardize the appearance of Web pages across multiple browsers, there are still several inconsistencies between Web browsers.
• Therefore, cross-browser design continues to be a necessary aspect of Web development.
• So, we perform cross browser testing to make our web site function in all browsers.

 

Benefits Of Cross Browser Testing

• Since there is no definitive way to determine the mix of browser/operating system combinations that your customers may be using, the only way to maximize broad market access to your website is to plan ahead and ensure that your website has been cross-browser and platform tested by your website developer. This approach may cost a bit more but the benefits can include:
• Consistent, stable cross-browser/platform rendering and functionality on all website pages – higher quality website
• Simplified website maintenance and updates
• Ease of use/viewing for end-users (your customers!)
• Increased customer conversion ratio
• Your prospects will know that you value quality.

Benefits Of Cross Browser Compatible website

• A properly executed cross-browser testing is necessary to have a truly global, user-friendly and search engine friendly web site. A web site, like a newspaper or a magazine is supposed to be visited and viewed by as many surfers as possible. Following are the benefits of having a cross browser compatible web site.
• User accessibility: Ensuring that your web site works across all multiple browsers is one of the ways of achieving the goal of creating maximum traffic and incoming links. Many other factors determine web site accessibility and opera-ability. For a web page to be called cross- or multi-browser compatible, it must display and function at an acceptable level or appearance, navigation and accessibility, with at least the five main browsers.
• Search Engines Accessibility: Search engine appearance is the foremost important factor that affects the commercial viability of a web site. If major search engines cannot find your web site, then there is very little chance that you will succeed in your online business. Web users search for a particular product, service or even information by visiting a major search engine like Google or Yahoo.
• Cross web browser compatibility ensures proper search engine indexing, without any problems, by the different search engines. Better search engine indexing means increased incoming traffic and links to your web site. Unfortunately, many web sites are not accessible, just because they were un-tested for cross browser compatibility.
• Positive Business Image: An accessibility failure can lead to negative impressions about your web site and business. If there are problems with navigation and appearance, your online reputation will suffer too. If your web site is reliable and trustworthy, site visitors will keep coming back to your web site.
• The home page of a web site is just like a front desk of a corporate office. Ensure that you keep your web site visitors impressed with a good web site that displays all features. Never ever, make your web user go away just because you have a very bad web site.

Tips for Cross Browser Testing Websites

• When a software program is developed for multiple computer platforms, it is called a Cross Platform program.
• Similarly, when a website is developed for multiple browsers, it is called a Cross-Browser Website.
• Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.
• For example, Apple’s Safari uses a different HTML rendering engines than Internet Explorer. This means the browsers may display the same Web page with slightly different page and text formatting. Since not all browsers support the same HTML tags, some formatting may not be recognized at all in an incompatible Web browser.
• Because of the differences in the way Web browsers interpret HTML and JavaScript, Web developers must test and adapt their sites to work with multiple browsers. For example, if a certain page looks fine in Firefox, but does not show up correctly in Internet Explorer, the developer may change the formatting so that it works with Internet Explorer.

 

Types Of Cross Browser Testing Tools

• Sometimes, testing on various browsers becomes a challenge for software test professionals & project teams.
• Running the test cases on all browsers makes the testing cost very high.
• Specially, it becomes a challenge when we do not have expert designers in the team or when we don’t have verification/validation phase at the time of screen design.
• This is the bad part. Now, let’s see what is good.

Spoon Browser Sandbox

• The Spoon Browser Sandbox allows you to use almost all web browsers without installing on your machine. You can run all popular browsers including Internet Explorer, Firefox, Chrome, and Opera on your machine directly from the web. (Note: Currently Internet Explorer is removed temporary from the list of this sandbox)
• Spoon Browser Sandbox is a free service currently supporting following browsers:
• Mozilla Firefox versions:
  Firefox 2, Firefox 3, Firefox 3.5, Firefox 3.6, Firefox 4 beta
• Internet Explorer versions:
  IE6, IE7, IE8
• Google Chrome versions:
  Chrome, Chrome 5 and Chrome 6 beta
• Opera versions:
  Opera 9 and Opera 10

BrowserShots

• Browsershots allow you to test website in any browser and operating system. This is widely used cross browser testing tool because of its features and available customizations.
• You can run cross browser compatibility tests with great customization options like browser type, operating system, screen size, color depth, JavaScript status and Flash enable/disable settings. Just put your website url, select compatibility test parameters and submit the test request.
• You need to repeat the steps for every test. This free browser compatibility test service can be used for taking website screen-shots almost in 61 browsers and various operating systems.
• Main drawback of this service is the time taken to display the result when you select many browsers and many times it shows timeout error.
• Supported browsers:
  IE, Firefox, Google Chrome, Opera, Safari, Minefield, Netscape and many more browsers with all versions.

IENetRenderer

• This is a free online browser compatibility check tool to test website on almost all versions of Microsoft Internet Explorer. Just select the Internet Explorer version from drop down list and put your url to start rendering website. You can instantly verify the screen-shot of the page under test.
• There is also a “IE NetRenderer” Firefox add-on available that allows you to render the web page that you are currently reading.

Microsoft Super Preview

• SuperPreview is Microsoft’s offering in this space (and it’s compatible only with Windows). It lets you define your own “baseline” (or default) browser, and it works with any browser installed on your system (and comes with the IE6 rendering engine built in). The fact that it only works with your built-in browsers does make it faster (because you’re not uploading anything or waiting for a remote server), but it also limits the number of browsers you can compare.
• SuperPreview trial comes with 60 days of cloud services before you have to either buy it or go into reduced, (local browsers and IE 6-9 mode). In an online version, you have support for Chrome, Safari (Mac) 4+5, Firefox 3+4. You can also use an interactive mode to log into sites that require a login before displaying the page you want to test. There are also debugging tools for the DOM and onion skinning available in Adobe Browserlabs. Unfortunately, there is no support for Opera whether installed locally or in the cloud and you do have to have the version included with Expression Web to get the cloud services option but the base version with support for IE 6, IE 7, IE 8 (and IE 8 rendering as IE 7) are included with the free version as well as IE 9 if it is installed locally. (Thanks, Cheryl D Wise)

Cloud Testing

Cloud Testing offers functional cross-browser testing. You record the user journey with your browser and Selenium IDE, upload it, and then Cloud Testing will run that script in multiple operating systems and browsers. It then provides screenshots and HTML and component diagnostics. No prices are listed on its website.

Multi Browser Viewer

• Multi-Browser Viewer covers both desktop and mobile browsers. It includes 26 virtualized Web browsers, 5 mobile browsers (including the iPhone and iPad) and 61 screenshot browsers (meaning you can see how the website renders but not interact with it). It’s also available in five languages: English, Spanish, German, Russian and French.
• Multi-Browser Viewer is $139.95 for a single-user license and includes a year of product usage and updates. Updates after the first year are currently $99.95. A free trial is available through the website.

MogoTest

• Mogotest.com is a cross-browser testing suite that performs automatic checks across popular browsers to make sure that a website looks the same, no matter which browser users use in order to access it.
• Mogo Test has been featured in several web applications, including Testing Web Sites and Hackers News.
• Mogotest features:
  • Cross Browser Compatibility Report – quickly see which browsers each of your pages is broken in.
  • Regression Testing – Mogotest compares every tested page to previous versions and will let you know when something breaks.
  • API Access – easily integrate with your existing testing and deployment tools using Mogotest’s ReST API.
  • No Programming Required.
  • Screenshot Comparison Tools.
  • Test Private Pages.
  • Site Health Report.

 

Combination of Freeware and Commercial Testing

There are a few Cross Browser Testing tools which are a freeware and commercial. Below slides explain them

   Browserling

• Browserling is a relatively new cross-browser testing app. It supports a limited number of browsers (and not necessarily the newest versions), which makes it of limited use to some developers. It’s still in beta, though, so hopefully more browsers will be supported in the near future.
• The free version comes with a five-minute session limit, and the developer version is $20 per month with no time limit.

Adobe Browser Lab

• Adobe BrowserLab is a free cross-browser compatibility tool that lets you test a number of modern and legacy browsers, including various versions of Chrome, Safari, IE and Firefox. It gives you a number of ways to view pages, including a full-page view in a single browser, as well as side-by-side comparisons of browsers and an onion skin view. The service can access dynamic pages across the web, or viewed locally via Firebug or Adobe Dreamweaver CS5. The ability to create pre-defined browser sets is also useful, in case you don’t need to test on older browsers.

Browser Ratio in the market

The graph in the next slide illustrates the ratio of the browser usage in the market.

Notes

• Make your site as simple as possible.
• The more complicated your HTML and CSS the more difficult debugging will be.
• Use HTML Validator and CSS Validator to check HTML and CSS errors
• Use Browser Compatibility Testing Tools
  • http://www.browsershots.org
  • http://www.browsercam.com
• Browser Compatibility
  • http://www.netmechanic.com/products/Browser-Tutorial.shtml
  • Crossbrowsertesting.com

Generally a browser should be tested if it meets one of the following criteria:

• It is used by a significant portion of a sites users, and is in common, widespread usage.
• It is the default browser on the latest version of Windows or Mac OS X.
• It is a newly released browser which is expected to quickly gain a significant portion of browser market share, e.g. the latest IE, Firefox or Google Chrome

After reviewing the data against those criteria, the following browsers are suggested for inclusion for testing most sites:

• Browser Reason for inclusion in test matrix
• Internet Explorer 8.x Most common browser in use today.
• Internet Explorer 6.x Second most common browser in use today.
• Firefox 8.0 Latest version of Firefox
• Safari 5.x Default browser on Mac OS X.
• iPhone & iPod Uses webkit, the largest single mobile browser.
• Google Chrome(latest) Chrome has significant, rising market share

Regardless of the tool you choose, testing early and often during the Web development process can save you from a lot of headaches later. Find a tool that fits your workflow (so that you’ll actually want to use it and it won’t be a hassle), and test whenever you make major changes to a design.