CasperJS截图不同的URL

时间:2015-01-20 22:15:33

标签: javascript phantomjs casperjs

我刚刚开始使用CasperJS,所以我很难解决问题。

我想要做的是加载一个URL(登录保护),找到一个链接列表(这会改变论坛的主题,特别是这部分:" .styleChooser .overlayScroll li a"),单击两个分辨率后单击每个并截取页面结果。

我的代码目前只是围绕网络尝试使其工作的一组其他建议,但我相信所有必要的代码基本上都在那里,我只是不能让它工作。非常感谢任何帮助!

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

var screenshotUrl = "URL Here";
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.thenOpen(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;
}); // error is here
casper.run();

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

这就是错误:

C:\xampp\htdocs\caspertest>casperjs newestcasper.js
CasperError: You can only define a step as a function
  C:/casperjs/modules/casper.js:1755 in then
  C:/xampp/htdocs/caspertest/newestcasper.js:52
Unsafe JavaScript attempt to access frame with URL about:blank from frame with U
RL file:///C:/casperjs/bin/bootstrap.js. Domains, protocols and ports must match
.

1 个答案:

答案 0 :(得分:1)

如果您要打开要截取屏幕截图的页面,则应使用thenOpen。现在,你使用的then只是一个步骤函数而没有打开任何东西。

casper.thenOpen(screenshotUrl, function(response) {