javascript - casperjs:评估document.querySelector返回null

我在CasperJS中使用 waitForSelector() 和 captureSelector() 方法来等待并使用CSS选择器选择一个元素，然后保存其屏幕截图。

但是，我发现由于css background已设置为transparent，所以屏幕截图非常难看，所以我想将background设置为white。我已经在made sure调用中使用了document.querySelector的evaluate()，但这似乎不起作用。

这是我的脚本(您可以忽略casper.start(...之前的所有内容，我只是在下一个代码段的上下文中包含了开始部分):

var casper = require("casper").create({
  verbose: true,
  clientScripts: ["libs/jquery-1.10.2.js"]
});
var utils = require("utils");

var requiredOptions = [ 'url', 'selector', 'filename' ];
var missingOptions = new Array();

for (var i = 0 ; i < requiredOptions.length ; i++) {
  var opt =  requiredOptions[i];
  if (!casper.cli.has(opt)) {
    missingOptions.push(opt);
  }
}

if (missingOptions.length > 0) {
  casper.die("\nMissing the following CLI options: " + missingOptions.join(", ") + "\n\nExiting.\n");
}

var url = casper.cli.get('url');
var selector = casper.cli.get('selector');
var filename = casper.cli.get('filename');

casper.start(url, function() {
  this.waitForSelector(selector, function then() {
    var element = this.evaluate(function() {
      return document.querySelector(selector);
    });
    console.log(element); // returns null
    element.style.backgroundColor = "white"; // throws TypeError: 'null' is not an object (evaluating 'element.style')
    this.captureSelector("captures/" + filename, selector);
  }, function onTimeout() {
    this.die("URL timed out.");
  });
});

casper.run();

这是我传入URL，选择器和文件名以将屏幕截图写入以下内容时得到的输出:

yiqing:~/Repos/rectslice()$ casperjs slice.js --filename='screenshot.png' --url='https://github.com/n1k0/casperjs/issues/192' --selector='.discussion-bubble-inner'
null
TypeError: 'null' is not an object (evaluating 'element.style')
  /Users/yiqing/Repos/rectslice/slice.js:31 in then
  /Users/yiqing/Repos/rectslice:1329 in runStep
  /Users/yiqing/Repos/rectslice:332 in checkStep

注意:是的，我很清楚此屏幕快照效果很好(因为背景为白色)...我只是决定使用任何旧的url，因为我只是想说明document.query()调用不起作用。不能按预期工作。

另外，不确定版本是否相关，但无论如何这里都是:

yiqing:~/Repos/rectslice()$ casperjs --version
1.0.2
yiqing:~/Repos/rectslice()$ phantomjs --version
1.9.0

最佳答案

由于无法从evaluate()传递回DOM元素，您遇到了问题。但是，您可以直接使用评估块中的元素。

casper.start(url, function() {
  this.waitForSelector(selector, function then() {
    this.evaluate(function(sel) {
      document.querySelector(sel).style.backgroundColor = "white";
    }, selector);
    this.captureSelector("captures/" + filename, selector);
  }, function onTimeout() {
    this.die("URL timed out.");
  });
});

casper.run();

我已经在CasperJS 1.1-beta1上测试了它，但是它应该在> = 1.0.0的版本上工作

编辑:可以传回对象，但不能传回DOM元素。

关于javascript - casperjs:评估document.querySelector返回null，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17954923/