web-dev-qa-db-ja.com

mocha-phantomjsを使用して機能テストを自動化する

私のプロジェクトは、Node、Coffeescript、SocketIO、Browserify、Mochaを使用しています。 （標準のサーバー側単体テストのモカ）

ヘッドレスブラウザを使用して、クライアント側のインターフェーステストを自動化したいと思います。 PhantomJSは理想的な選択肢のように見えました（Webソケットのサポートのためにゾンビよりも選ばれました）。

PhantomJSページは、私が理解しているテストランナーではないことを警告し、 mocha-phantomjs プロジェクトを使用してテストを実行することを推奨しています。

そのため、サンプルテストを実行することができました（例：mocha-phantomjs tests/mixed.html）、しかし私の現在の問題は実際にテスト内でPHANTOMを使用することです。 mocha-phantomjsリポジトリのすべてのサンプルテストは、標準のmochaサーバー側単体テストを使用しているようです。

例えば簡単に実行できますmocha-phantomjs tests/mixed.html退屈な古い単体テストを表示します。または、phantomjs tests/login.coffeeログイン画面をロードするには...しかし、2つを組み合わせて、ログイン画面に表示されるはずの内容についてアサーションを作成するにはどうすればよいですか？

私はこれの例をウェブ上で見つけることができず、これを実行するための最良の方法を理解するのに苦労しています。

これがすべて理にかなっているといいのですが。助けてくれてありがとう。

[〜＃〜] update [〜＃〜]：著者による次の提案を見つけました（ here ）、しかし私はそれをどうするかを正確に理解していません：phantomjs lib/mocha-phantomjs.coffee test/mixed.html

node.jsmochaphantomjs
23
captainclam

MochaとPhantom.JSでテストするためのかなり素晴らしいチュートリアルがあります ここ 。

MochaとPhantomJSに関するセクションは短いですが、基本的な考え方は、DOMアサーションと相互作用をMochaテストスイートに入れ、testrunner.htmlファイルを介してクライアント側で実行し、mocha-phantomjsをtestrunnerに向けることです。 htmlファイル。

言い換えると、モカテストは次のようになります。

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 を検討する価値があります。このスタックオーバーフロー question は、基本的な例を示しています。

トレードオフは、Zombie.JSはノードモジュールを要求するだけで使用でき、非常に高速ですが、「実際の」Webブラウザではないということです。 PhantomJSは、Webkitに基づいているため、より近いものです。また、mocha-phantomjsを使用した最初のアプローチでは、選択したさまざまなブラウザーでクライアント側のMochaテストを実行できます。PhantomJSはその1つにすぎません。

14
Darren