Ubiquitous usage of internet has brought forth various browsers that are in popular usage. With the fragmentation surrounding mobile devices, the browser ecosystem has become very complex. People today need access to information, goods and services on the go. This has resulted in increased usage of tablets and mobiles among all sorts of audience. Social networking, Shopping, Emailing, Navigation, Reading, Banking, Researching are some of the most common tasks people perform on the internet using different communication gadgets. When every service possible could be at your fingertip would you be happy if the same site appears dissimilar across various browsers and devices? What if Facebook or Amazon doesn’t appear similar in your mobile, tablet and laptop; would you still prefer using those websites across gadgets?

Browser Compatibility: Explanation and NeedPlanning your browser compatability pic 1

As a user we could expect any webpage to work similarly across devices, but some fail to do so. It would definitely have a business impact if it doesn’t appear the same way. There has been an exponential increase in usage of mobile platform. Mobile and tablet based internet usagehas increased to around 30% of the total internet usage. The compatibility for these devices differs from the one used in desktop browsers. There are ways through which we could check whether the browser supports a particular feature.

Illustrated Example:

User agents would be available in every software application, browsers included, which could send the information to identify the application and the device on which it is running. The User agent string specifies the software application type, name and revision and the operating system in which the device is been functioning. An example on how the user-agent string, which provides certain details to the server by identifying your browser, works in different ways for different devices, is illustrated below:

Comparsion

Have you ever noticed that some fonts vary from browser to browser? For instance if you see ‘Georgia font’ text in Chrome, it would appear in a smaller and bolder manner in Safari. Font looks the way it is due to the rendering , which is designer’s intention. It varies from site to site. This usability issues could occur across devices too which cannot be captured using any tool.

Why Browser Compatibility is important?

There is a huge gap between the browsers used now and few years earlier. If the developer is targeting Chrome, Opera, Mozilla, Android, IE, Safari, Firefox; then he almost has targeted 90% of the market usage. But the challenge here is the number of versions each browser contains. For example in the screenshot below you could see the difference in display of the same website in IE8 (Left) and Chrome    (Right).

comparison 2comparison 2

This occurs largely due to different  display capabilities of each version.  The display capabilities of old browsers is  limited. For instance, in an older browser, for simple animation the developer had to embed the video or use Flash files. In either case display would take time to load,  marring the user experience.  To solve problem  new browsers support  Web technologies like HTML5 and CSS3 which serve as a foundation for virtually pleasing website these days. But unfortunately, many of these new websites will neither look nor function in the same way in old browsers like IE8.

How to plan your browser compatibility tests?

There would be a point in future where all the major browsers would render to Web code which would likely be standardized. Testing across multiple browsers would not be a tiring exercise if the website is coded according to Web Standards mentioned by World Wide Web Consortium (W3C). Below listed are some check points where the browser compatibility could be tested on.

For the ease of understanding, we could split browser compatibility into two types:
1. Basic

– Operating System Support: The basic of all would be to check whether the website is compatible with the Operating System. Popular modern operating systems include Android, BSD, iOS, Linux, OS X, QNX, Microsoft Windows,[3] Windows Phone, and IBM z/OS.

– Browser features: Information about what common browser features are implemented natively. These features would consist of bookmark management, password management, download management, form managing, spell checking, etc.

– Accessibility features: Information about what common accessibility features could be implemented. Features would include Page tabbing, Pop up blocking , ad filtering , page zooming , mouse gestures, carpet navigation, etc.

2. In-depth Analysis

–          Image format Support

–          Protocol Support

–          Plugin/Add-ons

–          Scripting Languages

–          Mobile Technology Support

–          Web Technology Support

–          Cascading Style Sheets

–          Font/Page Rendering

–          HTML Tags

–          DOM (Document Object Model)

–          Third Party Entities

The pace at which new devices and operating systems are released, it is quite a challenge for organizations to cope with it. Having all kind of devices and keeping them updated to the real environment is a challenging task. There are simulators which could help us in initial testing but they may not provide the 100% accurate results. They can be used for the initial first pass run but it would not allow us to see the exact behaviour which the user would see in their hardware.

Testing a website across devices has proven to be a challenge.  With patience sounding taboo in today’s internet world and  a large number of widely used browsers available, test engineers will keep encountering new challenges in the name of browser compatibility. Web browser compatibility testing might sound a little technical and confusing; something that you think should be left for the professional developer. However, the complicated ecosystem of browsers warrants a well thought out testing exercise. Poor browser compatibility can ultimately affect the brand and business reputation.

Following method/s can be employed to ensure a formidable cross browser compatibility testing:

 Combinatorial and Risk-based testing

Testing websites using combinatorial testing could be more effective. Here, the detail in test coverage for any website could be more precise and sharp. For example if we are to test  Amazon website then while using combinatorial testing we could come up with the following example.

Android OS would be tested with each browser, types of users, category and function as mentioned. In the test, the dimension of test would be 5x5x5x5x5=125 test combinations which could in detail examine the functionality of each Planning your browser compatibility pic 4browser in each operating system mentioned. Through this the clarity in testing a particular website would be exponential maximized and the result of detecting bugs would be more precise.

The test inputs maybe are of any size, combinatorial testing makes it easy and effective in covering all sort of specific combination of test inputs which could elevate the discovery of unknown and critical bug.

Ensuring quality by testing everything is impossible. That even at its best, testing is a risk reduction exercise and different browsers have wildly different tolerances to risk. When we start testing, everything seems to be critical and risk based until its real impact across browsers is validated.

Tester should know how to prioritize risks. Once the prioritization is done, running the tests in order of risk has highPlanning your browser compatibility pic 5 likelihood of determining the problem with highest severity. Arriving at an analysis which would signify the important issues that needs to be addressed first eliminating the noise in the system is vital. In the same Amazon example, we could do an analysis based on which problem needs more care addressed as a priority. Once the problems are been identified if the tester could list down the problems, QA could identify the major cause of their website’s insufficiency across browsers and work on their priority first. Measuring test results based on risk will allow the QA to know the residual level of quality and priority risk during test execution and to make decision to alleviate the bugs across browsers. This would eventually nullify the defects making the website user friendly across browsers.

Naveen Srinivasan

Naveen Srinivasan

Senior Consultant at Aspire Systems
Naveen Srinivasan works as Senior Consultant at Aspire Systems who majorly practices in Retail domain. Predominately providing Testing solution to clients he comes with wide range of knowledge across different area of retail including ecommerce, Warehouse Management, Order Management System and Oracle Suite.
Naveen Srinivasan