ホームページ >ウェブフロントエンド >jsチュートリアル >Selenium WebDriverとMochaでJavaScriptをテストする方法

Selenium WebDriverとMochaでJavaScriptをテストする方法

尊渡假赌尊渡假赌尊渡假赌オリジナル: 2025-02-16 13:21:09436ブラウズ

How to Test Your JavaScript with Selenium WebDriver and Mocha

コアポイント

mocha.jsは、node.jsに基づいた機能が豊富なJavaScriptテストフレームワークであり、Selenium WebDriver 3およびNodeJSと組み合わせてJavaScript機能テストを作成するために使用できます。これには、nodejsおよびjavascriptプログラミング言語の基本に精通する必要があります。
Mochaは、テストスイートとテストケースモジュールにテストコードを構築するためのAPIを提供し、実行とレポートの生成を有効にします。テストスイートのセットアップと断脱型機能、およびテストケースのセットアップと分解機能をサポートしています。
Selenium WebDriverは、Webブラウザーを制御し、ユーザーの動作をシミュレートするライブラリであり、Mochajsと統合できます。ブラウザを制御するために「バインディング」と呼ばれる特定の言語ライブラリAPIを提供します。
Async関数は、予期しない結果を避けるために正しく処理する必要があります。これは、「完了」関数をコールバックチェーンに渡すか、約束を返すことで実行できます。

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

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

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

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

チュートリアルの概要：

Mochaを実行しているテストスイートとテストケース
非同期テストコードの同期を管理します

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

Seleniumの紹介

セレンのインストール
webDriver construct
MochajsをSelenium WebDriver 3

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

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

mochaはじめに

前述のように、Mochaは、ノードでテストを実行するJavaScriptテストフレームワークです。 Mochaはノードパッケージ（NPM経由）の形式で提供されるため、Nodeの標準の「アサート」関数を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オプションは、グローバルではなく、プロジェクトの範囲内にモジュールをインストールするために使用されます。

テストスイートおよびテストケース構造

Mochaでは、テストスイートは、コールバック関数を受け入れる「説明」キーワードで定義されます。テストスイートには、独自のサブテストスイートなどを含めることができるサブ/内部テストスイートを含めることができます。テストケースは、コールバック関数を受け入れ、テストコードを含む「it」関数で表されます。

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

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

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

Mochaテストスイートとテストケースを実行します

<code class="language-javascript">describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

});</code>

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

テストスイートファイル全体を実行します：

特定のテストスイートファイルから特定のスイートまたはテストを実行します。

<code class="language-bash">mocha /path/to/test_suite.js</code>

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

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

<code class="language-bash">mocha -g “Test-2” /path/to/test_suite.js</code>

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

<code class="language-bash">mocha --recursive -g “Test-2” /directory/</code>

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

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

done function

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

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

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

約束に戻ります

約束を返すことは、非同期関数を使用するときにMochaがすべてのコード行を実行したことを確認する別の方法です（この場合、「完了」関数は必要ありません。）

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

JavaScriptセレニウム3 Mochajsとの統合

Seleniumの紹介

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

Selenium APIまたはバインディングは、すべての一般的な開発言語に存在するようになりました。現在、すべての言語の実装は、API関数の命名規則の一貫性を維持することに同意します。

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

セレンのインストール

SeleniumとMochajsの統合を掘り下げる前に、SeleniumおよびNodejsの実装についてすぐに学びます。

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

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

<code class="language-javascript">describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

});</code>

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

webDriver construct

<code class="language-bash">mocha /path/to/test_suite.js</code>

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

オプション付き

ビルダー

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

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

<code class="language-bash">mocha -g “Test-2” /path/to/test_suite.js</code>

オプションを介して複数のブラウザー機能を設定しているためです。

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

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

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

機能付きのビルダー

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

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

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

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

<code class="language-javascript">describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

});</code>

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

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

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

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

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

<code class="language-bash">mocha /path/to/test_suite.js</code>

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

さらに、ドライバー自体は非同期であるため、次の操作は機能しません。

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

<code class="language-bash">mocha -g “Test-2” /path/to/test_suite.js</code>

mochajs selenium webdriver

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

約束ベース

<code class="language-bash">mocha --recursive -g “Test-2” /directory/</code>

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

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

以下が実行されます：

「my_service」のブラウザページをロードする

ID "username"
を使用してテキストフィールドを見つけます
「my_username」
を使用してID "username"でテキストフィールドに入力します
ページのタイトルを検索し、「my_title」に等しいかどうかを確認します

WebDriver出口とブラウザウィンドウが閉じます。ブラウザプロセスが終了します。

mochajs

のセレンWebDriverサポート

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

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

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

すべてのMocha関数は「テスト」から始まります

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

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

結論

<code class="language-javascript">describe("Inner Suite 1", function(){

    before(function(){

        // 在测试套件执行之前执行某些操作
        // 无论是否有失败的用例

    });

    after(function(){

        // 测试套件执行完成后执行某些操作
        // 无论是否有失败的用例

    });

    beforeEach(function(){

        // 在测试用例执行之前执行某些操作
        // 无论是否有失败的用例

    });

    afterEach(function(){

        // 测试用例执行完成后执行某些操作
        // 无论是否有失败的用例

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

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

        // 测试代码
        // 断言

    });

});</code>

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

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

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

FAQ（FAQ）

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

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

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

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を使用してテストケースを実行する方法は？

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

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

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

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

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

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

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

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

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

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

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

以上がSelenium WebDriverとMochaでJavaScriptをテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript firefox chrome npm try catch 回调函数递归 JS 对象 promise 异步 http ui 自动化

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScriptでの適切なエラー処理のガイド次の記事：JavaScriptでの適切なエラー処理のガイド

続きを見る

Selenium WebDriverとMochaでJavaScriptをテストする方法

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

mochaはじめに

JavaScriptセレニウム3 Mochajsとの統合

Seleniumの紹介

セレンのインストール

オプション付き

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

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

のセレンWebDriverサポート

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

関連記事