Test Website All Over Multiple Browsers

When creating a responsive website, we need to test it in several screen sizes to make sure that the Site layout is rendered correctly on these different screen sizes. We can use the screen size and the device emulator in Chrome, which is quite convenient. However, there is nothing better than testing the website on a real device, because it offers an environment so close to our users.

However, testing on multiple devices is also a problem. Assuming that we have three devices on which we can test the Site, each time we have just made a change, we may have to constantly update each browser on each of these devices, which, as you can imagine, is cumbersome.

The idea of synchronized tests was born to cope with this situation and streamline the workflow. There is a grumbling Plugin called BrowserSync to do this, and we will show you in this article how to deploy it in your project.

BrowserSync is Open Source and is actively being developed. It’s cross-platform. You can use it on Windows, OS X and Linux. Ghostlab, on the other hand, is only available on OS X and Windows. BrowserSync is free, which will help you if you have little or no budget to work with it. Let’s easily see how BrowserSync works.

Installation

To begin with, we will use grunts. We need to make sure that the Grunt CLI as well as the Grunt BrowserSync Plugin are installed. This plugin synchronizes a number of interactions that occur on the site, including scrolling the page, filling in form fields and clicking on links.

All these actions are displayed in other browsers and devices once they are performed. Type the following command to install BrowserSync in your working directory:

Configuration

After Installation, Download BrowserSync in the Grunt file.js

This configuration monitors the style.css and The Index.html and automatically updates the browser when it detects a change in these files. We also allow ghostMode to synchronize interactions on the site, such as scrolling and clicking.

Everything is ready. Now we perform the grunt to launch the BrowserSync task that we have already defined in the configuration.
Unlike the old Version, the new BrowserSync now configures everything for use, including the static server, and provides the URLs under which it is located to reload our Site.

And you can see from the following animated GIF that all updates, changes and interactions are synchronized in real time in the browser when you edit the Index.html and style.CSS.