CasperJS waitForSelector 有效但 querySelector 为空

Question

我正在使用 CasperJS，我可以从 waitForSelector 得到一个 "success" 但是当我尝试为同一个选择器做 document.querySelector - 它 returns null?

我的代码

"use strict";
var casper = require('casper').create({
    verbose: false,
    logLevel: 'warning',
    waitTimeout: 10000
});
phantom.cookiesEnabled = true;

var x = require('casper').selectXPath;
casper.options.viewportSize = {width: 1920, height: 965};
casper.on('page.error', function(msg, trace) {
   this.echo('Error: ' + msg, 'ERROR');
   for(var i=0; i<trace.length; i++) {
       var step = trace[i];
       this.echo('   ' + step.file + ' (line ' + step.line + ')', 'ERROR');
   }
});

var selector = ".table-component";
casper.waitForSelector(selector,
    function success() {
        console.log("table found");
        console.log(document.querySelector(selector));      
    },
    function fail() {
        console.log("oops");
    }
);
casper.run();

Answer 1

PhantomJS 有两个上下文，由于 CasperJS 构建在 PhantomJS 之上，它继承了这一事实。

您只能通过 casper.evaluate() (wrapper around page.evaluate() 访问 DOM。所有将选择器作为参数的 CasperJS 函数，在内部使用 evaluate()。请注意，evaluate() 是沙箱化的，您只能将原始类型传入和传出它。 DOM 元素不是原始类型，因此您不能将它们传递到页面 (DOM) 上下文之外。您必须将您想要的信息的某种表示作为原始类型传递：

casper.waitForSelector(selector,
    function success() {
        this.echo("table found");
        this.echo("1: "+this.evaluate(function(sel){
            return !!document.querySelector(sel)
        }, selector));
        this.echo("2: "+this.evaluate(function(sel){
            return document.querySelector(sel).textContent;
        }, selector));
    },
    function fail() {
        console.log("oops");
    }
);

我建议您查看其他有用的函数，例如 casper.getElementInfo()。

Answer 2

CasperJs 中的

document.querySelector 在 DOM 上下文中工作。要使用任何 DOM 请求，请使用 casper.evaluate() 或 this.evaluate。此外，声明在评估函数范围之外的变量需要以某种方式传递，如下所示。

var selector = ".table-component";
casper.waitForSelector(selector,
    function success() {
        console.log("table found");
        var temp=this.evaluate(function(slctr){
            return document.querySelector(selector);
        },selector);
        console.log(temp);
    },
    function fail() {
        console.log("oops");
    }
);

CasperJS waitForSelector 有效但 querySelector 为空

CasperJS waitForSelector works but querySelector null

javascript

phantomjs

casperjs