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();
Now you can view all your screenshot check at one place,
Share or update your layout where you find the issue and fixed it.
Know more about CasperJS and you find anything more interesting let me know,
Thanks for reading.
Be the first to comment.