爲什麼使用Bootstrap時，zombie.js瀏覽器會返回空HTML？

我想用Mocha和殭屍來測試我的Node.js/Express.js應用程序。我可以通過簡單的測試，但只要將Twitter Bootstrap的腳本標記添加到我的視圖中，瀏覽器對象就會返回空的HTML。爲什麼使用Bootstrap時，zombie.js瀏覽器會返回空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); 
}); 
});

視圖代碼（我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

如果我刪除腳本標記，在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)

看來，這個問題可能有時間去做。該文件被加載，然後加載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(); 
});

我有一點現在重寫我的測試邏輯，但關鍵是讓工作是在等待功能。

來源

2013-09-30 Andrew Patzer

聽起來像時間可能是一個問題。另一方面，Zombie只有在JavaScript事件停止使用訪問後才能給予您控制權。

一個好的策略是使用browser.wait來讓某個DOM元素在繼續測試之前出現。這種方式你知道，例如Bootstrap已加載並顯示元素#widget-view。可能要調整maxWait/waitFor。

至少可以排除時間問題。

來源

2013-09-30 19:22:07 wprl

這很棒！我將編輯我的帖子以顯示更新的測試代碼。謝謝！ –

爲什麼使用Bootstrap時，zombie.js瀏覽器會返回空HTML？

回答

相關問題