Take screenshots at different viewport sizes using CasperJS

fullpage.js

/*
* Takes provided URL passed as argument and make screenshots of this page with several viewport sizes.
* These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed
*
* Usage:
* $ casperjs screenshots.js http://example.com
*/

var casper = require("casper").create();

var screenshotUrl = 'http://google.com',
    screenshotNow = new Date(),
    screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()) + '-' + pad(screenshotNow.getHours()) + pad(screenshotNow.getMinutes()) + pad(screenshotNow.getSeconds()),
    viewports = [
      // {
      //   'name': 'smartphone-portrait',
      //   'viewport': {width: 320, height: 480}
      // },
      // {
      //   'name': 'smartphone-landscape',
      //   'viewport': {width: 480, height: 320}
      // },
      // {
      //   'name': 'tablet-portrait',
      //   'viewport': {width: 768, height: 1024}
      // },
      // {
      //   'name': 'tablet-landscape',
      //   'viewport': {width: 1024, height: 768}
      // },
      {
        'name': 'desktop-standard',
        'viewport': {width: 1280, height: 1024}
      },
      {
        'name': 'desktop-large',
        'viewport': {width: 2560, height: 1440}
      }
    ];

if (casper.cli.args.length < 1) {
  casper
    .echo("Usage: $ casperjs screenshots.js http://example.com")
    .exit(1)
  ;
} else {
  screenshotUrl = casper.cli.args[0];
}

casper.start(screenshotUrl, function() {
  this.echo('Current location is ' + this.getCurrentUrl(), 'info');
});

casper.each(viewports, function(casper, viewport) {
  this.then(function() {
    this.viewport(viewport.viewport.width, viewport.viewport.height);
  });
  this.thenOpen(screenshotUrl, function() {
    this.wait(1000);
  });
  this.then(function(){
    this.echo('Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
    this.capture('screenshots/' + screenshotDateTime + '/'  + viewport.viewport.width + 'x' + viewport.viewport.height + '-' + viewport.name + '.png');
  });
});

casper.run();

function pad(number) {
  var r = String(number);
  if ( r.length === 1 ) {
    r = '0' + r;
  }
  return r;
}

hero.sh

#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/solutions/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/solutions/alert-correlation/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/solutions/smart-collaboration/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/solutions/centralized-visibility/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/solutions/custom-views/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/case-studies/wix/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/detect/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/alert-correlation/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/custom-views/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/understand/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/collaborate/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/search/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/enriched-incidents/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/products/reports/
#casperjs viewport.js http://dev-bigpandaio.pantheonsite.io/resources/

#casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/solutions/
#casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/product/
#casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/detect/
#casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/understand/

# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/about-us/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/careers/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/case-studies/gap/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/case-studies/news-corp/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/case-studies/playtika/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/case-studies/wix/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/contact/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/integrations/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/pricing/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/product/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/alert-correlation/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/collaborate/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/custom-views/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/detect/

casperjs viewport.js http://test-bigpandaio.pantheonsite.io/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/solutions/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/solutions/alert-correlation/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/solutions/smart-ticketing/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/solutions/centralized-visibility/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/solutions/custom-views/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/product/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/detect/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/alert-correlation/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/custom-views/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/understand/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/search/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/enriched-incidents/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/reports/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/products/collaborate/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/integrations/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/pricing/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/resources/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/about-us/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/careers/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/case-studies/gap/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/case-studies/news-corp/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/case-studies/playtika/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/case-studies/wix/
casperjs viewport.js http://test-bigpandaio.pantheonsite.io/contact/


#
# http://test-bigpandaio.pantheonsite.io/products/enriched-incidents/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/reports/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/search/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/products/understand/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/request-a-demo
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/request-a-demo/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/best-practices/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/case-studies/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/news-and-press-releases/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/product-collateral/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/videos/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/webinars/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources_category/white-papers/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/resources/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/solutions/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/solutions/alert-correlation/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/solutions/centralized-visibility/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/solutions/custom-views/
# casperjs fullpage-responsive.js http://test-bigpandaio.pantheonsite.io/solutions/smart-ticketing/

screenshots.js

/*
* Takes provided URL passed as argument and make screenshots of this page with several viewport sizes.
* These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed
*
* Usage:
* $ casperjs screenshots.js http://example.com
*/

var casper = require("casper").create();

var screenshotUrl = 'http://google.com',
    screenshotNow = new Date(),
    screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()) + '-' + pad(screenshotNow.getHours()) + pad(screenshotNow.getMinutes()) + pad(screenshotNow.getSeconds()),
    viewports = [
      {
        'name': 'smartphone-portrait',
        'viewport': {width: 320, height: 480}
      },
      {
        'name': 'smartphone-landscape',
        'viewport': {width: 480, height: 320}
      },
      {
        'name': 'tablet-portrait',
        'viewport': {width: 768, height: 1024}
      },
      {
        'name': 'tablet-landscape',
        'viewport': {width: 1024, height: 768}
      },
      {
        'name': 'desktop-standard',
        'viewport': {width: 1280, height: 1024}
      }
    ];

if (casper.cli.args.length < 1) {
  casper
    .echo("Usage: $ casperjs screenshots.js http://example.com")
    .exit(1)
  ;
} else {
  screenshotUrl = casper.cli.args[0];
}

casper.start(screenshotUrl, function() {
  this.echo('Current location is ' + this.getCurrentUrl(), 'info');
});

casper.each(viewports, function(casper, viewport) {
  this.then(function() {
    this.viewport(viewport.viewport.width, viewport.viewport.height);
  });
  this.thenOpen(screenshotUrl, function() {
    this.wait(5000);
  });
  this.then(function(){
    this.echo('Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
    this.capture('screenshots/' + screenshotDateTime + '/'  + viewport.viewport.width + 'x' + viewport.viewport.height + '-' + viewport.name + '.png', {
        top: 0,
        left: 0,
        width: viewport.viewport.width,
        height: viewport.viewport.height
    });
  });
});

casper.run();

function pad(number) {
  var r = String(number);
  if ( r.length === 1 ) {
    r = '0' + r;
  }
  return r;
}

viewport.js

/*
* Takes provided URL passed as argument and make screenshots of this page with several viewport sizes.
* These viewport sizes are arbitrary, taken from iPhone & iPad specs, modify the array as needed
*
* Usage:
* $ casperjs screenshots.js http://example.com
*/

var casper = require("casper").create();

var screenshotUrl = 'http://google.com',
    screenshotNow = new Date(),
    screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()) + '-' + pad(screenshotNow.getHours()) + pad(screenshotNow.getMinutes()) + pad(screenshotNow.getSeconds()),
    viewports = [
      {
        'name': 'smartphone-portrait',
        'viewport': {width: 320, height: 480}
      },
      {
        'name': 'smartphone-landscape',
        'viewport': {width: 480, height: 320}
      },
      {
        'name': 'tablet-portrait',
        'viewport': {width: 768, height: 1024}
      },
      {
        'name': 'tablet-landscape',
        'viewport': {width: 1024, height: 768}
      },
      {
        'name': 'desktop-standard',
        'viewport': {width: 1280, height: 1024}
      },
      {
        'name': 'desktop-large',
        'viewport': {width: 2560, height: 1440}
      }
    ];

if (casper.cli.args.length < 1) {
  casper
    .echo("Usage: $ casperjs screenshots.js http://example.com")
    .exit(1)
  ;
} else {
  screenshotUrl = casper.cli.args[0];
}

casper.start(screenshotUrl, function() {
  this.echo('Current location is ' + this.getCurrentUrl(), 'info');
});

casper.each(viewports, function(casper, viewport) {
  this.then(function() {
    this.viewport(viewport.viewport.width, viewport.viewport.height);
  });
  this.thenOpen(screenshotUrl, function() {
    this.wait(2000);
  });
  this.then(function(){
    this.echo('Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
    this.capture('screenshots/' + screenshotDateTime + '/'  + viewport.viewport.width + 'x' + viewport.viewport.height + '-' + viewport.name + '.png', {
        top: 0,
        left: 0,
        width: viewport.viewport.width,
        height: viewport.viewport.height
    });
  });
});

casper.run();

function pad(number) {
  var r = String(number);
  if ( r.length === 1 ) {
    r = '0' + r;
  }
  return r;
}