casperjs: document.querySelector öğesi bir null değerini döndürüyor

Question

CasperJS'de waitForSelector() ve captureSelector()10 yöntemlerini kullanıyorum ve bir CSS seçiciyi kullanarak bir öğe seçip ekran görüntüsünü kaydedin.

Ancak, css backgroundtransparent olarak ayarlandı çünkü ekran görüntüsü oldukça çirkin çıkıyor bu bulgu, o yüzden backgroundwhite ayarlı istiyorum. Ben bir evaluate() çağrı document.querySelector kullanıyorum made sure var, ama bu işe yaramaz. İşte

benim senaryo (eğer casper.start(... önce her şeyi göz ardı edebilirsiniz, sadece bir sonraki kod parçacığı için bağlam için başlangıç ​​kısmı dahil):

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

Ve ben bir url geçerken bu alıyorum çıkışı , seçici, ve dosya adı ekran görüntüsü yazmak için:

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 

Not: Evet, ben ... ben sadece kullanmaya karar (arka plan beyaz olduğundan değil) bu ekran görüntüsü ince çıkıyor farkındayım herhangi bir eski url, sadece ben document.query() aramanın beklendiği gibi çalışmadığını göstermeye çalıştığım için. Ayrıca

, versiyonları alakalı, ama burada onlar zaten eğer emin değil: Sen sorunları çalıştıran

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

Answer 1

Eğer evaluate() gelen DOM öğelerini geri geçemez çünkü. Ancak, değerlendirme bloğunun içindeki elemanla doğrudan çalışabilirsiniz.

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

Ben CasperJS bu 1.1-beta1 test ettik, ama bu sürümleri ile çalışması gerekir> =

1.0.0 Düzenleme: nesneleri değil, DOM öğelerini geri uzatabilir.