7

Selenium コード (ページの設定用) とクライアント側の Mocha コード (テスト対象のクライアント側 JS で実際にテストを実行するため) が混在するテストはどのように構成すればよいですか?

クライアント側の JavaScript ライブラリをテストしています。単体テストは、Karma、Mocha、および Grunt でうまく機能します。単体テストは、ローカルで、または SauceLabs 経由で実行できます。単体テストは、基本的には実際にファイルが提出される部分までテストできます。この部分には、ブラウザーの自動化や手動操作が必要であり、これが私が苦労していることです。

問題のライブラリは Javascript ファイルアップロード ライブラリです。チャンク、自動再開などの機能があります。jQuery を必要とせず、さまざまなブラウザー (IE7-10、FF、Safari (Mac & iOS)、Chrome、Android 標準ブラウザー) で動作します。そのため、これらのテストでカバーされる多くのケースと例外があります。

基本的に、Selenium を使用してページをセットアップする必要があります。クライアント側の JS ファイル アップロード ライブラリをテストしているので、実際にアップロードできるように、Selenium を使用してプログラムでファイルを送信する必要があります。このファイルが送信されると (1 つまたは複数のファイルをオンラインでアップロードしようとしたときに表示されるダイアログ ウィンドウからファイルを選択するのと同じです) 、クライアント側のテストを実行して、UI が適切に描画されていることを確認できます。見つかった、など

これを適切にテストする方法と、将来に向けて拡張可能で堅牢でシンプル/使いやすいテストスイートをセットアップする方法について頭を悩ませています。

  • Selenium でクライアント側で実行する JS コードを挿入する必要がありますか?

    1 つのアイデアは、適切なタイミングで Selenium を使用してクライアント側の JS コードを挿入することです。ここに私が考えているもののいくつかの擬似コードがあります:

describe("A Test", function () {

   it("injects some JS", function (done) {
        // Assume `getClientSideScript` loads some .js file from the filesystem,
        // reads its contents, and returns the contents as a string (to be executed).
        browser.safeExecute(getClientSideScript('initialize'), function (err, result) {
            // At this point, the client-side library is initialized on the page.

            // Assume that `uploadFile` will submit a file to the `<input type='file'>`
            // element
            utils.uploadFile('file.jpg', function (file) {

                browser.safeExecute(getClientSideScript('test_file_submission'), function (err, result) {
                    assert.ok(/* something about the result */);
                });

            });

        }); 
   });
});

これは、私にはうまくいきますが、巨大な PITA のように思えます。ロードされるクライアント側スクリプトを格納およびロードするための規則を考え出す必要があります。また、2 つの異なるテストには 2 つの異なるスクリプトが挿入されるため、1 回だけ使用するスクリプトの膨大なコレクションがリポジトリに蓄積されます。また、この道をたどって、それが悪い決定であるか、不可能であることに気付くことも恐れています。

誰でもこれを経験したことがありますか？

  • モック サーバー...必要になります。

    Sinon.jsを使用してクライアント側のモック サーバーを作成したり、nockを使用して別のサーバー側のモック サーバーを作成したりできます。サーバーは非常に単純ですが、サーバーからの応答が期待どおりであったことをクライアント側でアサートできる必要があると思います。

  • クライアント側のテスト結果のインターセプト

    asserts上記と同様に、 Selenium を使用してブラウザーを自動化するときに、クライアント側のコード内でインターセプトするにはどうすればよいでしょうか。たとえば、ライブラリとモック サーバーの間の要求と応答のサイクルをテストしたいとします。ライブラリが要求 A をサーバーに送信した場合、応答 A が期待されることを確認したいとします。Selenium ではそれをテストできません。assertsクライアント側をキャプチャし、Selenium を介して出力できるようにする必要があります。

これを行うための最良の方法を見つけようとして、壁に頭をぶつけていました。どなたか、同じような経験をお持ちの方がいらっしゃいましたら、お声がけください！

4

1 に答える 1

1

これら 2 種類のテストを混在させることはまったくありません。ここにはいくつかの異なる懸念があります。説明しているようなテストを組み合わせなくても、完全なテスト カバレッジを得ることができます。

  • クライアント側の単体テスト (Karma、Mocha などを使用) は、JavaScript コードが期待どおりに動作していることを検証します。
  • サーバー側の単体テスト (JUnit またはバックエンド用に存在する単体テスト フレームワークを使用) は、サーバー コードが期待どおりに動作していることを検証します。
  • 統合またはエンド ツー エンドのテスト (Selenium を使用) では、通常、複数のコンポーネントが正しく連携していることを検証します。必要に応じて、これらにモック バックエンドを使用できます。

Karma/Mocha 単体テストを作成して、そのファイル アップロード アクションに存在する可能性のある処理の詳細を確認できます。ここでは、UI の下にある個々の JavaScript 関数のエッジ ケースをテストする必要があります。

次に、Selenium テストを作成して、アップロード アクションとファイルのアップロードの期待される結果を純粋にテストできます。正しい要素がページに存在し、アップロード後に期待されるプロパティを持っていることを確認できます。この場合、JavaScript はブラック ボックスです。ユーザーの視点からテストしています。これにより、ユニット テスト済みのコードの一部が実行されますが、そのポイントは、フロント エンドとバック エンド間の接続をテストすることです。

于 2015-09-01T20:30:29.440 に答える