Querying DOM of a Backbone.js app with Zombie.js

Just trying out Zombie.js 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 Backbone.js Todo app and manually added a few items. Then I tried to grab the html within the #todo-list element using Zombie, and it came back empty. I've set browser.runScripts = true, so shouldn't everything be ready for Zombie to query?

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 here?

I've included example code below, along with the response I get.

var zombie = require('zombie'),
vows = require('vows'),
assert = require('assert');

var baseUrl = '开发者_Go百科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);

And the output from running vows:

> 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 => 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 => 200
Zombie: GET http://documentcloud.github.com/backbone/test/vendor/json2.js => 200
Zombie: GET http://documentcloud.github.com/backbone/test/vendor/underscore-1.1.6.js => 200
Zombie: GET http://documentcloud.github.com/backbone/backbone.js => 200
Zombie: GET http://documentcloud.github.com/backbone/examples/todos/todos.js => 200
Zombie: GET http://documentcloud.github.com/backbone/test/vendor/jquery-1.5.js => 200
Zombie: Firing timeout 1, delay: 1
todolist inner:
  Navigate to Todo List
    ✓ Can see todo list

✓ OK » 1 honored (3.824s)

If you use the browser.html method, then your example works — I think the problem comes from the browser object not having a querySelector method (it does have a query and queryAll method, though).

Here's the revised, working snippet:

'Can see todo list' : function (err, browser, status) {
  var list = browser.html('#todo-list');
  console.log('todo-list inner: ' + list);
  // actual tests would go here
}

I think the visit method is calling back too early. Try waiting for the 'done' event, e.g. browser.on('done', this.callback).