Cross Browser Compatibility Testing Basics

Web browsers

 Apple Safari

 Google Chrome

 Internet Explorer

 Mozilla Firefox

 What else do you support?

CSS Elements

 CSS Version?

UI Elements

 Components Overlapping?

 Test across various standard resolutions

Cross Platform

 Windows

 Linux

 Apple Macintosh

 What else?

Rendering Elements

 How does web-page render?

 The JS elements positioning? In what sequence they have to load for better rendering?

 W3C Compliant HTML?

 Does rendering depend on various screen resolutoin and devices?

Mobile Browsers

 Google Chrome

 UC Browser

 Apple Safari

 What else?

Resolution Tests

 Test for standard resolutions

 Try with random resolutions apart from standard ones

Devices

 iPad

 iPad Mini

 Google Nexus Android Tablet

 What else?

Mobile Platform

 Android

 iOS

 Windows

 What else?

Automation

 CSS Coverage

 SiteShoter - Take Full page Screenshots

 Beyond Compare - Helps in comparing the images of version 1 with version 2.

 QuirksMode.org Thanks to Peter Paul Koch for building this matrix

 imagemagick.org Pixcel by pixel picture comparison

 Now, come up with an approach of connecting all these & creating a framework

(CSS Coverage, SiteShoter - Take Full page Screenshots, Beyond Compare - Helps in comparing the images of version 1 with version 2., QuirksMode.org Thanks to Peter Paul Koch for building this matrix, imagemagick.org Pixcel by pixel picture comparison)

Learning

 Web browser engines

 WTF is CSS?

 How CSS affects various browsers?

 Keeping yourself up-to-date on browser growth or enhancements

 Past experience of facing cross browser bugs (Do you maintain log of it to trigger tests in the current app?)

Miscellaneous

 Private Browsing

 Incognito Window

 With Internet

 Without Internet

 JS elements or client side behavior on various web browsers (if required based on context)

(With Internet, Without Internet)