Browser-Sync
Synchronized testing automatically performs the same interaction (clicks, scrolls, etc.) across a number of browsers and devices at the same time. It’s immensely powerful for catching visual regressions and bugs during RWD and multi-device development.
Browser-Sync is a free, MIT licensed open-source tool by Shane Osbourne which supports synchronizing:
- Scrolls – keeping page scrolls in sync across devices
- Clicks & Navigation – clicks persist across all browsers so navigation is kept in sync too
- Form data – any data entered into a form on one device gets copied to the others
As well as:
- CSS injection – Like Emmet LiveStyle, CSS files are watched for edits, getting injected across all pages without the need for a full browser reload. Really useful for iterating on styles for views and templates.
- Live Reload – watch local source files and automatically refresh browsers on all devices when a change is made
- a Static file server – for serving HTML/CSS/JS etc.
You can install Browser-Sync with npm by running: npm install -g browser-sync.
For a free offering, this is simply amazing, works great on Mac/Windows/Linux and captures the complete feature-set I was originally after for synchronizing interactions and workflow across my devices.
Thoughts
Until now, I’ve been recommended GhostLab for synchronizing scrolls, clicks, form-fills and live-reload but Browser-Sync is a more than worthy competitor. Unlike GhostLab (which I still maintain is amazing), Browser-Sync is:
- Open-source
- Works on Windows and Linux
- Doesn’t require a commercial license – that said, tools you regularly use do deserve to be financially supported
The fact that it also addresses the CSS injection use-case as part of the same tool-chain is astounding.
Roadmap
In terms of UI, Browser-Sync is currently a command-line tool but there appear to be plans for simple interface work such as notifications and the ability to trigger different modes without returning back to the command-line.
The author is also looking at integrating with debugging tools such as Weinre and Chrome DevTools, however it’s still early days on those fronts. Be sure to watch the Browser-Sync repo to keep track of the project.
Conclusions
I really like Browser-Sync and encourage you to try it out.
That said, if you have an existing GhostLab license and are on a Mac, it may be a good idea to stick with it unless you need CSS injection. It otherwise remains a great tool with a number of advanced features Browser-Sync doesn’t yet capture (the gap here is closing however). It also has a user-friendly UI, a well-documented workflow and already supports debugging via Weinre.
If however you haven’t invested in an existing solution, please do check-out Browser-Sync.
It has a fantastic feature-set and at least 5 developers I’ve spoken to this week alone swear by it for their own synchronized cross-device testing. That isn’t to say it isn’t without it’s flaws, but it’s an excellent solution worth playing around with.