Take screenshots at different viewport sizes using CasperJS

screenshots.coffee

###
# 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
#
# Original gist by nhoizey: https://gist.github.com/nhoizey/4060568
#
# Usage:
# $ casperjs screenshots.coffee [--atf] [--url=URL]
# with SlimerJS - it has better feature support than the default PhantomJS
# $ casperjs --engine=slimerjs test.coffee [--atf] [--url=URL]
# --atf is a boolean options and stands for 'Above the fold'
###

casper = require('casper').create()
screenshotUrl = 'http://localhost:8080/'
screenshotDateTime = new Date().toISOString().replace(/[A-Za-z]/,'@').substring(0,19)
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
  }
]

# Options
CAPTURE_FULLPAGE = true
if casper.cli.get('atf')
  casper.echo 'Will capture only above the fold content'
  CAPTURE_FULLPAGE = false
else

if casper.cli.get('url')
  screenshotUrl = casper.cli.get('url')
  casper.echo 'URL will be: '+screenshotUrl
else
  casper.echo 'URL not specified, getting localhost:8080'


casper.start screenshotUrl, ->
  # @echo 'Current location is ' + @getCurrentUrl(), 'info'

casper.each viewports, (casper, viewport) ->
  @then ->
    @viewport viewport.viewport.width, viewport.viewport.height
  @thenOpen screenshotUrl, ->
    @wait 4000
  @then ->
    @echo 'Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info'
    if CAPTURE_FULLPAGE
      @capture 'screenshots/' + screenshotDateTime + '/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png'
    else
      @capture 'screenshots/' + screenshotDateTime + '/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png',
        top: 0
        left: 0
        width: viewport.viewport.width
        height: viewport.viewport.height

casper.run()