Check Responsiveness With Casperjs

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.

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 🙂