querySelectorAll 无法识别 var

我正在使用 casperjs 进行一些网络抓取，但遇到了一个奇怪的问题。 我希望能够从字符串构造 CSS 路径并使用“querySelectorAll”获取数组，如下所示：

var tier = '-ou-';
var index = 'div.list > div > a[href*="' + tier + '"]';
var battles = document.querySelectorAll(index);

然而，这不起作用，battles 返回 null。

这个版本的工作原理：

var links = document.querySelectorAll('div.list > div > a[href*="-ou-"]');

但没有其他人这样做。 我也尝试过：

var index = 'div.list > div > a[href*="-ou-"]';
var battles = document.querySelectorAll(String(index));

and

var index = 'div.list > div > a[href*="-ou-"]';
var battles = document.querySelector(index);

以及上述所有组合，只是作为健全性检查，但没有一个起作用。我对 javascript 比较陌生，所以我觉得我可能遗漏了一些明显的东西，但我不知道是什么。

编辑： 我的整个程序如下。照原样，它工作得很好。如果使用 getBattles 中的注释行而不是下面的行，则它不再有效（var 'battles' 变为 null）

var casper = require('casper').create();
var url = 'http://play.pokemonshowdown.com/';
var battles = [];
var tier = '-ou-';
var index = "div.list > div > a[href*=\"" + tier + "\"]";

function getBattles() {
    //var battles = document.querySelectorAll(index);
    var battles = document.querySelectorAll('div.list > div > a[href*="-ou-"]');
    return Array.prototype.map.call(battles, function(e) {
        return e.getAttribute('href');
    });
}

casper
  .start(url)
  .then(function() {
    if(this.exists('div.leftmenu')) {
      this.echo('something works');
    }
    else {
      this.echo('nothing works');
    }
  })
  .thenClick('button[name="roomlist"]')
  .then(function(){
    this.echo("This one is done.");
  })
  .waitForSelector('div.list > div > a', function(){
    battles = this.evaluate(getBattles);
    this.echo(this.getHTML('div.list > div:nth-child(2) > a'));
  })
  .then(function(){
    this.echo("This two is done.");
  });

casper.run(function() {

    this.echo(battles.length + ' battles found:');
    this.echo(' - ' + battles.join('\n - ')).exit();
});

CasperJS 和 PhantomJS 有两个上下文。通过编程的内部上下文casper.evaluate() http://docs.casperjs.org/en/latest/modules/casper.html#evaluate是沙盒的。这意味着它无法访问外部定义的变量。您需要显式传递这些变量：

var index = 'div.list > div > a[href*="' + tier + '"]';

function getBattles(innerIndex) {
    var battles = document.querySelectorAll(innerIndex);
    return Array.prototype.map.call(battles, function(e) {
        return e.getAttribute('href');
    });
}
...
battles = casper.evaluate(getBattles, index);

PhantomJS 文档evaluate() http://phantomjs.org/api/webpage/method/evaluate.html有一个重要的注意事项：

Note:参数和返回值evaluate函数必须是一个简单的原始对象。经验法则：如果可以通过 JSON 序列化，那就没问题了。

闭包、函数、DOM 节点等将not work!