我不太了解如何一起使用PhantomJS和Mocha,特别是通过mocha-phantomjs。
我已经阅读了一些教程(tutsplus处的教程非常有帮助)并且我没有看到如何使用Phantom和Mocha测试外部页面。我确定我只需轻推一下。
在本教程中,作者创建了一个带有一些DOM设置/操作的tests.js文件,以及一些mocha断言。然后,他创建了一个单独的HTML文件,用于加载tests.js文件,并使用mocha-phantomjs启动幻像并运行测试。
这就是我有点困惑的地方,mochaPhantomJS.run()
方法在幕后实际做了什么,是否知道在js文件中搜索describe
块并运行其中的所有测试,那类的东西。我不需要章节和经文,但高级摘要是理想的。
另外,如果我想测试外页,我该怎么做才能做到最好?在教程中,所有DOM调查和测试都在测试页面上完成。如果我想测试不同的页面,我是否可以更改或设置我的断言?我应该从这些测试中调用PhantomJS API并指向外部站点吗?
答案 0 :(得分:2)
Mocha将运行已在javascript中指定的测试,该测试已包含在已启动的html页面中。如果查看mocha-phantomjs上的示例html页面,它希望使用describe / it调用的测试定义位于test/mycode.js
文件中。如果你输入像
这些测试仅测试主文件和相关javascript中的内容,mocha-phantomjs提供的测试外部html文件没有任何特殊之处。如果你想测试自己的html文件,我认为你可以向几个方向前进,我想出了这些:
第一个选项:创建一种方法,将您要测试的app部分加载到主测试html文件中。如何做到这一点很大程度上取决于您的应用程序设置。它可能非常适合模块化系统。只需在应用程序中包含javascript并进行测试即可。对于整页html测试来说不太好。
第二个选项:打开新窗口,显示要从主测试html文件中测试的页面(从幻像中)。您可以像使用普通浏览器一样使用window.open()
打开页面。我创建了一个这样的概念证明:
describe('hello web', function () {
it('world', function (done) {
var windowReference = window.open("fileundertest.html");
// windowReference.onload didn't work for me, so I resorted to this solution
var intervalId = window.setInterval(function () {
if (windowReference.document && windowReference.document.readyState === 'complete') {
window.clearInterval(intervalId);
expect(windowReference.document.title).to.equal("File Under Test");
done();
} else {
console.log('not ready yet');
}
}, 10);
});
}
)
此解决方案相对简单,但与任何页面加载解决方案具有相同的缺点:您永远不知道页面何时完全初始化并且必须求助于某种超时/等待系统等待页面进入正确的状态。如果你想测试很多单独的html文件,这些延迟开始加起来。另外等待' onload'在我打开的页面上不起作用所以我基于setInterval和正在加载的文档的(非完美)测试创建了我自己的函数。我发现从文件系统加载html页面和通过web服务器加载同一页面之间的行为存在差异。
第三个选项:创建一个mocha测试,从命令行运行nodejs-style,并启动具有特定页面的phantomjs作为mocha测试的一部分。如果你的系统真的依赖于彼此截然不同的html页面,我就会说这就是你所需要的。
我快速测试了第三个选项,这是我的测试基于我在phantom页面上找到的示例(这是mocha-phantomjs使用的phantomjs的替代解决方案 - 我和#39; ve既不用于简短的实验,也不建议使用哪一个)
'use strict';
var chai = require('chai'),
phantom = require('phantom');
var expect = chai.expect;
describe('hello node', function () {
it('world', function (done) {
phantom.create(function (ph) {
ph.createPage(function (page) {
page.open("http://www.google.com", function (status) {
console.log("opened google? ", status);
page.evaluate(function () { return document.title; }, function (result) {
console.log('Page title is ' + result);
ph.exit();
expect(result).to.equal("Google");
done();
});
});
});
});
});
}
)
虽然可以通过这种方式进行测试,但我可以说,幻象世界中的代码与nodejs世界中的测试代码之间的通信开销可能不值得。当然,您可以将许多常规功能移植到几个辅助函数中,但您仍然需要调用page.evaluate()
来对页面执行特定测试。与上述超时/等待相同的问题也适用。
暂且不说:已经知道CasperJS了吗?如果您选择在“平原”上构建一些内容,它可能对您的设置有所帮助。 phantomjs。