5

CasperJSのwaitForSelector()andメソッドを使用して、CSS セレクターを使用して要素を待機および選択し、そのスクリーンショットを保存しています。captureSelector()

ただし、cssbackgroundが に設定されているため、スクリーンショットがかなり見苦しいことがわかったので、 を に設定しtransparentたいと思います。evaluate()呼び出しで使用していることを確認しましたが、うまくいかないようです。backgroundwhitedocument.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()はい、私はこのスクリーンショットが (背景が白であるという点で) うまくいくことをよく知っています...呼び出しが機能しないことを説明しようとしているだけなので、古い URL を使用することにしました。期待される。

また、バージョンが関連しているかどうかはわかりませんが、とにかくここにあります：

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

1 に答える 1

9

から 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 要素を返すことはできません。

于 2013-07-30T19:33:49.073 に答える