casperjs：评估document.querySelector返回null

Question

我使用CasperJS中的waitForSelector()和captureSelector()方法来使用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 

注：是的，我很清楚地知道，这张截图证明罚款（背景为白色）...我只是决定使用任何旧的网址，因为我只是试图说明document.query()调用不能按预期工作。

而且，不知道该版本是相关的，但在这里，他们无论如何是：

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

Answer 1

你碰到的问题，因为你不能从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-β1，但它应该与版本一起使用> = 1.0.0

编辑：可以传回的对象，而不是DOM元素。