title: Querying DOM of a Backbone.js app with Zombie.js
body: <p>Just trying out <a href="http://zombie.labnotes.org/" rel="nofollow">Zombie.js</a> for the first time today, and I'm having trouble visiting a page that populates DOM elements via javascript (specifically, a Backbone.js app).  As a quick example, I visited the <a href="http://documentcloud.github.com/backbone/examples/todos/index.html" rel="nofollow">Backbone.js Todo app</a> and manually added a few items.  Then I tried to grab the html within the <code>#todo-list</code> element using Zombie, and it came back empty.  I've set <code>browser.runScripts = true</code>, so shouldn't everything be ready for Zombie to query?</p>
  
  <p>Looking at the source, the inner HTML is indeed empty.  Is this even possible with Zombie.js?  Or do I need to use something like Jasmine, as done <a href="http://tinnedfruit.com/2011/03/03/testing-backbone-apps-with-jasmine-sinon.html" rel="nofollow">here</a>?</p>
  
  <p>I've included example code below, along with the response I get.</p>
  
  <pre><code>var zombie = require('zombie'),
  vows = require('vows'),
  assert = require('assert');
  
  var baseUrl = 'http://documentcloud.github.com/backbone/examples/todos/index.html';
  
  vows.describe('Zombie Tests on a Backbone App').addBatch({
  'Navigate to Todo List' : {
    topic: function () {
      browser = new zombie.Browser({ debug: true });
      browser.runScripts = true;
      browser.on('error',function (err){console.log(err.stack)});
      browser.visit(baseUrl, this.callback);
    },
    'Can see todo list' : function (err,browser,status) {
      console.log('todo-list inner:' + browser.querySelector("#todo-list").innerHTML);
      // actual tests would go here
    }
  },
  }).export(module);
  </code></pre>
  
  <p>And the output from running <code>vows</code>:</p>
  
  <pre><code>&gt; vows test/todo-test.js --spec
  
  ♢ Zombie Tests on a Backbone App
  
  Zombie: GET http://documentcloud.github.com/backbone/examples/todos/index.html
  Zombie: GET http://documentcloud.github.com/backbone/examples/todos/index.html =&gt; 200
  Zombie: GET http://documentcloud.github.com/backbone/test/vendor/json2.js
  Zombie: GET http://documentcloud.github.com/backbone/test/vendor/jquery-1.5.js
  Zombie: GET http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.6.js
  Zombie: GET http://documentcloud.github.com/backbone/backbone.js
  Zombie: GET http://documentcloud.github.com/backbone/examples/backbone-localstorage.js
  Zombie: GET http://documentcloud.github.com/backbone/examples/todos/todos.js
  Zombie: GET http://documentcloud.github.com/backbone/examples/backbone-localstorage.js =&gt; 200
  Zombie: GET http://documentcloud.github.com/backbone/test/vendor/json2.js =&gt; 200
  Zombie: GET http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.6.js =&gt; 200
  Zombie: GET http://documentcloud.github.com/backbone/backbone.js =&gt; 200
  Zombie: GET http://documentcloud.github.com/backbone/examples/todos/todos.js =&gt; 200
  Zombie: GET http://documentcloud.github.com/backbone/test/vendor/jquery-1.5.js =&gt; 200
  Zombie: Firing timeout 1, delay: 1
  todolist inner:
    Navigate to Todo List
      ✓ Can see todo list
  
  ✓ OK » 1 honored (3.824s)
  </code></pre>