为什么使用Bootstrap时zombie.js浏览器返回空HTML？ [英] Why does the zombie.js browser return empty HTML when using Bootstrap?
问题描述
这是我的测试代码：
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}）;
}）;
它（'应该显示欢迎' ）{
var browser = this.browser;
browser
.visit（/）
.then（function（）{
console.log html（））;
}）
.fail（function（error）{
console.log（Error：，error）;
}）
。然后（完成）;
}）;
after（function（done）{
this.server.close（done）;
}）;
}）;
查看代码（我的layout.jade文件）：
doctype 5
html
head
title = title
link（rel ='stylesheet'，href ='/ stylesheets
script（src ='/ javascripts / jquery-2.0.3.min.js'）
脚本（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联系数据库
.collapse.navbar-collapse
ul.nav.navbar-nav
li.active
a（href ='/'） '）首页
li.active
a（href ='/ contacts'）联系人
块内容
如果我删除脚本标签，HTML按预期记录到控制台。
调试输出：
主页
◦应该显示欢迎：僵尸：打开的窗口http：// localhost：3000 /
GET / 200 283ms - 1018b
僵尸：GET http：// localhost：3000 / = > 200
僵尸：加载的文件http：// localhost：3000 /
GET /javascripts/bootstrap.min.js 200 4ms - 27.08kb
僵尸：GET http：// localhost：3000 / javascripts / jquery-2.0.3.min.js => 200
僵尸：GET http：// localhost：3000 / javascripts / bootstrap.min.js => 200
GET /javascripts/jquery-2.0.3.min.js 200 41ms - 81.65kb
< html>< / html>
僵尸：事件循环为空
✓应显示欢迎（414ms）
看来这个问题可能与时间有关。加载文档，然后加载Javascript文件。我想知道在加载Javascript之前是否僵尸正在执行我的回调函数，因此在这一点上DOM是空的。任何想法？
更新：
这是由wprl的建议解决的。
添加等待功能后，以下是测试工作：
it（'should show welcome'，function（done）{
//等待页面加载
函数pageLoaded（window）{
return window.document.querySelector （.container）;
}
var browser = this.browser;
browser.visit（/）;
browser.wait（pageLoaded， function（）{
console.log（browser.html（））;
}）;
done（）;
}）;
我现在必须重写我的测试逻辑，但是让它工作的关键是等待功能。
这听起来像时机可能是一个问题。另一方面，僵尸只有在JavaScript事件停止使用访问之后才能给予控制。
使用一个好的策略是在进行测试之前出现某个DOM元素的 browser.wait 。这样你就知道Bootstrap已加载并显示元素＃widget-view 。
可能要调整 maxWait / waitFor 。
至少你可以排除时间问题。
I'm trying to test my Node.js/Express.js application using Mocha and Zombie. I can get simple tests to pass, but as soon as I add the script tags for Twitter Bootstrap to my views, the browser object returns empty HTML.
Here is my test code:
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);
});
});
The view code (my layout.jade file):
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
If I remove the script tags, the HTML is logged to the console as expected. Otherwise, I get empty HTML returned.
The debug output:
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)
It appears that the problem might have to do with timing. The document is loaded, then the Javascript files are loaded. I'm wondering if zombie is executing my callback function before the Javascript is loaded, therefore the DOM is empty at that point. Any ideas?
Update:
This was solved by wprl's suggestion below.
Here is the test that works, after adding a wait function:
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();
});
I'll have to rewrite my test logic a bit now, but the key to getting it to work was the wait function.
It does sound like timing might be an issue. On the other hand, Zombie is good about giving you control only after JavaScript events have stopped when using visit.
A good strategy to use is to browser.wait for a certain DOM element to appear before proceeding with your tests. That way you know e.g. Bootstrap has loaded and shown element #widget-view.
Might want to adjust maxWait/waitFor as well.
At least then you could rule out the timing issue.
这篇关于为什么使用Bootstrap时zombie.js浏览器返回空HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
