The market for browsers today is saturated with multiple products and versions so much so that if you are developing world class websites and web applications cross browser compatibility testing should be a critical and integral part of any web development lifecycle.

Just looking at the statistics for most used browsers today shows Chrome leading the pack, but Firefox, IE 9, 10, and 11, Safari, Opera, Microsoft Edge, Android browser and more as potential traffic to your site or app. So if you must ensure that you’re reaching as large of an audience as possible, cross browser and device compatibility testing is a must.

Enter Browser-Sync, an amazing open-source tool made by JH (http://www.wearejh.com/) that makes cross browser compatibility faster than ever. Speed in testing means that in the time it used to take you to just perform a basic check on all of the devices and browser you wanted to test, you can now cover all those bases and more, giving you better quality assurance coverage.

The 30 second guide to setting up testing with browser-sync.

If you use NPM already (Node.js package manager) type this into a command prompt

 - npm install -g browser-sync 

Once this is complete, browser-sync is ready to run on your machine. If you don’t have NPM head over to - https://nodejs.org/download/ and download the NPM installer for your platform (Windows, MacOS, or Linux) then go back and run the command line in the previous step. After Browser sync is installed you can start up browsersync by entering the following command line into a CMD prompt:

browser-sync start --proxy "http://youresite.com" --files "css/*.css"

Now that browser-sync is running you’re site you’ll see something like this appear in the CMD console window.

From the information in the window you can copy the URL http:localhost:3000 into any local browser on your local machine or if you want to run the same thing on a tablet, phone or other computer you can use the “External” link provided.

Now you’re done setting up Browser-Sync, time to test.

Once you have connected all the browsers/devices you want to test, you can start acting on one of the browsers by clicking links or typing text etc. and Browser-Sync will synchronize your actions across all devices and connected browsers meaning cross browser compatibility testing has been changed to allow the tester to drastically reduce the amount of input they have to enter into a web application in order to run tests across all the browsers and devices on their testing list.

There are a few caveats here, first browsersync injects all of the websites with a bit of its own code that allows the tester to act on all at once. Although this code is minimalist, it still is a new variable that a tester must be aware of while testing. After discovery of an issue or bug it is best practice to open a new browser without browser sync and perform a regression test just to ensure that the reproduction method for that particular test is not being impacted by the injection.

Additionally, a tester must consider the result of logging into applications as the same user multiple times, if the underlying app prevents this from occurring the tester may have to log into each browser separately. Also if the application submits the same data on a contact form or purchase page all at the same time for the same things by the same user there can be further complication which will be very unlike a typical user case.

There are likely other scenarios a tester will need to consider while using this tool, but for so many test cases, browsersync is simple an indispensable tool.

Learn more about browsersync by visiting http://www.browsersync.io/