How to optimize Cross browser Compatibility Testing.

A web application that works through all the browsers is said to be cross browser compatible. The basic approach to test this is to install all major browsers on the system and test the application on each. But this will be a very tedious and time taking approach considering the several automated testing tools available to help this out. Additionally, there are a few tips and tricks that can help to get past the common hurdles to achieving cross browser compatibility.

-      Browser Combination

In addition to each browser, there are several versions of it that are currently in use and are released very frequently. This increases a lot of browser combinations on which the application needs to be tested not only to ensure its consistent performance, but also to discover new problems that may have cropped up due to changes in supported rendering engines.

One casual approach is to consider only the popular browsers and a few of their recent versions. The other way is to sample the combination of browsers and their versions. Tools like Google Analytics and Splunk can be used to monitor which browser is mostly used to access the web application. This helps to create a well informed strategy on the combination of browsers to consider for testing the application.

-      Virtual Environments and Emulators

Considering the rate of release of new browser versions, there is a high probability of running into an overwhelming browser combinations and finally resulting in a cross platform problem. A high configuration Mac system, with a good amount of hard disk space and RAM combined with Virtual Machines can solve this problem to a greater extent. These pre configured VMs can also be downloaded and configured on a personal computer. Thus, emulators and virtual environments provide a solution to have all the browser and system combinations in a single machine.

-      Mobile

Mobile-first is the current trend now with responsive design and a cross platform consistency as its associated issues. One way to approach this problem is to invest in a sample of test devices for testing purposes. But this approach does not work with Andriod. With hundreds of device options to consider, the best way is to stretch the selection at the extreme ends. Consider the newest and oldest device, the biggest and the smallest screen sizes. Then select the most probable ones that are currently in use. The responsiveness of a design can be tested with a set of tools. Alternatively, it can also be tested by re-sizing the browser screen by dragging its corner.

-      Automate when required

Prepare a checklist of the most important functionalities that need to be tested. Automating each and every test is a naive approach. Often the traditional approach of testing each running script and noting down the issues is a result oriented approach. Some features are easy to check while some will need extensive cross browser checking.  Such critical tests can be automated. Test automation does not nullify manual testing. Rather, its smart combination with manual testing, is a time saving approach to carry out extensive testing of the most critical features. Hence, execute the test process in a balanced combination of manual and automated processes.

-         Additionally

-      Define Doc Types: This tells the browser the rules of your code. If left unspecified, each browser takes its own guess and will render the page in its default settings.

-      Using Javascript Library: Using library files abstract away the cross browser animation differences.

-      Resetting CSS: Each browser has its own CSS rules. Hence, CSS needs to be explicitly defined to achieve the same rendering in different browsers.

-      Using conditional statements: Conditional statements can be used to specify different CSS for different browsers.

-      W3C Validation: This validation service generates many HTML and XHTML errors and thus helps to create a technically correct website.

Conclusion

Adhering to basic rules eases the process of ensuring cross browser compatibility testing later on. One good strategy is to start performing the test as early as possible. It is the most cost effective and time saving approach. With the constant evolution of browsers and devices, Cross Browser testing should be considered as a continuous process.

Why is cross browser testing important?

With the increasing number of access devices and an aspiration for achieving a uniform functional support, several functionalities are becoming obsolete while several advanced functionalities are made to be supported by browsers through their multiple version upgrades. This leads to a distorted performance of the same application through different browsers. A customer coming across a distorted view of an application, immediately loses faith in the application and moves on to other application providing similar functionalities. 

As per the Statistics courtesy of W3Schools, the browser usage share can be predicted as follows:

Internet Explorer (6, 7, 8): 30.4%

 

Firefox: 46.4%

 

Chrome: 16.7%

Safari: 3.4%

Opera 2.3%

However, there is no definite way to determine the combination of browsers that may be used to access an application. So, the only way out to ensure a seamless user experience of an application or website is its extensive cross browser and cross platform testing before launch.

Cross browser testing is performed to achieve the following

-      Ensure the uniform display of a page across different browsers

-      Find inconsistencies and fix it.

-      Enhance user experience and efficiency.

-      Be aware of any future failures.

-      Test authenticated access to private pages.

-      Test local, private network and firewall pages.

-      Increase lead conversion

-      Flatter your quality and persistence to your prospects.

Main decision for cross browser testing

-      Site Analytics can help to determine the main browsers to test on.

-      A detailed analysis is required to be done to determine which parts of the system needs to be tested extensively. The best approach is to perform a complete testing on one browser and test the most critical functionalities on the others.

-      Once the above two decisions are made, infrastructure decisions are then required to be made considering costs, risks, security issues, resources required and debugging schedules.

-      Initiate test cycle.

-      Report test results, make changes, if at all required, then retest.

The most common way to start cross browser testing is by listing the functions of the particular website and then methodically open up the site in different browsers to verify and validate the outcomes. The variations in version of the browsers make it important to ensure that all the pages are rendered as designed. 

Cross BrowserTesting can be performed either manually on multiple systems, multiple Operating systems, multiple web browsers, multiple configurations, multiple days, multiple investments and further multiple challenges. Or it can be performed through different testing tools available in the market. Some of the tools can be used free of cost, while some are paid.

Conclusion

As mentioned earlier, browsers are being constantly upgraded and new versions are continuously released. This necessitates keeping track of the upgrades introduced. Many firms neglect this phase because of lack of funds and knowledge. Being persistent and being strategic in this case will save time and money. Cross Browser Testing is now one of the most important aspect of a software development lifecycle which ensures the best experience for the users.

Short reviews on some Cross Browser Testing Tools.

With varying web browsers in the current market and the endless combination with the different operating systems, the behavior of web applications presents issues that can prevent the important functions from running uniformly throughout all browsers. Cross Browser testing reviews and compares the functionality and the styles of a website across multiple browsers, operating systems and mobile displays. 

Each of us work in our favorite browser. This makes us forget to test the application in the other browsers. Cross browserTesting checks the compatibility of the web application across the different web browsers and ensures that the web application performs efficiently across all of them. It tests both the client side and the server side of the Web Application.

The classical way of cross browser testing is to run the web application on as many computers and combinations of operating systems and web browsers. But nowadays there are much more efficient ways of testing web applications across different browsers. Here we have reviewed some of the cross browser testing tools. 

ADOBE BROWSERLAB

It is a free cross browser testing tool that gives a number of views, including single browser full page view, as well as a comparative side by side view. It also has the ability to create a pre-defined browser set for testing.

BROWSER SHOTS

It is a free and one of the most comprehensive testing tool which includes Linux and Windows. It also includes additional browsers that are not generally used as of now. It carries out testing on the latest versions of each browser. However, with the added number of browsers the result generation of this tool slows down.

LUNASCAPE6

It is a triple engine browser which runs on Windows. It supports all the three major rendering engines -  Webkit for Safari and Chrome, Gecko for Firefox and Trident for Internet Explorer. Thus the web application under test can be viewed under in all the major web browsers. It also supports the add-on extensions for Firefox plugins which further helps to diagnose compatibility problems.

IE TESTER

It is a free Windows Browser that supports the rendering and the Javascript engine for IE10 to IE5.5 on Windows 7, XP and Vista.

SPOON

It is a service for emulating application. It includes multiple versions of each browser.

SAUCELABS

It provides with a number of browser and OS combinations. It sets up a Virtual Machine Instance, that operates inside the browser. It also helps to build automated tests with the help of Selenium.

CLOUD TESTING:

It helps to perform cross browserfunctional testing. The user interaction is recorded with the browser and Selenium IDE and then uploaded for Cloud Testing which runs the script in multiple operating systems. 

BROW SERCAM

It includes tools for testing for both Mobile and Desktop. It gives remote access for live testing in Windows, OS X and Linux configurations. 

CROSS BROWSER TESTING

This tool provides with interactive testing on browsers with Virtual Network Computing sessions. It can generate screen shots across multiple browsers. 

MULTI BROWSER VIEWER

This covers both mobile and desktop browsers. It supports 26 Web browsers, five mobile browsers and 61 screen shot browsers. It is also available in multiple languages – English, French, German, Spanish and Russian.

CONCLUSION

There exists a great deal of variation between browsers and its different versions. This necessitates cross browser testing to ensure that all the pages are rendered as intended. A web application should be tested in those browsers that hold the most market share. Regardless of the testing tool that is chosen, the Web Application testing process should be preferably be shifted earlier in the development cycle. This can save a lot of time, effort and money later on.

Cross Browser Compatibility Testing for Web Applications

Cross Browser Compatibility is one of the most influencing part of a website. A website should be compatible with the different configurations and settings of different browsers. It may not be feasible to test the website dimensions manually throughout all the different browsers. Therefore, we rely on automated testing tools which are extremely helpful in testing websites will all dimensions.  

Compatibility Issues:

The compatibility issues are as old as the browsers themselves are. The major issues can be listed as follows:

-          Multiple Browsers – Internet Explorer, Mozilla Firefox, Google Chrome, Safari

-          Multiple Versions of Browsers – IE (Version 7,8,9,10), Firefox(7.0, 8.0) etc.

-          Multiple Computer Platforms- Windows, Mac, Linux etc.

-          Multiple Screen Sizes – From PC, IPAD, to Smart Phones

-          Font Sizes

-          HTML Errors

Goals:

As per the above issues, Compatibility testing  should be performed on the following aspects:

-          Browser Compatibility: Different browsers have different configurations. The website coding and layout should be compatible with as many browser platforms. Stress should be given on the JQuery and AJAX calls and their uniformity should be ensured through multiple browsers and their multiple versions.

-          The different technologies used in developing the different components of the website, such as graphic designs, Animations, API integrations, etc., may not be compatible with the different versions of the Operating Systems.  Hence the Web Application needs to be tested across the different operating systems – Windows, Mac, Linux etc.

-          The use of mobile internet has led to the emergence of version of mobile browsers. Hence the web application needs to be tested for its responsiveness on various devices and the accessibility of the interactive components should be ensured throughout all the mobile versions on different mobile platforms

Checklist for ensuring Cross Browser Compatibility of Websites or Web Applications:

-          HTML,  HTML5, CSS Validation.

-          Font Size Validation, Special Characters Support, Character Encoding

-          Page Layout in different resolution

-          Image, Text Display and Alignment

-          Page Styles

-          Date Format

-          Page Zoom in and Zoom out functionality.

-          Video Settings and its Screen resolution.

-          Design, layout and color display.

-          Java Script, JQuery, GUI Animations, Ajax validations and their successful functionality.

Manual Cross Browsertesting is a matter of time and money. Paid tools can be used for those browsers which have high browser dependent functionality. However, free tools also verify cross browser compatibility to a sufficient extent. The different tools for compatibility testing are as follows:

-          Spoon Browser SandBox- It allows to use all web browsers without installing them in the machine. 

-          Browser Shots: It can run compatibility testing with greater customization. The steps need to be repeated for every test. When many browsers are selected at a time, this tool takes a lot of time to display the results. 

-          IE NetRenderer:  This tool allows for testing across all versions of Microsoft Internet Explorer.

-          IE Tab: It is a good tool to test on Internet Explorer using Firefox or Chrome.

-          IE Tester: This tool allows testing the website on multiple versions Internet Explorer at the same time using only one application.

-          Microsoft SuperPreview: This tool allows testing and debugging layout issues across different IE browsers.

-          Browsera (Paid Tool): It is an automated testing tool used to test the website and its elements in multiple browsers. It can be used to test for layout and scripting errors.

-          Adobe Browser Lab(Paid Tool):Web Pages can be previewed across multiple versions of multiple web browsers. Full screen shots can be viewed with customizable test settings.

-          BrowserCam(Paid Tool): It allows to view web pages across different platforms and browsers. This can be done either by automatically taking the screen shots or navigating through them automatically. 

-          BrowserSeal(Paid Tool): It captures an image of the website under different browsers . The images can then be navigated through to spot layout and UI issues.

-          CrossBrowser Testing(Paid Tool): This tool requires the tester to log in, then select the browser and the operating system for testing the website. 

-          Cloud Testing(Paid Tool): This tool allows to check the website on real operating systems in the cloud.

-          Selenium: It is testing framework for web applications. It is an open source software where the tests can be written in a number of programming languages.

Conclusion:

With the change in technology, users have different browsers and platforms. Web Applications cannot be developed on only single configuration and expected to be working for all others. Hence, crossbrowser compatibility should be considered an indispensable criteria for Web Applications.