Menu Close
    Searching for an experienced eCommerce & Marketplace Development Company ?

    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.

    Single File

    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,

    multiple file

    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.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top