Check Responsive Layout – CasperJS

Hello Designers, I am going to discuss the fastest way to cross-check your layout on different size of devices using the browser for responsive layouts.

Before I used to create different sizes of devices in my browser to check the layout. It’s fine with the small website but when the count of pages increased it really hard to manage.

Then I come to know about Casper.js, it’s really awesome. It is a smart way to check the layout at various viewports.

You have to install Casper on your machine. Read Installation guide from Casper.

Once your setup is completed, Now you are ready to see the magic of Casper

To test or run Casper script, you need a .js file having Casper script and a terminal to run this .js file.

Let’s start with a simple example. Fetching website title

To create a Casper instance, use the function create()

var casper = require('casper').create();

It starts Casper and performs the action on given URL

start(String url[, Function then])

Run Script

casper.run();

Here is a command to get the website title.

var casper = require('casper').create();

casper.start('https://mobikul.com/');

casper.then(function() {
this.echo('Title of Page: ' + this.getTitle());
});
casper.run();

Save the above file as

simple.js

Open the terminal and navigate to the path where you save the file and run the command.

casperjs simple.js

and in a result you get.

Mobikul - Open Code Mobile application for your eCommerce Store & Marketplace

It’s really cool, Let’s move to capture a screenshot. To define port use this function.

viewport(number width, number height);

Function to capture the screenshot and define the path to save is:

capture(String targetFilepath)

Update your file with the code below

var casper = require('casper').create();

casper.start('https://mobikul.com/');

casper.then(function() {

varname=this.getTitle();

this.viewport(1024,640);

this.capture('screenshots/1024-'+name+'.png');

this.echo('Capturing done');

});

casper.run();

You will find a folder in the same directory where you saved the script. Find a screenshot of your site with size 1024.

Now, if we want multiple size screenshot then we have to use this code of syntax

var casper = require('casper').create();

casper.start('https://mobikul.com/');


casper.then(function() {

varname=this.getTitle();

this.viewport(1024,640);

this.capture('screenshots/1024-'+name+'.png');


this.viewport(1366,765);

this.capture('screenshots/1366-'+name+'.png');


this.viewport(1920,1080);

this.capture('screenshots/1920-'+name+'.png');


this.viewport(960,540);

this.capture('screenshots/960-'+name+'.png');


this.viewport(320,549);

this.capture('screenshots/320-'+name+'.png');


this.viewport(360,640);

this.capture('screenshots/360-'+name+'.png');


this.viewport(480,854);

this.capture('screenshots/480-'+name+'.png');


this.echo('Capturing done');

});

casper.run();