multibrowser screenshots with casperjs

casperjs-multibrowser-screenshots.js

var casper = require('casper').create({
    viewportSize: {
        width: 1024,
        height: 768
    }
});

var webpage = "http://wordpress.org/";

var useragents = [
    'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.56 Safari/536.5',
    'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1',
    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2',
    'Opera/9.80 (Windows NT 5.1; U; en) Presto/2.10.229 Version/11.60',
    'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)',
    'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; en-GB)',
    'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)',
    'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)'
];

var browsers = [
    'Chrome',
    'Firefox',
    'Safari',
    'Opera',
    'IE9',
    'IE8',
    'IE7',
    'IE6'
];

casper.on('resource.requested', function(resource) {
    //this.echo('resource requested:'+resource.url);

    //show User-Agent headers for each resource
    for (var obj in resource.headers) {
        var name = resource.headers[obj].name;
        var value = resource.headers[obj].value;
        if (name == "User-Agent"){
            this.echo(value);
        }
    }

});



casper.start();

casper.each(useragents, function(self, agent, i) {

    casper.wait(3000, function() {

        casper.userAgent(agent);

        casper.thenOpen(webpage, function() {
            var filename = browsers[i]+".png";
            this.capture(filename, {top: 0,left: 0,width: 1024,height: 768});
            this.echo(filename);
        });
    });

});

casper.run(function() {
    this.echo('Done.').exit();
});

Blog post about this gist: http://techslides.com/using-casperjs-to-make-multibrowser-screenshots/