Using BrowserSync for Synchronised Browser Testing

As a matter of fact let’s accept that developers hate doing grunt work. Instead of repeating things again and again, a pro web developer believes in hardcore automation and would love to invest time in automating things. WordPress site setup and browser testing strongly support the DRY — Don’t Repeat Yourself philosophy and encourage you to automate the entire process with several automation tools and scripts.

LiveReload has been a decent choice for many for this very purpose but, let me introduce you to another incredible automation tool i.e. the BrowserSync. In this post, I am going to discuss how does BrowserSync works and which features make it stand out of the lot.

Synchronized Browser Testing With BrowserSync

[ecko_fullpage_image]

[/ecko_fullpage_image]

BrowserSync is an intuitive automation tool which helps to speed up your web development. It synchronizes all forms of file modifications and even interactions across numerous display screens.

If you’re not using BrowserSync to automate your workflow, then you’re certainly missing out something. It has become an indispensable tool for many web developers and has also helped me improve efficiency and reduce cross-browser inconsistencies.

I completely understand how frustrating it can become to monitor every single change but thanks to BrowserSync whose amazing feature-set helps you to get through it all too quickly.

Working

Earlier, whenever you made any changes in your files, you’ll have to perform a manual reload in your browser. BrowserSync not only detects any type of file changes but also reloads it automatically — and that too in a fraction of a second. Also if your changes are too small, then it will inject them inside the site, without even reloading it. This entire process saves ample time and increases your productivity.

BrowserSync also injects a JavaScript file on every web page. This helps to improve the communication between the client and the server to watch changes in your code or browser action. So whenever a change is detected, it performs a live page reload.

BrowserSync For Both Static & Dynamic Websites

BrowserSync works exceptionally well for both static and dynamic sites.

• For static web pages, it’ll create an HTTP server which runs your site on the localhost with a particular port.
• For dynamic websites, where you’re running your project on platforms like DesktopServer, things become a little different. Here, the BrowserSync serves as a proxy to boost your dynamic server.

Features

BrowserSync is equipped with multiple handy features like:

• Live Reloading: Having the ability to perform live reload on every single file change, is definitely the most important element of BrowserSync. This auto reload feature helps you test multiple things in one go.
• Tunneling: The tunneling is yet another distinguishing feature of BrowserSync which allows you to show any of your on-going projects to your teammates or friends. You’ll just need to change the port and create a tunnel through a random public URL. This randomly generated URL is provided by the BrowserSycn itself.
• CSS Injection: It watches all the CSS files and in the case of any change, updates all the connected browsers without letting any web page to reload.
• Consolidated Synchronization: BrowserSync offers an interacted synchronization i.e. it mirrors all the changes on all the browsers and devices.
• Simulate Slower Internet Connections: Figuring out how your site will perform on poor internet speed is an interesting aspect which BrwoserSync has addressed smartly. It offers a feature which you can use to throttle your site connection speed.
• Logging URL History: BrowserSync logs all browsing history so you can push a test URL to all devices.
• Integration with Tools: BrowserSync quickly gets integrated with third-party development tools like Gulp and Grunt.

A Basic Implementation of BrowserSync

It’s incredibly simple to get started with a basic setup of BrowserSync. Just follow the steps which I am going to list.

Install NodeJS & NPM

Tools like BrowserSync are the node modules. Hence, you should have NPM installed already. If you don’t, then do it now with the following commands.

node -v
# v7.10.0

npm -v
# 4.2.0

Installing BrowserSync

To install BrwoserSync globally, type in your terminal:

npm install -g browser-sync

The next step is to confirm the successful completion of its setup. This can be done by using the following command.

browser-sync --version

Make sure you get the most recent version. In my case, it is version 2.18.12.

Running BrowserSync

When it comes to the actual working of BrowserSync, then I’ve already mentioned that it depends upon whether you’re working with static or dynamic websites. Let me write the commands for both of these.

For Static Websites:

While working with a static website, just open the root folder and type the following in your terminal:

browser-sync start --server --files "**/*"

This command lets BrowserSync watch all kinds of files and report any changes.

For Dynamic Websites:

As far as dynamic sites are concerned, the BrowserSync now behaves as a proxy server. Now its command will be like:

browser-sync start --proxy "local.dev" --files "**/*"

And BrowserSync will start watching your dynamic site for changes.

Tunneling

Now it’s time to explain how you can share and showcase a work-in-progress project with its tunneling feature.

Each time you start BrowserSync, just enter the “-- tunnel” argument to it like:

browser-sync start --proxy "local.dev" --files "**/*" --tunnel

This command provides you with a set of the following information:

All these are the clickable URLs which can be shared both locally and globally. However, the URL for the BrowserSync UI’s has some fascinating facts to reveal. Click this link, and you’ll be directed to a new browser window from where you can configure all the BrwoserSync settings.

Wrapping Up!

Apart from this, BrowserSync offers several other exciting features like options, API, and recipes which you can find on their website.

Having the ability to perform all the actions which I’ve listed above, BrowserSync has helped me become a better developer and has brought consistency in my workflow.