我正在使用 waitForSelector()
和 captureSelector()
CasperJS 中等待并使用 CSS 选择器选择元素的方法,然后保存它的屏幕截图。
但是,我发现因为 css background
已经被设置为 transparent
,截图变得很丑,所以我想设置 background
到 white
。我有 made sure我在 evaluate() 中使用 document.querySelector
打电话,但这似乎不起作用。
这是我的脚本(你可以忽略 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 元素。但是,您可以直接使用评估 block 内的元素。
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/