[英]casperjs: evaluating document.querySelector returns a null
我正在使用waitForSelector()
和captureSelector()
方法等待並使用CSS選擇器選擇元素,然后保存它的屏幕截圖。
但是,我發現因為css background
設置為transparent
,截圖結果非常難看,所以我想將background
設置為white
。 我確保我在evaluate()調用中使用document.querySelector
,但這似乎不起作用。
這是我的腳本(您可以在casper.start(...
之前忽略所有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,selector和filename以將屏幕截圖寫入以下內容時得到的輸出:
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元素。 但是,您可以直接使用evaluate塊內的元素。
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元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.