Capture Screenshot with PhantomJS for RWD test

Here is a little script that could be used to capture screenshots for a responsive webpages with different view-ports and save them as *.png


var async = require('async'),
sizes = [
[320, 480],
[320, 568],
[600, 1024],
[1024, 768],
[1280, 800],
[1440, 900]
];


function capture(sizes, callback) {
var page = require('webpage').create();
page.viewportSize = {
width: sizes[0],
height: sizes[1]
};


page.zoomFactor = 1;
page.open('http://werkstatt.autoscout24.de', function (status) {
var filename = sizes[0] + 'x' + sizes[1] + '.png';
page.render('./screenshots/' + filename);
page.close();
callback.apply();
});
}


async.eachSeries(sizes, capture, function (e) {
if (e) console.log(e);
console.log('Captured');
phantom.exit();
});

Have fun

Advertisements