Question

好的，这里的想法是截取用户每天如何看到我的网站的截图。所以现在除了为网站添加不同的链接之外，我还能正常工作！（我的所有网站都遵循相同的路径）。您将在下面看到我有一条评论，显示打破代码运行的文件。

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

var screenshotUrls = ["http://www.example.com", "http://www.facebook.com", "http://www.google.com"];

var screenshotPaths = ["example.com", "facebook.com", "google.com"];
var screenshotLinks = ["/jobs/1", "/jobs/2"];
        screenshotNow = new Date(),
        screenshotDateTime = screenshotNow.getFullYear() + pad(screenshotNow.getMonth() + 1) + pad(screenshotNow.getDate()),
        viewports = [
          {
            'name': 'smartphone-portrait',
            'viewport': {width: 320, height: 3480}
          },
          {
            'name': 'smartphone-landscape',
            'viewport': {width: 480, height: 3320}
          },
          {
            'name': 'tablet-portrait',
            'viewport': {width: 768, height: 3024}
          },
          {
            'name': 'tablet-landscape',
            'viewport': {width: 1024, height: 3768}
          },
          {
            'name': 'desktop-standard',
            'viewport': {width: 1280, height: 3024}
          }
        ];
    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(3500);
        });

        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 + '/'  + 'homepage/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png', {
                    top: 0,
                    left: 0,
                    width: viewport.viewport.width,
                    height: viewport.viewport.height
            });
        });
//Below is the part that breaks
        this.each(screenshotLinks, 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(3500);
                });

                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 + '/'  + screeenshotLinks[i] + '/' + 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;
}

Answer 1

我想你可能想在这里简化一些事情。你错过的一件事是在打开时将父网址附加到screenshotLinks。我简化了一些事情。但我相信它可以变得更好。不过，它的工作原理:)。但有一点需要注意的是，由于使用相同的WebPage对象，此代码将占用大量内存。

    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"];
    var screenshotLinks = ["/jobs/1", "/jobs/2"];
        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(); 
    casper.start().eachThen(screenshotUrls, 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[i] + '/' + "homepage "  + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
      casper.capture('screenshots/' + screenshotPaths[i] + '/' + screenshotDateTime + '/' + "homepage" + '/' + viewport.name + '-' + viewport.viewport.width + 'x' + viewport.viewport.height + '.png', {
            top: 0,
            left: 0,
            width: viewport.viewport.width,
            height: viewport.viewport.height
        });
      });

      this.eachThen(screenshotLinks , function(path){
           var pathName = path.data;
          this.echo("Opening URL: " + url + pathName);
          this.thenOpen(url + pathName, function() {
            this.wait(5000);
          });
          this.then(function(){
            this.echo('Screenshot for '+ screenshotPaths[i] +  pathName + " " + viewport.name + ' (' + viewport.viewport.width + 'x' + viewport.viewport.height + ')', 'info');
            this.capture('screenshots/' + screenshotPaths[i] + '/' + screenshotDateTime + '/' + pathName + '/' + 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;
    }

截取具有不同视口的多个网站和站点链接的屏幕截图

1 个答案: