CasperJS Screenshotting Different URLs

Vote count:

0

I've just started using CasperJS so I'm pretty stuck on an issue.

What I want to do is load a URL (Login protected), find a list of links (Which change the theme of the forum, specifically this part: ".styleChooser .overlayScroll li a"), click each of them and screenshot the result of the page after the click at two resolutions.

My code is currently just a grouping of other suggestions around the net trying to get this working, however I believe all the necessary code is basically there I just can't get it working. Any help would be very much appreciated!

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

var screenshotUrl = "http://ift.tt/1yHlt55";
var screenshotPaths = "rivals";

function getLinks() {
  var links = document.querySelectorAll('.styleChooser .overlayScroll li a');
  links = Array.prototype.map.call(links,function(link){
    return link.getAttribute('href');
  });
  return links;
}

screenshotNow = new Date(),
screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()),
viewports = [
{
  'name': 'smartphone-portrait',
  'viewport': {width: 320, height: 480}
},
{
  'name': 'desktop-standard',
  'viewport': {width: 1280, height: 1024}
}
];
i = -1;

casper.start();

casper.setHttpAuth('Username ', 'Password');

casper.then(screenshotUrl, function(response) {
  var linksArray = this.evaluate(getLinks);
  this.eachThen(linksArray, function(response) {
    var url = response.data;
    this.each(viewports, function(casper, viewport) {
      this.then(function() {
        this.viewport(viewport.viewport.width, viewport.viewport.height);
      });
      this.thenOpen(url, function() {
        this.wait(5000);
      });
      casper.then(function(){
        casper.echo('Screenshot for '+ screenshotPaths + '/' + "homepage "  + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
        casper.capture('screenshots/' + screenshotPaths + '/' + screenshotDateTime + '/' + "homepage" + '/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png', {
          top: 0,
          left: 0,
          width: viewport.viewport.width,
          height: viewport.viewport.height
        });
      });
    });
  });
  ++i;
});
casper.run();

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

asked 1 min ago

Eric Jackson

1

CasperJS Screenshotting Different URLs