casperjs: auswerten document.querySelector gibt null zurück

Question

Ich verwende die Methoden waitForSelector() und captureSelector() in CasperJS, um auf ein Element mit einem CSS-Selektor zu warten und es auszuwählen, und speichere dann einen Screenshot davon.

aber ich finde, dass, weil die CSS background hat transparent gesetzt worden ist, die Screenshot ziemlich hässlich stellt sich heraus, so würde ich die background-white setzen will. Ich habe made sure, dass ich document.querySelector in einem evaluate() Aufruf verwende, aber das scheint nicht zu funktionieren.

mein Skript hier (Sie alles vor casper.start(... ignorieren kann, ich eingeschlossen nur den Anfangsteil für den Kontext für den nächsten Codeausschnitt):

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(); 

Und dies ist die Ausgabe erhalte ich, wenn ich in einer URL übergeben

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 

Hinweis: Ja, ich bin mir durchaus bewusst, dass dieser Screenshot fein stellt sich heraus, (dass der Hintergrund ist weiß) ... ich beschlossen, nur zu verwenden, Wähler, und den Dateinamen der Screenshot zu schreiben irgendeine alte url, da ich nur versuche zu veranschaulichen, dass der document.query() Anruf nicht wie erwartet funktioniert.

auch nicht sicher, ob die Versionen relevant sind, aber hier sind sie trotzdem:

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

Answer 1

Sie in Probleme laufen, weil Sie nicht zurück DOM-Elemente aus evaluate() passieren können. Sie können jedoch direkt mit dem Element innerhalb des Auswertungsblocks arbeiten.

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(); 

Ich habe getestet dies auf CasperJS 1.1-beta1, aber es sollte mit Versionen> = 1.0.0

bearbeiten arbeiten: Kann Objekte passieren zurück, aber nicht DOM-Elemente.