casperjs: ocena document.querySelector zwraca wartość zerową

Question

Używam metod w CasperJS, aby czekać i wybrać element za pomocą selektora CSS, a następnie zapisać zrzut ekranu z niego.

Jednak jestem stwierdzenia, że ​​ponieważ css background został ustawiony na transparent, zrzut ekranu okazuje się dość brzydki, więc chciałbym, aby ustawić background do white. Mam made sure, który używam document.querySelector w wywołanie evaluate(), ale to nie wydaje się działać.

Oto mój skrypt (można ignorować wszystko przed casper.start(..., po prostu wliczone w początkowej części dla kontekstu kodu następnego fragmentu):

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

I to jest wyjście otrzymuję kiedy przechodzą w adresie URL , selektor, a nazwa pliku do zapisu ekranu do:

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 

Uwaga: Tak, zdaję sobie sprawę, że to zrzut ekranu okazuje się w porządku (że tło jest białe) ... po prostu postanowił wykorzystać dowolny stary adres URL, ponieważ próbuję tylko zilustrować, że wywołanie document.query() nie działa zgodnie z oczekiwaniami.

Ponadto, nie jestem pewien, czy te wersje są istotne, ale tutaj są one w każdym razie:

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

Answer 1

Używasz do kwestii, ponieważ nie można przejść z powrotem elementów DOM z evaluate(). Możesz pracować bezpośrednio z elementem wewnątrz bloku oceny.

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

Przetestowałem to na CasperJS 1.1 beta1, ale powinien działać z wersji> = 1.0.0

Edit: Czy można przejść z powrotem obiektów, lecz nie elementów DOM.