---
title: BrowserSync - A Tool to Streamline Manual testing
description: How to use BrowserSync to make manual testing as fast as possible.
image: https://blog.avenuecode.com/hubfs/farzad-nazifi-71686.jpg
---

[AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact)

[![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/?hsLang=en-us) *menu*

- Technology
  
  [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us)
  
  [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us) [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us)
- [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us)
- [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us)
- [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us)
- [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us)

- [Cloud](https://blog.avenuecode.com/blog/topic/cloud?hsLang=en-us)
- [Design](https://blog.avenuecode.com/blog/topic/design?hsLang=en-us)
- [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us)
- [Solution Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us)
- [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us)
- [Data & ML](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us)
- [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us)
- [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us)
- [Quality First](https://blog.avenuecode.com/blog/topic/quality-first?hsLang=en-us)
- [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us)
- [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us)
- [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us)
- [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us)

# [BrowserSync - A Tool to Streamline Manual testing](https://blog.avenuecode.com/how-browsersync-helps-your-manual-testing)

- [Tweet](https://twitter.com/share)

*perm\_identity* [Renata Andrade](https://blog.avenuecode.com/how-browsersync-helps-your-manual-testing/author/renata-andrade?hsLang=en-us)

*schedule* 8/22/17 4:00 PM

For many, **manual cross-browser testing** takes a lot of time and is a boring, repetitive job. Here is a practical example of how BrowserSync helps us test **different browsers at the same time** without any programming**.** In this blog, we're going to set it up and explore some good examples of where it's utilized. Here we go!

**What does it do?**

[BrowserSync](https://browsersync.io/) is an npm package that has the power to synchronize file changes and interactions across multiple browsers and devices.

By*"synchronizing file changes and interactions across multiple browsers and devices",* that means almost everything you do in one browser is **watched and performs on other browsers and devices that you are connected to via BrowserSync.** 

You can open your IE, Chrome, and Safari on an iPhone at the same time, do whatever you need to do on one of them, and watch the same action be executed on the other browsers. You don't have to develop or maintain any steps because it's not an automation tool; it's a tool for manual testing, therefore, you can just 'plug and play'.

This is a big help when you have to check responsive designs, scrolling, clickable links, or images, etc. Awesome, right?

![browsersync2.gif](https://blog.avenuecode.com/hs-fs/hubfs/browsersync2.gif?width=912&height=518&name=browsersync2.gif)

This is all possible because of the injection of an asynchronous script tag (<script async>...</script>) right after the <body> tag during the initial request. By now, we understand that the <body> tag must be present in order for this process to work. 

**How do we set it up?**

It has an extremely simple setup. Let's check it out.

Since it is a Node.js package, you might want to go [here](https://nodejs.org/) and make sure you have it installed.

Assuming the previous step has been completed, just input: 

```
npm install -g browser-sync
```

And that's it, we're all set!

**Now what?**

There are 2 ways to use it:

**1. You have the project source running on your local machine.**  
If this is the case, just run it inside the project folder (it requires the css folder with the .css files inside).

```
browser-sync start --server --files "css/*.css"
```

![favicon-16x16.png](https://blog.avenuecode.com/hs-fs/hubfs/favicon-16x16.png?width=16&height=16&name=favicon-16x16.png)For this option, you can also have the LiveReload working simultaneously. You can go ahead and implement a css change and watch it re-load instantaneously on your browser without having to refresh. 

![browsersync3.gif](https://blog.avenuecode.com/hs-fs/hubfs/browsersync3.gif?width=912&height=514&name=browsersync3.gif)

**2. You have the project source running on somewhere else**  
For this, go ahead and run:

```
browser-sync start --proxy [URL] --files "css/*.css, *.html"
```

Replace \`\[URL\]\` with your project URL.  
Example: browser-sync start --proxy https://www.avenuecode.com/ --files "css/\*.css, \*.html"

Open at least 2 browsers/devices on \`https://localhost:3000\` and have fun!

It works well with scroll, clicks (using xpath), field fill, Browserstack, devices under the same network, and tunnel for devices out of the network. 

It doesn't work with mouse hover, and I have also found that it loses connection far too often with Safari.

| You can also run the commands by changing the default values. Read more about [BrowserSync start here](https://browsersync.io/docs/command-line#start). |
| --- |

 **More Features**

Besides InteractionSync, it has some other awesome features:  
![bs1.png](https://blog.avenuecode.com/hs-fs/hubfs/bs1.png?width=912&height=388&name=bs1.png)

**UI, Network Throttle, and URL history**

To open the BrowserSync UI, just access [http://localhost:3001](http://localhost:3001) on your browser.

On the UI, you can see all the URLs that you can connect to BrowserSync, manage the Sync options such as mirroring clicks, see the URL history, add plugins, debug remotely, and set the Network Throttle. Take the time to explore these features!

![browsersyncimg.png](https://blog.avenuecode.com/hs-fs/hubfs/browsersyncimg.png?width=912&height=735&name=browsersyncimg.png)

 **Conclusion**

It has been extremely helpful working with BrowserSync because it allows me to do all my tasks at once.

I'd love to hear your feedback on this tool. How does it work for you? Does it help with efficiency? Let's chat and see how we can further improve this tool. 

---

### Author

# Renata Andrade

 Renata Andrade is a QA Engineer at Avenue Code. She is passionate about software quality and making things easier. She's also an active member of the quality community in Brazil and a lover of sharing knowledge.

---

### Related Posts

### How to Build Unit Tests Using Jest

[READ MORE](https://blog.avenuecode.com/how-to-build-unit-tests-using-jest?hsLang=en-us)

### How Heuristics Can Improve Your Tests

[READ MORE](https://blog.avenuecode.com/how-heuristics-can-improve-your-tests?hsLang=en-us)

### How to Use WireMock for Integration Testing

[READ MORE](https://blog.avenuecode.com/how-to-use-wiremock-for-integration-testing?hsLang=en-us)

### The Best Way to Use Request Validation in Laravel REST API

[READ MORE](https://blog.avenuecode.com/the-best-way-to-use-request-validation-in-laravel-rest-api?hsLang=en-us)

### Leave a Comment!

### Avenue Code Social

[![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode)

[![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode)

[![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenue-code)

### Newsletter

Want to stay on top of all tips and news from Avenue Code?

### Popular Snippets

![Primary Logo AvenueCode Inverted.png](https://blog.avenuecode.com/hs-fs/hubfs/Images/Logos/Primary%20Logo%20AvenueCode%20Inverted.png?width=1180&name=Primary%20Logo%20AvenueCode%20Inverted.png "Primary Logo AvenueCode Inverted.png")

### About Us

- [Who We Are](https://www.avenuecode.com/who-we-are)
- [What We Do](https://www.avenuecode.com/what-we-do)
- [Portfolio](https://www.avenuecode.com/portfolio)
- [Partners](https://www.avenuecode.com/partners)
- [News](https://www.avenuecode.com/news)
- [Events](https://www.avenuecode.com/events)
- [Blog](https://blog.avenuecode.com/)
- [Contact](https://www.avenuecode.com/contact)

### Our Offices

San Francisco

[+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com)

Belo Horizonte

[+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com)

São Paulo

[+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com)

### We're Hiring!

- [Belo Horizonte](https://www.avenuecode.com/who-we-are)
- [New York](https://www.avenuecode.com/what-we-do)
- [San Francisco](https://www.avenuecode.com/portfolio)
- [São Paulo](https://www.avenuecode.com/partners)

---

©2015 - 2017 Avenue Code

[![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay)

Please enable JavaScript to view the [comments powered by Disqus.](http://disqus.com/?ref_noscript)

© 2026 Avenue Code

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Renata Andrade",
    "url" : "https://blog.avenuecode.com/author/renata-andrade"
  },
  "datePublished" : "2017-08-22T19:00:00.000Z",
  "headline" : "BrowserSync - A Tool to Streamline Manual testing",
  "image" : [ "https://blog.avenuecode.com/hubfs/farzad-nazifi-71686.jpg" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.avenuecode.com/how-browsersync-helps-your-manual-testing",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_LOGO%20HORIZONTAL%20group%201-7.png"
    },
    "name" : "Avenue Code"
  }
}
```