使用 mocha-phantomjs 自动化功能测试答案

【问题标题】：using mocha-phantomjs to automate functional testing使用 mocha-phantomjs 自动化功能测试
【发布时间】：2012-10-28 04:59:29
【问题描述】：

我的项目正在使用：Node、Coffeescript、SocketIO、Browserify 和 Mocha。（用于标准服务器端单元测试的 mocha）

我想使用无头浏览器自动执行一些客户端界面测试。 PhantomJS 看起来是一个理想的选择（由于 Web 套接字支持而不是 Zombie）。

PhantomJS 页面警告它不是测试运行程序，我理解，他们建议使用 mocha-phantomjs 项目来驱动您的测试。

所以我已经能够运行示例测试（例如mocha-phantomjs tests/mixed.html），但我当前的问题实际上是在测试中使用 PHANTOM。 mocha-phantomjs repo 中的所有示例测试似乎都使用标准的 mocha 服务器端单元测试。

例如我可以轻松运行mocha-phantomjs tests/mixed.html 来查看无聊的旧单元测试。或者我可以运行 phantomjs tests/login.coffee 来加载我的登录屏幕...但是我如何将两者结合起来以断言我应该在我的登录屏幕上看到什么？

我在网络上找不到任何这样的例子，我正在努力理解解决这个问题的最佳方法。

希望这一切都有意义。提前感谢您的帮助。

更新：我找到了作者（here）的以下建议，但我不太明白如何处理它：phantomjs lib/mocha-phantomjs.coffee test/mixed.html

【问题讨论】：

看看这个gist.github.com/nmabhinandan/6c63463d9f0987020c6f

标签： node.js mocha.js phantomjs

【解决方案1】：

有一个相当不错的使用 Mocha 和 Phantom.JS here 进行测试的教程。

关于 Mocha 和 PhantomJS 的部分很短，但基本思想是将 DOM 断言和交互放入 Mocha 测试套件中，通过 testrunner.html 文件在客户端运行它，然后将 mocha-phantomjs 指向testrunner.html 文件。

换句话说，您的 Mocha 测试可能如下所示：

describe("DOM Test", function () {

    var el = document.createElement("div");
    el.id = "myDiv";
    el.innerHTML = "Hello World!";
    document.body.appendChild(el);
    var myEl = document.getElementById('myDiv');

    it("has the right text", function () {
        (myEl.innerHTML).should.equal("Hello World!");
    });
});

testrunner.html 文件将是正常设置：

<html>
    <head>
        <title> Tests </title>
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
    </head>
    <body>
        <div id="mocha"></div>
        <script src="./node_modules/mocha/mocha.js"></script>
        <script src="./node_modules/chai/chai.js"></script>
        <script>
            mocha.ui('bdd');
            mocha.reporter('html');
            var should = chai.should();
        </script>
        <script src="test/test.js"></script>
        <script>
            if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
            else { mocha.run(); }
        </script>
    </body>
</html>

如果您更喜欢完全从 node.js 生态系统运行的解决方案，那么值得考虑 Zombie.JS。这个 Stack Overflow question 提供了一个基本示例。

权衡的是，虽然 Zombie.JS 可以简单地通过需要节点模块来使用，而且速度非常快，但它并不是一个“真正的”网络浏览器。 PhantomJS 更接近，因为它基于 webkit。此外，使用 mocha-phantomjs 的第一种方法允许您在您选择的不同浏览器中运行客户端 Mocha 测试，PhantomJS 只是其中之一。

【讨论】：

谢谢。有以这种方式直接使用 CoffeeScript 的经验吗？我猜这是不可能的，但会很有趣（我的 mocha 套件的其余部分在 CoffeeScript 中）
我不明白为什么你不能在 CoffeeScript 中编写 mocha 测试套件而只编译为 JavaScript，但我不是 CoffeeScript 用户...
我对此做了一个快速的记录（虽然我提到你可以使用类似Brunch）blog.cbsides.com/Drive-Mocha-Phantom-with-CoffeeScript.html