In a perfect world, the term browser compatibility testing would not exist, however, we live in an imperfect world and making sure your website is accessible to the masses is becoming more important everyday with the ever increasing spread of devices, operating systems and browsers available on the market today.
Browser compatibility testing can be a frustrating aspect of the development cycle. To ensure your HTML, CSS and JS markup is compatible and will work on every device is an almost impossible task. However, as developers, we need to code in such a way as to achieve this as much as possible.
This article outlines three different tools for helping you identify incompatibilities in your website with different browsers and platforms. Of course, there are many tools available to assist you with cross browser testing, however, the tools listed are ones I have used in the past or use now.
Screenshots provide a non-interactive screenshot of your website above the fold from platform to platform and browser to browser. One particular service that provides website screenshots is Browser Shots.
With Browser Shots, you can opt to get a screenshot of your website on almost any platform include Windows, Mac, Linux and BSD. Browser Shots is good as it allows you to queue up multiple screenshots at once and check back after they have completed to view your results. However, this is by far the most primitive method of cross browser testing and is not sufficient for true cross browser compatibility.
There are also other screen shot services, which have not been mentioned here.
BrowserStack is a method of cross browser compatibility testing which allows you to control a remote Virtualised PC with your desired browser and OS. It’s simple to use and you can get straight into testing as soon as you purchase one of the subscriptions available.
BrowserStack provides access to all major browsers. There is no need to maintain a ‘virtual environment’ yourself as this is managed by BrowserStack. You can simply log onto their website, type a starting URL to begin your tests and click ‘Start Testing’ and you are away!
For Internet Explorer specifically, the F12 developer tools are preinstalled and ready to be used.
Local Virtual Environment
Another possibility in cross-browser testing is to setup a virtual environment using software packages like VirtualBox, Parallels or VMWare. This method offers the most flexibility and performance by far, however requires additional work to get it up and running.
With a local virtual environment, you are able to control and allocate additional resources as necessary and set up an environment that suits your style and flavour. To some this is trivial, but to others this is important.
For most Mac developer’s, the biggest issue in cross-browser compatibility is testing Internet Explorer. Fortunately, Microsoft has come to the party and recently provided free VM’s for Internet Explorer browser testing. This alone makes local virtualisation much more attractive.
For me personally, one of the biggest advantage to a local virtual environment is the performance and response-to-user input, which is why I use it.
Deciding which virtualisation platform specifically to use is your choice, however I find VirtualBox to be adequate for my needs in addition to it being free!
Which one is right for you?
Each person has individual requirements and there is no ‘one right way’ of performing cross browser testing. At the end of the day, you need to use a method that will cause you the least amount of frustration and help you achieve your end goal of a website that is accessible to as many people as possible and provides a rich user experience regardless of the platform.
BrowserStack provides adequate means to achieving this and requires little or no time in setting up to begin testing. However, on the downside, pricing starts from approx $19.90/month and can sometimes be unresponsive or slow to interact with. I would recommend this method to those who have limited time or who do not wish to mess around with setting up a local virtual environment.
A local virtualisation platform is a great tool for responsive performance driven cross-browser compatibility testing. This method provides the most flexibility in setting up a testing environment that works for you and in most cases, the testing platforms can be obtained for free. However, on the downside, although this option can be setup for free, it does require additional time initially to set up your environment and to some extent, maintain your environment. I would recommend this method to those who are impatient (like me) when computers do not instantly respond, and those who are able to invest more time in setting up their testing environment.