querySelectorAll没办法识别var

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

I am using casperjs for some webscraping and am having a strange problem. I want to be able to construct a CSS path from strings and get an array using 'querySelectorAll' like below:

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

但是，这不起作用，并且战斗返回null。

However, this does not work, and battles returns null.

此版本有效：

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

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

But none other does. I also tried:

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

和

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

以及上述所有组合，正如完整性检查一样，没有效果。我对javascript相对较新，所以我觉得我可能会遗漏一些明显的东西，但我不知道是什么。

and all combinations of the above, just as a sanity check, and none worked. I am relatively new to javascript so I feel I may be missing something obvious, but I have no idea what.

编辑：
我的整个程序如下。它是正常的。如果使用getBattles中的注释行而不是它下面的注释行，则它不再有效（var'battles'变为null）

My entire program is below. As is, it works fine. If the commented line in getBattles is used instead of the one below it, it no longer works (var 'battles' becomes 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();
});