Welcome back! I, Anubhav Sachan, am here again with another guide
“How to Test Website across Multiple Browsers and Devices Synchronously”.
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 Iam 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, you would
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.
I would be happy to hear from you. You may send your Suggestions,Advices etc. on contac ifo at Developers page.
Thank You !