Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    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()

    It starts Casper and performs the action on given URL

    Run Script

    Here is a command to get the website title.

    Save the above file as

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

    and in a result you get.

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

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

    Update your file with the code below

    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

    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.

    . . .


    Add Your Comment

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again