Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Synchronized Browser Testing with Browsersync

Sunday, February 19th, 2017 by Servage

browsersyncBrowsersync is a testing tool that makes it possible to test web applications using multiple browsers and devices at the same time. You control one browser, and everything you do is replicated on other connected devices. You can scroll, fill out forms, click links and do much more with Browsersync. This makes it much faster to test websites, and you will also notice rendering differences between browsers easier.

Browsersync Explained in More Detail

Browsersync is a NodeJS module that can be installed using NPM, the package manager for NodeJS. Having said that, NodeJS and NPM must be installed to use it. We will not be covering the installation of these two in this article. All you have to do is go to www.nodejs.org and download the installation package.

How it Works

Browsersync works by injecting a piece of JavaScript code to the website you are testing. This allows Browsersync to synchronize all events between multiple browsers.

The features offered by Browersync are a big help in development because you don’t have to test your web application with every browser one by one. Instead, you can do it simultaneously on as many devices as you want. One of the biggest advantages is that all devices can control other devices. For example, you can first scroll a web page using a mouse on your desktop, and then move to a mobile device to fill out a form on the same page. No matter what device you use, all of them will stay in sync.

A Quick Setup

Once you have NodeJS and NPM installed, open your command prompt or terminal. To install Browsersync, run the following command: npm install -g browser-sync. This will install Browsersync globally, which allows you to run it from any directory. If you want to install Browsersync only for a specific project, you can omit the -g argument and run the command in the directory where your project files are.

Once you have installed Browsersync, you are ready to start it:

browser-sync start --server

Your default web browser should now start and load the index file of your project. Browsersync runs your project in a local web server on port 3000 by default. This is why you will see localhost:3000 in your browser’s address bar.

If you are working on CSS files, you can make Browsersync watch for changes in your style sheets and automatically reload the style sheets when a change is made. You can do this by using the –files argument, for example:

browser-sync start --server --files=”css/*.css”

This will watch for all CSS files in the “css” folder.

Synchronizing Multiple Browsers

When you start Browsersync, you should see a local and external IP in the terminal or command prompt. You can navigate to the external IP and port 3000 with any device in the same network. The device can be your phone, tablet, a Windows virtual machine using Internet Explorer or any other device with a web browser. All events will be synchronized, and when you make changes to a CSS file, all browsers will reload the page automatically.

Synchronized Browser Testing with Browsersync, 3.7 out of 5 based on 3 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.