コアポイント

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

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

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

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

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

チュートリアルの概要：

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には、フロントエンドおよびユニットテストの自動(dòng)化のトレンド研究で言及したもう1つの一般的なテスト自動(dòng)化フレームワークであるJasmineに似たいくつかのコンポーネントがあります。

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

インストールmocha

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

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

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

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

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

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

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

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

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

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

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

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

    before(function(){

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

    });

    after(function(){

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

    });

    beforeEach(function(){

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

    });

    afterEach(function(){

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

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

});

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

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

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

mocha /path/to/test_suite.js

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

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

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

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

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

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

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

1. done function

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

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

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

2. 約束に戻ります

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

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

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

Seleniumの紹介

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

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

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

セレンのインストール

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

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

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

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

    before(function(){

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

    });

    after(function(){

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

    });

    beforeEach(function(){

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

    });

    afterEach(function(){

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

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

});

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

webDriver construct

mocha /path/to/test_suite.js

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

オプション付き

ビルダー

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

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

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

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

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

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

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

機(jī)能付きのビルダー

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

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

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

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

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

    before(function(){

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

    });

    after(function(){

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

    });

    beforeEach(function(){

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

    });

    afterEach(function(){

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

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

});

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

セレンWebDriverは同様に動(dòng)作します。コールバックピラミッドを回避し、テストエンジニアがスクリプトの経験とコードの読みやすさと保守性を改善するのを支援するために、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. さらに、ドライバー自體は非同期であるため、次の操作は機(jī)能しません。

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

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コマンドは自動(dòng)的に登録され、WebDriverコマンドが正しい順序で実行され、約束を返すようにします。

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

以下が実行されます：

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

mochajs

のセレンWebDriverサポート

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

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

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

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

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

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

結(jié)論

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

    before(function(){

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

    });

    after(function(){

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

    });

    beforeEach(function(){

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

    });

    afterEach(function(){

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

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

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

        // 測(cè)試代碼
        // 斷言

    });

});

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

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

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でよく使用されます。これは、ネットワークリクエストやブラウザ操作などの遅延操作を処理するために重要な非同期テストなどの機(jī)能を提供するためです。また、Mochaは簡(jiǎn)潔で明確な構(gòu)文を提供して、テストケースを書きや理解しやすくします。

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

Selenium WebDriverとMochaを使用した基本的なテストケースの作成には、新しいJavaScriptファイルの作成とMoChaのテストケースの作成が含まれ、ブロックされます。このブロックでは、Selenium WebDriverのAPIを使用して、Webページに移動(dòng)したり、要素と対話したり、プロパティをチェックしたりするなど、ブラウザと対話できます?；镜膜世洗韦韦趣辘扦?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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