How to Test Website Across Multiple Browsers and Devices Synchronously

By . Filed in Web Design

Responsive Web Design (RWD) is now a common approach in building a mobile friendly website. But building a responsive website can be quite irritating when you have to test the website in multiple devices and screen-sizes.

Say you have three devices to run the test on, you may end up having to constantly refresh each browser in every of those devices, which is cumbersome, to say the least.

So the idea of “synchronized testing” has emerged to address this situation and make the workflow more streamlined. There is a Grunt plugin called Browser Sync to perform this, and we are going to show you how to deploy it in your project, in this post.

Why Use Browser Sync?

First off, I’m not saying that Browser Sync is the perfect tool. There are also a number of GUI Applications such as Adobe Edge Inspect and Ghostlab which are great tools as well. They both have a nice GUI, but here’s why I think Browser Sync is better than these Applications:

1) Browser Sync (as well as Grunt) is free which helps if you have little to no budget to work with.

2) It is open-source. Depending on your JavaScript and Node.js proficiency you can extend it to cater to your own specific requirements.

3) It is cross-platform. You can use it in Windows, OS X and Linux. Ghostlab, on the other hand, is only available in OS X and Windows.

Installation

To start off, we are going to install the Grunt plugin called Browser Sync. I’m sure the name says it all; this plugin syncs a number of interactions that occur on the website including page scrolling, populating form fields, and clicking on links.

All these actions will be reflected in the other browsers and devices as they are happening. Type the following command to install Browser Sync in your working directory:

npm install grunt --save-dev
npm install grunt-browser-sync --save-dev

Configuration

Once installed, Browser Sync can be loaded within the Gruntfile.js, this way.

module.exports = function(grunt) {
	grunt.initConfig({
		browser_sync: {
			dev: {
				bsFiles: {
					src : 'navbar-fixed-top.css',
				},
				ghostMode: {
                    clicks: true,
                    scroll: true,
                    links: true,
                    forms: true,
                },
			},
		},
	});
	grunt.loadNpmTasks('grunt-browser-sync');
};

This configuration will monitor the navbar-fixed-top.css file and automatically refresh the browser when it’s changed. We should also enable ghostMode to keep track of interactions on the website.

Note: Browser Sync also provides a number of other configurations, you can check them out in detail on this page. For the time being, the above configuration should suffice for the project example in this article.

Once the configuration is set, go to Terminal (or Command Prompt) and run the task using the following command:

grunt browser_sync

After running the command, you will be prompted to add three line of scripts within the <head> tag.

Also, when you view your website in multiple browsers, it also records those browsers, and notifies you in Terminal. In this case, I opened the website in Chrome, Safari, and Mobile Safari (through iPhone Simulator).

Check It Out

Now, as you can see from the following animated GIF, all updates, changes, and interactions are synced in real time in all the browsers.

Further Resources

Here are more resources to dig further into Grunt and “Synchronized Testing”.

Author:

Thoriq is a writer for hongkiat.com. He is also a web developer with very unpredictable sleep cycle.

Advertisement

Comments are closed. Contact Us.