#cross browser compatibility testing

[concettolabs]

What is Cross Browser Compatibility Testing? Here Some Practices

Discover how cross-browser testing assists in assessing the functionality of web applications across a diverse array of web browsers.

[cross-browser-testing-blog]

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.

[bigberrydigitaltechblog]

This fixes transparency issues you get with pngs and ie6 (when will the pain be over)

Simply add this into your header section

    <!--[if lt IE 7]>

        <script src="../../Scripts/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 

        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <script>

      DD_belatedPNG.fix('#idOfImageToFix, #anotherID');

     </script>

     <![endif]-->

Its a bit of an a*rse as you need to add a ID or class to all the pngs that you need to fix into this method

DD_belatedPNG.fix('#idOfImageToFix, #anotherID');

But it works, simples :)

[bigberrydigitaltechblog]

Cross Browser Compatibility Testing: Adobe Browserlab

Need to check your sites quickly in a multitude of different browsers? perhaps *cough *cough IE6? 

Check out Adobe Browselab! It's free, anyone can use it, and it takes seconds to take a snapshot of your site in all the latest browsers. There's even a Firefox plugin Enjoy!

There's also a IE plugin for IE6 though I haven't installed it and tested it out

http://www.my-debugbar.com/wiki/IETester/HomePage