Question

我不太了解如何一起使用PhantomJS和Mocha，特别是通过mocha-phantomjs。

我已经阅读了一些教程（tutsplus处的教程非常有帮助）并且我没有看到如何使用Phantom和Mocha测试外部页面。我确定我只需轻推一下。

在本教程中，作者创建了一个带有一些DOM设置/操作的tests.js文件，以及一些mocha断言。然后，他创建了一个单独的HTML文件，用于加载tests.js文件，并使用mocha-phantomjs启动幻像并运行测试。

这就是我有点困惑的地方，mochaPhantomJS.run()方法在幕后实际做了什么，是否知道在js文件中搜索describe块并运行其中的所有测试，那类的东西。我不需要章节和经文，但高级摘要是理想的。

另外，如果我想测试外页，我该怎么做才能做到最好？在教程中，所有DOM调查和测试都在测试页面上完成。如果我想测试不同的页面，我是否可以更改或设置我的断言？我应该从这些测试中调用PhantomJS API并指向外部站点吗？

Answer 1

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文件，这些延迟开始加起来。另外等待＆＃39; onload＆＃39;在我打开的页面上不起作用所以我基于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。

使用mocha-phantomjs测试现有页面

1 个答案: