screenshot - 为多个网站拍摄多个视口(viewport)屏幕截图

Question

好的，我正在尝试为多个网站运行多个屏幕截图!我已经获得了多个站点的一个屏幕截图，我还可以获得一个站点的多个 Viewport 屏幕截图，但我有 34 个站点需要这样做!那么有人知道用 casperjs 做到这一点的方法吗？这是我认为可行的代码，但只执行第一个 url，然后就结束了!

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

var screenshotUrls = ["http://www.google.com", "http://www.yahoo.com", "http://www.espn.com"];

var screenshotPaths = ["google.com", "yahoo.com", "espn.com"];
    screenshotNow = new Date(),
    screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()),
    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}
      }
    ];
i = 0; 
//casper.start(); 
casper.start(screenshotUrls[i], function(self, screenshotUrl) {
  this.echo('Current location is ' + this.getCurrentUrl(), 'info');
});

casper.each(viewports, function(casper, viewport) {
  this.then(function() {
    this.viewport(viewport.viewport.width, viewport.viewport.height);
  });
  this.thenOpen(screenshotUrls[i], function() {
    this.wait(5000);
  });
  this.then(function(){
    this.echo('Screenshot for ' + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
    this.capture('screenshots/' + screenshotPaths[i] + '/' + 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();

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

Answer 1

这是工作版本:

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

    var screenshotUrls = ["http://www.google.com", "http://www.yahoo.com", "http://www.espn.com"];

    var screenshotPaths = ["google.com", "yahoo.com", "espn.com"];
        screenshotNow = new Date(),
        screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()),
        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}
          }
        ];
    i = -1;
    casper.start().eachThen(screenshotUrls, function(response) {

    this.each(viewports, function(casper, viewport) {
      this.then(function() {
        this.viewport(viewport.viewport.width, viewport.viewport.height);
      });
      this.thenOpen(response.data, function() {
        this.wait(5000);
      });
      this.then(function(){
        this.echo('Screenshot for '+ screenshotPaths[i]  + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
        this.capture('screenshots/' + screenshotPaths[i] + '/' + screenshotDateTime + '/' + 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;
    }