logo-bs logo-dxn logo-odl Group 19

BrowserSync: time-saving synchronised browser testing

We've been developing BrowserSync — a tool that makes your testing workflow faster by synchronising URLs, interactions and code changes across multiple browsers and devices.

Creating websites for the multi-device web has forced designers and developers to rethink their principles and methodologies. RWD has become our approach of choice, but we’ve had to radically adapt our process to ensure we work efficiently and effectively for our clients.

Alongside techniques like style tiles, we do a lot of design in-browser, using our device lab to review websites in situ. This is great for optimising the experience for the point of access, however the testing time grows exponentially with each template, browser and device. We began looking at this problem six months ago, believing there was a clear opportunity to cut some repetition from the testing workflow.

The answer we found was synchronised testing. The existing tools we tried each had a strong individual feature: Remote Preview’s URL synchronisation, LiveReload’s file watching and GhostLab’s action synchronisation. None fully satisfied our criteria: we wanted a single solution that brought these features together, offered more portability and complimented our other tools such as Grunt.

So Shane set about building BrowserSync.

Introducing BrowserSync

BrowserSync keeps interactions and code synchronised across multiple browsers. It’s built on Node.js, so you can install and run it on MacOS, Windows and Linux. It implements socket.io to provide wide browser and device support, even IE7.

The key features:

  • Synchronised interactions: it replicates scrolls, clicks, refreshes and form inputs
  • Synchronised code: it updates browsers as you change HTML, CSS and other  files
  • Easy integration: it runs alongside any back-end technology and slots straight into task runners like Grunt and Gulp

The power of BrowserSync really becomes apparent when you see it in action, so take a look at this short screencast (2 mins).

For installation steps and basic usage, checkout the BrowserSync site.

Free to use

BrowserSync is an open source project. You are free to download and use it under the MIT license. The source code is available on Github.

If you have ideas for the future of BrowserSync, or would like to help contribute, please use the issue tracker.

We’ve been using BrowserSync for six months and it has become indispensable. We hope it can make a difference for you too.

What Can B2B Merchants Look Forward to with Magento 2.2 Commerce (formally Enterprise Edition)?

What Can B2B Merchants Look Forward to with Magento 2.2 Commerce (formally Enterprise Edition)?

Read More

New Adventures Conf: Find Somewhere to Eat/Drink

New Adventures Conf: Find Somewhere to Eat/Drink

Read More

Looking after Your Mental Health at Conferences

Looking after Your Mental Health at Conferences

Read More

Start the conversation

Whether it’s a new site or an existing one, Jamie’s ready to respond to you on
jamie@wearejh.com or +44(0)115 933 8784