为什么zombie.js浏览器在使用Bootstrap时返回空HTML？

Question

为什么zombie.js浏览器在使用Bootstrap时返回空HTML？

And*_*zer 11 mocha.js node.js express zombie.js

我正在尝试使用Mocha和Zombie测试我的Node.js/Express.js应用程序.我可以通过简单的测试,但只要我将Twitter Bootstrap的脚本标签添加到我的视图中,浏览器对象就会返回空的HTML.

这是我的测试代码:

process.env.NODE_ENV = 'test';

var app = require('../app');
var assert = require('assert');
var Browser = require('zombie');

describe('home page', function() {
before(function() {
    this.server = app.listen(3000);
    this.browser = new Browser({site: 'http://localhost:3000', debug : true});
});

it('should show welcome', function(done) {
    var browser = this.browser;
    browser
        .visit("/")
        .then(function() {
            console.log(browser.html());
        })
        .fail(function(error) {
            console.log("Error: ", error);
        })
        .then(done);
});

after(function(done) {
    this.server.close(done);
});
});

Run Code Online (Sandbox Code Playgroud)

视图代码(我的layout.jade文件):

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/javascripts/jquery-2.0.3.min.js')
    script(src='/javascripts/bootstrap.min.js')
  body
    .navbar.navbar-inverse.navbar-fixed-top
      .container
        .navbar-header
          button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='/') Contact Database
        .collapse.navbar-collapse
          ul.nav.navbar-nav
            li.active
              a(href='/') Home
            li.active
              a(href='/contacts') Contacts
  block content

Run Code Online (Sandbox Code Playgroud)

如果我删除脚本标记,HTML将按预期记录到控制台.否则,我返回空HTML.

调试输出:

home page
? should show welcome: Zombie: Opened window http://localhost:3000/ 
GET / 200 283ms - 1018b
Zombie: GET http://localhost:3000/ => 200
Zombie: Loaded document http://localhost:3000/
GET /javascripts/bootstrap.min.js 200 4ms - 27.08kb
Zombie: GET http://localhost:3000/javascripts/jquery-2.0.3.min.js => 200
Zombie: GET http://localhost:3000/javascripts/bootstrap.min.js => 200
GET /javascripts/jquery-2.0.3.min.js 200 41ms - 81.65kb
<html></html>
Zombie: Event loop is empty
? should show welcome (414ms)

Run Code Online (Sandbox Code Playgroud)

似乎问题可能与时间有关.加载文档,然后加载Javascript文件.我想知道僵尸是否在加载Javascript之前执行我的回调函数,因此DOM在那时是空的.有任何想法吗？

更新:

这是由wprl的建议解决的.

添加等待函数后,这是一个有效的测试:

it('should show welcome', function(done) {

    // Wait until page is loaded
    function pageLoaded(window) {
        return window.document.querySelector(".container");
    }

    var browser = this.browser;
    browser.visit("/");
    browser.wait(pageLoaded, function() {
        console.log(browser.html());
    });
    done();
});

Run Code Online (Sandbox Code Playgroud)

我现在必须重写我的测试逻辑,但让它工作的关键是等待功能.

Answer 1

wpr*_*prl 9

这听起来像时间可能是一个问题.另一方面,Zombie只有在使用访问时JavaScript事件停止后才能让您控制.

一个好的策略是browser.wait在继续测试之前显示某个DOM元素.这样你知道例如Bootstrap已加载并显示元素#widget-view.

可能也想调整maxWait/ waitFor.

至少你可以排除时间问题.

归档时间：	12 年，2 月前
查看次数：	5674 次
最近记录：	12 年，2 月前