使用Zombie.js查询Backbone.js应用程序的DOM

时间:2011-09-14 03:26:14

标签: javascript node.js zombie.js vows

今天第一次尝试Zombie.js,我无法访问通过javascript(特别是Backbone.js应用程序)填充DOM元素的页面。作为一个简单的例子,我访问了Backbone.js Todo app并手动添加了一些项目。然后我尝试使用Zombie在#todo-list元素中抓取html,然后它变回空白。我设置了browser.runScripts = true,所以不应该为Zombie查询一切准备好了吗?

查看源代码,内部HTML确实是空的。 Zombie.js甚至可以实现这一点吗?或者我是否需要像Jasmine一样使用here

我在下面列出了示例代码,以及我得到的响应。

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);

运行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)

2 个答案:

答案 0 :(得分:1)

如果您使用browser.html方法,那么您的示例有效 - 我认为问题来自browser对象没有querySelector方法(它确实有query and queryAll method但是,)。

以下是经过修改的工作片段:

'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
}

答案 1 :(得分:0)

我认为访问方法过早回电。尝试等待'完成'事件,例如browser.on('done', this.callback)