Reading list Switch to dark mode

    Check Responsiveness With Casperjs

    Updated 2 April 2018

    To test a website it’s really very hard to open every page, resize them and then take a look on the complete page by scrolling them. We need to make it an automation process so that it can save our time and can remove this restless process.

    Casperjs itself has so many predefined methods and by using them you can achieve it. You can follow the following code steps to write your own scripts-

    var casper      = require('casper').create(),
    siteUrl     = "https://store.webkul.com/",//your website's base URL
    urls       = [
        '',
        'Magento-2.html',
        'Magento-Extensions.html'
    ], //sub urls of your website
    screenWidth = [
        400, 
        600, 
        800, 
        1200
    ]; //your required width
    screenshotNow = new Date(),
    screenshotDateTime = (screenshotNow.getHours()) + ':' + (screenshotNow.getMinutes()) + ':' + (screenshotNow.getSeconds()),
    
    casper.start(siteUrl, function(){
    this.echo('Opening the site URL...', 'COMMENT');
    });
    
    urls.forEach(function(url) {
    casper.thenOpen(siteUrl + url, function() {
        var pageTitle = this.getTitle();
        screenWidth.forEach(function(currentWidth) {
            casper.viewport(currentWidth, 1000).capture('screenshots/' + pageTitle + ":" + screenshotDateTime + '/' + pageTitle + '_' + currentWidth + '.png', {
                top: 0,
                left: 0,
                width: currentWidth,
                height: casper.evaluate(function() {
                    return document.body.scrollHeight;
                })
            });
        });
        this.echo('Screenshots successfully captured for- ' + this.getCurrentUrl(), 'COMMENT');
    });
    });
    
    casper.run();

    Let me explain each step one by one-

    siteUrl     = "https://store.webkul.com/",//your website's base URL
    urls       = [
        '',
        'Magento-2.html',
        'Magento-Extensions.html'
    ], //sub urls of your website
    screenWidth = [
        400, 
        600, 
        800, 
        1200
    ]; //your required width

    Here, I have taken a variable and siteUrl and assigned my website’s Url to it. Make sure you assign your website’s base URL. Then we have taken an array of all the sub URL’s for which I need to check the responsiveness. I have written everything in the script but you can give the URL’s from command line also using “casper.cli.get(0)”.

    screenshotNow = new Date(),
    screenshotDateTime = (screenshotNow.getHours()) + ':' + (screenshotNow.getMinutes()) + ':' + (screenshotNow.getSeconds()),

    I am using this piece of code just to take the screenshot with the current date and time name.

    Start your headless eCommerce
    now.
    Find out More
    urls.forEach(function(url) {
    casper.thenOpen(siteUrl + url, function() {
        var pageTitle = this.getTitle();
        screenWidth.forEach(function(currentWidth) {
            casper.viewport(currentWidth, 1000).capture('screenshots/' + pageTitle + ":" + screenshotDateTime + '/' + pageTitle + '_' + currentWidth + '.png', {
                top: 0,
                left: 0,
                width: currentWidth,
                height: casper.evaluate(function() {
                    return document.body.scrollHeight;
                })
            });
        });
        this.echo('Screenshots successfully captured for- ' + this.getCurrentUrl(), 'COMMENT');
    });
    });

    Now, I am opening each Url one by one using “forEach” and “casper.thenOpen”.

    “var pageTitle = this.getTitle();” is used just to take screenshot with the current page title.

    “casper.viewport();” allows to change the current view port size.

    “casper.capture();” allows you to capture the current page.

    Hope, this blog will help you. If you have any doubt then please leave a comment here.

    Thank you 🙂

     

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home