PhantomJS screenshots, multiple widths.

screenshot2.js

var URLS = ["https://test-clas3.ws.asu.edu/",
            "https://dev-clas3.ws.asu.edu/",
            "https://live-clas3.ws.asu.edu/"
          ];

var SCREENSHOT_WIDTH = 1280;
/*!
 *
 * Automatic Responsive screenshots creation with PhantomJS and CasperJS.
 * Adapted from the Responsive Design Workflow book by Stephen Hay (http://responsivedesignworkflow.com/).
 *
 * Usage instructions:
    - Install PhantomJS (http://phantomjs.org/) and CasperJS (http://casperjs.org/)
    - Save this script as `screenshots-multipages.js` in a folder somewhere in your filesystem
    - In the same folder, create a subfolder called `screenshots` (defined in `screenshotFolder` variable)
    - Define the URLs you want to process in `baseUrl` (string) and `links` (array) variables
    - Define your breakpoints in `breakpoints` (array) variable
    - In your terminal go to the folder where `screenshots-multipages.js` lives, and run

        $ casperjs screenshots-multipages.js

 * Your screenshots are generated in `screenshots` folder.
 *
 */

var casper      = require('casper').create(),
    baseUrl     = "https://clas.asu.edu/",
    screenshotFolder = 'screenshots',
    links       = [
        '', // an empty string means the home page
        '/degrees',
        '/degrees/undergrad',
        '/degrees/grad',
    ],
    breakpoints = [
        400,
        600,
        768,
        900,
        992,
        1200
    ];

casper.start();

function nameFile(link, breakpoint) {
    var name;
    if (link === '') {
        name = 'live-site-width';
    } else {
        name = link;
    }
    return screenshotFolder + '/' + name.replace(/\//g, '_') + breakpoint + '.png';
}

links.forEach(function (link) {
    casper.thenOpen(baseUrl + link, function () {
        breakpoints.forEach(function (breakpoint) {
            casper.viewport(breakpoint, 800).capture(nameFile(link, breakpoint), {
                top: 0,
                left: 0,
                width: breakpoint,
                height: casper.evaluate(function() {
                    return document.body.scrollHeight;
                })
            });
        });
    });
});

casper.run();