phantomjs - 使用 mocha-phantomjs 测试现有页面

Question

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

我已经阅读了一些教程(位于 tutsplus 的教程很有帮助)，但没有看到如何使用 Phantom 和 Mocha 测试外部页面。我确定我只需要轻推一下。

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

这就是我有点困惑的地方，mochaPhantomJS.run()方法实际上在幕后做事，它是否知道在 js 文件中搜索 describe阻止并运行其中的所有测试，诸如此类。我不需要章节和经文，但一个高级摘要将是理想的。

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

Answer 1

Mocha 将运行已在启动的 html 页面中包含的 javascript 中指定的测试。如果您查看 mocha-phantomjs 上的示例 html 页面它期望使用 describe/it 调用的测试定义位于 test/mycode.js 中。文件。如果你把类似的东西

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

第一个选项 :创建一种将您要测试的应用程序部分加载到主测试 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 页面和通过网络服务器加载同一页面之间的行为存在差异。

第三个选项 :创建一个从命令行运行 nodejs-style 的 mocha 测试，并使用特定页面启动 phantomjs 作为 mocha 测试的一部分。如果您的系统真的依赖于彼此完全不同的 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 上构建一些东西，它可能对您的设置有所帮助。