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元素。