使用mocha-phantomjs测试现有页面

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 页面，它期望使用描述/它调用的测试定义位于文件中test/mycode.js。如果你把类似的东西

这些测试仅测试主文件和相关 JavaScript 中的内容，mocha-phantomjs 没有提供任何特殊的东西来测试外部 html 文件。如果你想测试你自己的 html 文件，我认为你可以朝几个方向前进，我想出了这些：

第一个选项：创建一种方法将要测试的应用程序部分加载到主测试 html 文件中。如何执行此操作很大程度上取决于您的应用程序设置。它可能非常适合模块化系统。只需包含应用程序中的 javascript 并对其进行测试即可。对于全页 html 测试来说不太好。

第二个选项：打开新窗口，其中包含要从主测试 html 文件（即从 phantom 中）进行测试的页面。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 服务器加载同一页面之间的行为存在差异。

第三个选项：创建一个摩卡测试，从命令行运行nodejs样式，并启动具有特定页面的phantomjs作为摩卡测试的一部分。如果您的系统确实依赖于彼此完全不同的 html 页面，那么我想说您需要这样做。

我快速测试了第三个选项，这是我的测试，基于我在phantom页面上找到的示例（这是 mocha-phantomjs 使用的phantomjs的替代解决方案- 我除了简单的实验外都没有使用过这两个选项，所以我无法推荐使用哪一个）

'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 上构建某些内容，也许它会对您的设置有所帮助。