casperjs：document.querySelectorを評価するとnullが返される

Question

私はCasperJSでwaitForSelector()とcaptureSelector()メソッドを使用して、CSSセレクタを使用して要素を選択してからスクリーンショットを保存します。

しかし、私は、CSS backgroundがtransparentに設定されているので、スクリーンショットはかなり醜い判明することを発見していますので、私はbackgroundwhiteに設定したいと思います。私はをdocument.querySelectorというevaluate()コールで使用していますが、それはうまくいかないようです。

はここ（あなたが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 

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要素をバックに渡すことができます。