title: casperjs: evaluating document.querySelector returns a null
body: <p>I'm using the <a href="http://docs.casperjs.org/en/latest/modules/casper.html#waitforselector" rel="noreferrer"><code>waitForSelector()</code></a> and <a href="http://docs.casperjs.org/en/latest/modules/casper.html#captureselector" rel="noreferrer"><code>captureSelector()</code></a> methods in CasperJS to wait for and select an element using a CSS selector, then save a screenshot of it. </p>
  
  <p>However, I'm finding that because the css <code>background</code> has been set to <code>transparent</code>, the screenshot turns out pretty ugly, so I'd like to set the <code>background</code> to <code>white</code>. I've <a href="https://github.com/n1k0/casperjs/issues/192" rel="noreferrer">made sure</a> that I'm using <code>document.querySelector</code> in an <a href="http://docs.casperjs.org/en/latest/modules/casper.html#evaluate" rel="noreferrer">evaluate()</a> call, but that doesn't seem to work. </p>
  
  <p>Here's my script (you can ignore everything before <code>casper.start(...</code>, I just included the beginning part for context for the next code snippet):</p>
  
  <pre><code>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 &lt; requiredOptions.length ; i++) {
    var opt =  requiredOptions[i];
    if (!casper.cli.has(opt)) {
      missingOptions.push(opt);
    }
  }
  
  if (missingOptions.length &gt; 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();
  </code></pre>
  
  <p>And this is the output I get when I pass in a url, selector, and filename to write the screenshot to: </p>
  
  <pre><code>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
  </code></pre>
  
  <p><strong>Note:</strong> Yes, I am well aware that this screenshot turns out fine (in that the background is white)... I just decided to use any old url, since I'm only trying to illustrate that the <code>document.query()</code> call doesn't work as expected. </p>
  
  <p>Also, not sure if the versions are relevant, but here they are anyway: </p>
  
  <pre><code>yiqing:~/Repos/rectslice()$ casperjs --version
  1.0.2
  yiqing:~/Repos/rectslice()$ phantomjs --version
  1.9.0
  </code></pre>