casperjs：评估document.querySelector返回null [英] casperjs: evaluating document.querySelector returns a null

问题描述

我正在使用 waitForSelector（） 和 CasperJS中的captureSelector（） 方法等待并使用CSS选择器选择一个元素，然后保存其截图。

I'm using the waitForSelector() and captureSelector() methods in CasperJS to wait for and select an element using a CSS selector, then save a screenshot of it.

但是，我发现，因为css 背景已经设置为透明，屏幕截图非常丑陋，所以我想将背景设置为 white 。我已经确保我使用了 document.querySelector 在评估（）通话中，但这似乎不起作用。

However, I'm finding that because the css background has been set to transparent, the screenshot turns out pretty ugly, so I'd like to set the background to white. I've made sure that I'm using document.querySelector in an evaluate() call, but that doesn't seem to work.

这是我的脚本（您可以忽略 casper.start之前的所有内容（... ，我刚刚包含了开始下一个代码段的上下文的一部分）：

Here's my script (you can ignore everything before casper.start(..., I just included the beginning part for context for the next code snippet):

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，selector和filename来写的时候输出的截图：

And this is the output I get when I pass in a url, selector, and filename to write the screenshot to:

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 （）呼叫不按预期工作。

Note: Yes, I am well aware that this screenshot turns out fine (in that the background is white)... I just decided to use any old url, since I'm only trying to illustrate that the document.query() call doesn't work as expected.

另外，不知道这些版本是否相关，但是在这里，无论如何：

Also, not sure if the versions are relevant, but here they are anyway:

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

推荐答案

你遇到问题，因为你不能从 evaluate（）传回DOM元素。您可以直接使用评估块内的元素。

You are running into issues because you can't pass back DOM elements from evaluate(). You can work directly with the element inside of the evaluate block however.

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

I've tested this on CasperJS 1.1-beta1, but it should work with versions >= 1.0.0

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

Edit: Can pass back objects, but not DOM elements.

这篇关于casperjs：评估document.querySelector返回null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！