BrowserSynch – Synchronize Mobile Testing On Multiple Devices

What Is BrowserSynch?

BrowserSynch is a cross-browser and cross-device testing tool.

When testing a website on multiple browsers and/or multiple devices, it becomes a tedious task to repeat every test multiple times across multiple platforms. With BrowserSynch, you can drive on one device or one browser and then watch the same actions taking place on all the other connected devices.

By connecting any number of devices & browsers, a BrowserSync created URL can:

  • Scroll on one browser; other browsers follow the scroll to the same point
  • Click links; other browsers load the clicked URL
  • Fill out & submit forms; other browsers submit
  • Test responsive designs; see your site rendered on different devices at one time
  • Change HTML, CSS & JS; automatically inject those new files without a page refresh

How does BrowserSynch work?

BrowserSync starts a small web server. If you’re already using a local web server or need to connect to a live website, you can start BrowserSync as a proxy server. It injects small script into every page which communicates with the server via WebSockets. When an event occurs, such as a clicking a link or scroll action, the server sends an update notification to all connected devices.

Here is a short video introducing BrowserSynch

Installing BrowserSynch

First you need to install Node.JS from nodejs.org. If you already have Node.js installed you can skip this step.

Install BrowserSync globally by running this command

npm install browser-sync -g

To ensure installation was successful, you can run

browser-sync --version

Using BrowserSynch

Suppose we have a web application in local environment under a category, e.g. /app. The web application has a number of html, css and javascript files.

First navigate to the folder where the web application is stored, then run

browser-sync start --server --files "*.html, *.css"

The above line starts the BrowserSync server and instructs it to watch all .html and .css files.

You should then see the below in your console:

[BS] Proxying: http://localhost:8080
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.120:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.120:3001
 -------------------------------------

This will open a new browser window on local host: http://localhost:3000/ on your local machine.

Then all the devices or other computers that are connected to the same network or same wifi, can access the BrowserSynch server on the “External” address, which in the above example it is http://192.168.1.120:3000

This will load the default page (index.html) and automatically refresh it when the HTML or CSS changes.

You should then be able to see that all the actions performed on once machine or device is replicated on all other devices.

For more details and examples of using BrowserSynch, refer to the website at browsersync.io.

Open Source Mobile Test Automation Tools

Leave a Reply