23

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

ヘッドレス ブラウザを使用して、クライアント側のインターフェイス テストを自動化したいと考えています。PhantomJS は理想的な選択肢のように見えました (Web ソケットのサポートにより、Zombie ではなく選択されました)。

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

サンプル テストを実行することはできましたが (例: mocha-phantomjs tests/mixed.html)、現在の問題は、テスト内で実際に PHANTOM を使用することです。mocha-phantomjs リポジトリのサンプル テストはすべて、標準の mocha サーバー側ユニット テストを使用しているようです。

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

Web 上でこの例を見つけることができず、これを行う最善の方法を理解するのに苦労しています。

これがすべて理にかなっていることを願っています。ご協力いただきありがとうございます。

更新：著者による次の提案を見つけました（here）が、それをどうするか正確にはわかりません：phantomjs lib/mocha-phantomjs.coffee test/mixed.html

4

1 に答える 1

14

Mocha と Phantom.JS を使用してテストするためのかなり優れたチュートリアルがここにあります。

Mocha と PhantomJS に関するセクションは短いですが、基本的な考え方は、DOM アサーションとインタラクションを Mocha テスト スイートに入れ、testrunner.html ファイルを介してクライアント側で実行し、mocha-phantomjs をテストランナーに向けることです。 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を検討する価値があります。このスタック オーバーフローの質問は、基本的な例を提供します。

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

于 2012-12-25T00:02:02.480 に答える