コアポイント

• mocha.jsは、node.jsに基づいた機能が豊富なJavaScriptテストフレームワークであり、Selenium WebDriver 3およびNodeJSと組み合わせてJavaScript機能テストを作成するために使用できます。これには、nodejsおよびjavascriptプログラミング言語の基本に精通する必要があります。
• Mochaは、テストスイートとテストケースモジュールにテストコードを構(gòu)築するためのAPIを提供し、実行とレポートの生成を有効にします。テストスイートのセットアップと斷脫型機能、およびテストケースのセットアップと分解機能をサポートしています。
• Selenium WebDriverは、Webブラウザーを制御し、ユーザーの動作をシミュレートするライブラリであり、Mochajsと統(tǒng)合できます。ブラウザを制御するために「バインディング」と呼ばれる特定の言語ライブラリAPIを提供します。
Mochaで使用される
• Async関數(shù)は、予期しない結(jié)果を避けるために正しく処理する必要があります。これは、「完了」関數(shù)をコールバックチェーンに渡すか、約束を返すことで実行できます。
WebDriverio、Protractor、CodeseptJSなどのその他のフレームワークは、ユーザー向けの構(gòu)成を非表示にし、より良いスクリプト體験のために強化された約束処理を提供するラッパーソリューションを提供します。

この記事はもともとTestProjectで公開されました。

JavaScriptで機能テストを作成する場合、このチュートリアルはUIオートメーションエンジニアに、Selenium WebDriver 3、Mocha、およびNodejsを使用したJavaScriptテストに最適な構(gòu)造化された參照資料を提供します。

JavaScriptは今日、その「悪名高い」過去を克服しているように見えるユビキタスなWeb言語であり、クライアントだけでなくサーバーにとっても信頼性の高いプラットフォームになっています。 mocha.js（または略してMocha）は、node.jsに基づく機能が豊富なJavaScriptテストフレームワークです。

注：このJavaScriptチュートリアルの學(xué)習(xí)を開始するには、nodejsとJavaScriptプログラミング言語の基本に精通する必要があります。

チュートリアルの概要：

Mocha Test Build

はじめに
インストール
CHAIアサーションモジュールのインストール
テストスイートおよびテストケース構(gòu)造
Mochaを使用したテストをビルドします
• Mochaを?qū)g行しているテストスイートとテストケース
• 非同期テストコードの同期を管理します

javascriptセレニウム3を使用して、mochajs

と統(tǒng)合されています

Seleniumの紹介

• セレンのインストール
• webDriver construct
• MochajsをSelenium WebDriver 3
と統(tǒng)合します
バージョンの使用：

• ノードバージョン：6.10.1（lts）
• Mocha：2.5.3
• webdriverjs：3.3.0

1. Mochaを使用したテストをビルドします

mochaはじめに

前述のように、Mochaは、ノードでテストを?qū)g行するJavaScriptテストフレームワークです。 Mochaはノードパッケージ（NPM経由）の形式で提供されるため、Nodeの標(biāo)準(zhǔn)の「アサート」関數(shù)をChaijsなどのアサーションライブラリに置き換えることができます。さらに、Mochaには、フロントエンドおよびユニットテストの自動化のトレンド研究で言及したもう1つの一般的なテスト自動化フレームワークであるJasmineに似たいくつかのコンポーネントがあります。

Mochaは、テストコードをテストスイートに組み込み、実行するためにテストケースモジュールを作成し、テストレポートを生成する方法を指定するAPIを提供します。 Mochaは、コマンドライン（CLI）またはプログラミング（Mocha API）の2つの操作モードを提供します。

インストールmocha

CLIでMochaを使用する場合は、node.jsとしてグローバルにインストールする必要があります。

<code>npm install -g mocha</code>

CHAIアサーションモジュールのインストール

<code>npm install --save chai</code>

–Saveオプションは、グローバルではなく、プロジェクトの範(fàn)囲內(nèi)にモジュールをインストールするために使用されます。

テストスイートおよびテストケース構(gòu)造

Mochaでは、テストスイートは、コールバック関數(shù)を受け入れる「説明」キーワ??ードで定義されます。テストスイートには、獨自のサブテストスイートなどを含めることができるサブ/內(nèi)部テストスイートを含めることができます。テストケースは、コールバック関數(shù)を受け入れ、テストコードを含む「it」関數(shù)で表されます。

Mochaは、テストスイート設(shè)定とテストケース設(shè)定関數(shù)をサポートしています。 「前」とはテストスイート設(shè)定を意味し、「前」とはテストケース設(shè)定を意味します。 「前の」は、実際にはスイート內(nèi)のすべてのユースケースの一般的なセットアップであり、各ユースケースの前に実行されます。

セットアップと同様に、Mochaはテストスイートとテストケースの分解機能をサポートしています。 「After」はテストスイートの分解を意味し、「AfterEach」はテストケースの分解を意味します。これらの2つの機能は、テストスイートと各テストケースの後にそれぞれ実行されます。

test_suite.jsなどのテストスイートを「ホスト」するファイルを作成し、以下を書き込みます

Mochaテストスイートとテストケースを?qū)g行します

describe("Inner Suite 1", function(){

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    it("Test-1", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-2", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-3", function(){

        // 測試代碼
        // 斷言

    });

});

Mochaは3つのテスト実行方法をサポートしています：テストスイートファイル全體、「GREP」モードでフィルタリングされたテスト、およびディレクトリツリーグレップフィルタリングのテスト検索（再帰オプション）

テストスイートファイル全體を?qū)g行します：

特定のテストスイートファイルから特定のスイートまたはテストを?qū)g行します。

mocha /path/to/test_suite.js

キットが選択されている場合、すべてのサブキットおよび/またはテストが実行されます。

ディレクトリツリーで再帰的に検索して、特定のスイートまたはテストファイルを?qū)g行します。

mocha -g “Test-2” /path/to/test_suite.js

エクステンションのCLIオプション：

mocha --recursive -g “Test-2” /directory/

非同期テストコードの同期を管理します

Mochaで非同期関數(shù)を使用し、正しく処理されない場合、対処に問題があることに気付くかもしれません。テストケースで非同期コードを使用する場合（HTTPリクエスト、ファイル、セレンなど）、次のガイドラインに従って予期しない結(jié)果を克服します。

1. done function

テスト関數(shù)（IT）では、完了した関數(shù)をコールバックチェーンに渡す必要があります。これにより、最後のステップの後に実行されることが保証されます。

次の例では、完了関數(shù)を強調(diào)しています。この場合、テスト関數(shù)の最後に3秒のタイムアウトが発生します。

<code>npm install -g mocha</code>

2. 約束に戻ります

約束を返すことは、非同期関數(shù)を使用するときにMochaがすべてのコード行を?qū)g行したことを確認(rèn)する別の方法です（この場合、「完了」関數(shù)は必要ありません。）

<code>npm install --save chai</code>

2. JavaScriptセレニウム3 Mochajsとの統(tǒng)合

Seleniumの紹介

Seleniumは、Webブラウザーを制御し、ユーザーの動作をシミュレートするライブラリです。より具體的には、Seleniumはユーザーに「バインディング」と呼ばれる特定の言語ライブラリAPIを提供します。 「バインディング」は、中間コンポーネントでリクエストを?qū)g行するクライアントとして機能し、最終的にブラウザを制御するサーバーとして機能します。

Selenium APIまたはバインディングは、すべての一般的な開発言語に存在するようになりました?，F(xiàn)在、すべての言語の実裝は、API関數(shù)の命名規(guī)則の一貫性を維持することに同意します。

中間コンポーネントは、実際のWebDriver、各セレンパッケージに局所的に見つかったセレンスタンダローンサーバー、およびモジラのジェックドリバー、クロムのクロムドライバーなどなど、ベンダーのネイティブブラウザー制御ドライバーである可能性があります。さらに、Selenium WebDriverは、「JSONWIREDプロトコル」を介してブラウザドライバーと通信し、W3C Web標(biāo)準(zhǔn)になります。

セレンのインストール

SeleniumとMochajsの統(tǒng)合を掘り下げる前に、SeleniumおよびNodejsの実裝についてすぐに學(xué)びます。

JavaScriptのSelenium API（またはSelenium JavaScriptバインディング）を使用するには、対応するモジュールをインストールする必要があります。

この時點で、JavaScript Selenium WebDriverをWebDriverjsと呼ぶこともできることは明らかです（NPMではありませんが）。 WebDriveJSは、他のライブラリ/モジュール（WebDriverio、分度器など）とは異なります。 Selenium-Webdriverは公式のオープンソースBasic JavaScript Seleniumライブラリであり、他のライブラリはWebDriverjs APIの上に構(gòu)築されたラッパーライブラリ/フレームワークであり、可用性とメンテナンスを強化すると主張しています。

describe("Inner Suite 1", function(){

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    it("Test-1", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-2", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-3", function(){

        // 測試代碼
        // 斷言

    });

});

nodejsコードでは、モジュールは次の方法で使用されます。

webDriver construct

mocha /path/to/test_suite.js

セレンを使用できるようにするには、対応する「WebDriver」オブジェクトを構(gòu)築し、ブラウザを制御する必要があります。以下では、複數(shù)の機能をリンクすることにより、「ビルダー」パターンを使用してWebドライバーオブジェクトを構(gòu)築する方法を確認(rèn)できます。

オプション付き

ビルダー

上記のコードでは、forbrowser（）メソッドはFirefoxを明示的に設(shè)定しますが、複數(shù)のブラウザーの構(gòu)成を集約するWebDriverオブジェクトの構(gòu)築を正常に構(gòu)築しました（「オプション」メソッドに注意してください）。

ユーザーは、実行時にSelenium_Browser環(huán)境変數(shù)を設(shè)定して、目的のブラウザを設(shè)定できます。 forbrowserによって設(shè)定されたオプションをオーバーライドします。これは、セット

mocha -g “Test-2” /path/to/test_suite.js

オプションを介して複數(shù)のブラウザー機能を設(shè)定しているためです。

ブラウザプロパティには、テストされているブラウザに応じて、複數(shù)のタイプの情報を含めることができます。たとえば、Mozillaのプロパティでは、必要な「プロファイル」構(gòu)成を次のように設(shè)定できます。

<code>npm install -g mocha</code>

それから、上記のビルダースニペットでは、次のことを追加できます。

機能付きのビルダー

<code>npm install --save chai</code>

Selenium WebDriver JavaScript APIドキュメントでは、WebDriverを構(gòu)築するいくつかの方法について説明しています。別の可能なアプローチは、必要なすべてのドライバー構(gòu)成を機能させることです。

setoptionsが設(shè)定されている場合、構(gòu)成が上書きされることに注意してください（たとえば、プロキシ構(gòu)成）。

セレンWebDriver制御フローと約束管理

describe("Inner Suite 1", function(){

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    it("Test-1", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-2", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-3", function(){

        // 測試代碼
        // 斷言

    });

});

JavaScriptとnodejsは非同期原理に基づいているため、

セレンWebDriverは同様に動作します。コールバックピラミッドを回避し、テストエンジニアがスクリプトの経験とコードの読みやすさと保守性を改善するのを支援するために、Selenium WebDriverオブジェクトには「ControlFlow」を使用してPromise Managerが含まれています。 「ControlFlow」は、非同期WebDriverコマンドの実行を擔(dān)當(dāng)するクラスです。

実際、各コマンドはドライバーオブジェクトで実行され、約束を返します。解析された約束値を処理する必要がない限り、次のように次のコマンドを「then」にネストする必要はありません。

JavaScriptテストのヒントSelenium WebDriverとMocha

ドライバーはWebDriverオブジェクトであり、約束のオブジェクトではありません

mocha /path/to/test_suite.js

driver.getTitle（）またはdriver.get（url）またはその他のSeleniumコマンドがPromiseオブジェクトを返します！

これは、次のことを行うことができることを意味します：
2. さらに、ドライバー自體は非同期であるため、次の操作は機能しません。

注：タイトルは、実際の解析値ではなく、約束のオブジェクトです。

mocha -g “Test-2” /path/to/test_suite.js

mochajs selenium webdriver

1. 一般的に言えば、Selenium WebDriverは、通常のnodejsスクリプトに使用されるため、Mochajsと統(tǒng)合できます。ただし、Mochaは、done（）を呼び出す前に非同期関數(shù)が完了するか、約束を返すことがわからないため、非常に慎重に処理する必要があります。

約束ベース

mocha --recursive -g “Test-2” /directory/

Seleniumコマンドは自動的に登録され、WebDriverコマンドが正しい順序で実行され、約束を返すようにします。

次のコードには、（前、each前、eachの後）またはテストケースボディがフックを示しています。

以下が実行されます：

「my_service」のブラウザページをロードする
ID "username"
2. を使用してテキストフィールドを見つけます
「my_username」
3. を使用してID "username"でテキストフィールドに入力します
ページのタイトルを検索し、「my_title」に等しいかどうかを確認(rèn)します
WebDriver出口とブラウザウィンドウが閉じます。ブラウザプロセスが終了します。

mochajs

のセレンWebDriverサポート

セレンWebDriverとMochaを使用してJavaScriptテストを簡単に実行するために、WebDriverは、テストオブジェクトを使用してMoChajsテスト関數(shù)（前、EACH以前、ITなど）をラッピングすることにより、MoChajsの使用を促進します。これにより、WebDriverの使用に関する認(rèn)識を提供するスコープが作成されます。したがって、約束を返す必要はありません。

最初に、対応するモジュールをロードする必要があります：

<code>npm install -g mocha</code>

すべてのMocha関數(shù)は「テスト」から始まります

など。次に、上記のコードは次のように完全に書き直されます

<code>npm install --save chai</code>

結(jié)論

describe("Inner Suite 1", function(){

    before(function(){

        // 在測試套件執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    after(function(){

        // 測試套件執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    beforeEach(function(){

        // 在測試用例執(zhí)行之前執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    afterEach(function(){

        // 測試用例執(zhí)行完成后執(zhí)行某些操作
        // 無論是否有失敗的用例

    });

    it("Test-1", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-2", function(){

        // 測試代碼
        // 斷言

    });

    it("Test-3", function(){

        // 測試代碼
        // 斷言

    });

});

このチュートリアルでは、Selenium WebDriverとMochajsを使用したJavaScriptテストを體験する機會があります。 Nodejs、Mochajs、およびSelenium WebDriverの非同期性により、他のプログラミング言語のバインディングと比較して大きな違いがあることを覚えておく必要があります。 約束を作成する関數(shù)（カスタムテストライブラリ関數(shù)またはMochajsフック/テストケース）を作成し続ける限り、Mochaはそれらを正しい順序で実行します。

WebDriverio、Protractor、CodeseptJSなどの他のフレームワークは、ユーザー向けの構(gòu)成を隠すことができるラッパーソリューションを提供し、多くのテスト自動化の専門家がこれに役立つ可能性があるため、より良いスクリプトエクスペリエンスのためにいくつかの強化された約束処理を提供します。

Selenium WebDriverおよびMochaを使用したJavaScriptのテストについて

FAQ（FAQ）

JavaScriptテスト用にSelenium WebDriverをセットアップする方法は？

JavaScriptテスト用のSelenium WebDriverのセットアップには、いくつかのステップが含まれています。まず、システムにnode.jsとnpm（ノードパッケージマネージャー）をインストールする必要があります。インストールが完了したら、npmを使用して、コマンドNPMインストールSelenium-Webdriverを?qū)g行してSelenium WebDriverをインストールできます。また、Google Chrome用のChromedriverなどのブラウザドライバーをインストールする必要があります。これは、NPMインストールChromeDriverを?qū)g行することで実行できます。これらのインストールが完了したら、Selenium WebDriverを使用してJavaScriptでテストスクリプトの書き込みを開始できます。

モカとは何ですか？なぜセレンwebドライバーでそれを使用するのですか？ Mochaは、テストケースを作成および整理するためのシンプルで柔軟な方法を提供する人気のJavaScriptテストフレームワークです。 Selenium WebDriverでよく使用されます。これは、ネットワークリクエストやブラウザ操作などの遅延操作を処理するために重要な非同期テストなどの機能を提供するためです。また、Mochaは簡潔で明確な構(gòu)文を提供して、テストケースを書きや理解しやすくします。

Selenium WebDriverとMochaを使用して基本的なテストケースを作成する方法は？

Selenium WebDriverとMochaを使用した基本的なテストケースの作成には、新しいJavaScriptファイルの作成とMoChaのテストケースの作成が含まれ、ブロックされます。このブロックでは、Selenium WebDriverのAPIを使用して、Webページに移動したり、要素と対話したり、プロパティをチェックしたりするなど、ブラウザと対話できます。基本的な例は次のとおりです

<code>npm install -g mocha</code>

私のテストケースで非同期操作を処理する方法は？

JavaScriptのAsync/Waing syntaxを使用して、テストケースで非同期操作を処理できます。これにより、非同期コードを同期的に記述することができ、読みやすく理解しやすくなります。 Selenium WebDriverのコンテキストでは、Webページに移動したり、要素と対話したり、待機條件が非同期であり、Async/awaitを使用して処理できます。

Mochaを使用してテストケースを?qū)g行する方法は？

Mochaでテストケースを?qū)g行するには、Mochaコマンドを使用してテストファイルへのパスを使用できます。たとえば、テストファイルがtest.jsという名前の場合、コマンドmocha test.jsを使用して実行できます。 Mochaは、このファイルのすべてのテストケースを自動的に見つけて実行します。

私のテストケースでアサーションを使用する方法は？

テストケースのアサーションを使用して、特定の條件が満たされていることを確認(rèn)できます。たとえば、Webページのタイトルが検索を?qū)g行した後、期待を満たしていると主張する場合があります。 JavaScriptの組み込みアサートモジュールまたはChaiなどのサードパーティライブラリを使用して、アサーションを作成できます。

私のテストケースでエラーを処理する方法は？

JavaScript Try/Catch構(gòu)文を使用して、テストケースのエラーを処理することができます。これにより、テストケースの実行中に発生したエラーをキャプチャし、例えばログエラーやテストケースの障害により、適切に処理できます。

Webページ上の要素と対話する方法は？

Selenium WebDriverのAPIを使用して、Webページ上の要素と対話できます。これには、要素のクリック、入力フィールドの入力、および要素のプロパティの読み取りが含まれます。これらの操作は、driver.findelementメソッドを使用して実行されます。これは、対話できるWebElementオブジェクトを返します。

私のテストケースで條件を待つ方法は？

Selenium WebDriverのDriver.Waitメソッドを使用して、テストケースの條件を待つことができます。この方法では、條件付きのオプションのタイムアウトがかかり、條件が満たされるか、タイムアウトに達(dá)するまで待機します。 utモジュールを使用して、stitleisなどの條件を作成して、Webページのタイトルが値になるのを待つことができます。

さまざまなブラウザでテストケースを?qū)g行するにはどうすればよいですか？

WebDriverインスタンスを作成するときにブラウザを指定することにより、さまざまなブラウザでテストケースを?qū)g行できます。たとえば、new Builder（）を使用してFirefoxでテストケースを?qū)g行したり、forbrowser（ 'firefox'）を使用したり、new Builder（）を使用してChromeで実行したりできます。適切なブラウザドライバーを機能させる必要があります。

以上がSelenium WebDriverとMochaでJavaScriptをテストする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。