コアポイント
この記事はもともとTestProjectで公開されました。
JavaScriptで機能テストを作成する場合、このチュートリアルはUIオートメーションエンジニアに、Selenium WebDriver 3、Mocha、およびNodejsを使用したJavaScriptテストに最適な構造化された参照資料を提供します。JavaScriptは今日、その「悪名高い」過去を克服しているように見えるユビキタスなWeb言語であり、クライアントだけでなくサーバーにとっても信頼性の高いプラットフォームになっています。 mocha.js（または略してMocha）は、node.jsに基づく機能が豊富なJavaScriptテストフレームワークです。
注：このJavaScriptチュートリアルの学習を開始するには、nodejsとJavaScriptプログラミング言語の基本に精通する必要があります。
チュートリアルの概要：
Mochaは、テストコードをテストスイートに組み込み、実行するためにテストケースモジュールを作成し、テストレポートを生成する方法を指定するAPIを提供します。 Mochaは、コマンドライン（CLI）またはプログラミング（Mocha API）の2つの操作モードを提供します。
インストールmocha
<code>npm install -g mocha</code>
<code>npm install --save chai</code>
テストスイートおよびテストケース構造
Mochaは、テストスイート設定とテストケース設定関数をサポートしています。 「前」とはテストスイート設定を意味し、「前」とはテストケース設定を意味します。 「前の」は、実際にはスイート内のすべてのユースケースの一般的なセットアップであり、各ユースケースの前に実行されます。
セットアップと同様に、Mochaはテストスイートとテストケースの分解機能をサポートしています。 「After」はテストスイートの分解を意味し、「AfterEach」はテストケースの分解を意味します。これらの2つの機能は、テストスイートと各テストケースの後にそれぞれ実行されます。
test_suite.jsなどのテストスイートを「ホスト」するファイルを作成し、以下を書き込みます
Mochaテストスイートとテストケースを実行します
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(){
// 测试代码
// 断言
});
});
特定のテストスイートファイルから特定のスイートまたはテストを実行します。
mocha /path/to/test_suite.js
ディレクトリツリーで再帰的に検索して、特定のスイートまたはテストファイルを実行します。
mocha -g “Test-2” /path/to/test_suite.js
mocha --recursive -g “Test-2” /directory/
Mochaで非同期関数を使用し、正しく処理されない場合、対処に問題があることに気付くかもしれません。テストケースで非同期コードを使用する場合（HTTPリクエスト、ファイル、セレンなど）、次のガイドラインに従って予期しない結果を克服します。
テスト関数（IT）では、完了した関数をコールバックチェーンに渡す必要があります。これにより、最後のステップの後に実行されることが保証されます。
次の例では、完了関数を強調しています。この場合、テスト関数の最後に3秒のタイムアウトが発生します。
<code>npm install -g mocha</code>
約束を返すことは、非同期関数を使用するときにMochaがすべてのコード行を実行したことを確認する別の方法です（この場合、「完了」関数は必要ありません。）
<code>npm install --save chai</code>
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の上に構築されたラッパーライブラリ/フレームワークであり、可用性とメンテナンスを強化すると主張しています。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(){
// 测试代码
// 断言
});
});nodejsコードでは、モジュールは次の方法で使用されます。
webDriver construct
mocha /path/to/test_suite.js
上記のコードでは、forbrowser（）メソッドはFirefoxを明示的に設定しますが、複数のブラウザーの構成を集約するWebDriverオブジェクトの構築を正常に構築しました（「オプション」メソッドに注意してください）。
mocha -g “Test-2” /path/to/test_suite.js
ブラウザプロパティには、テストされているブラウザに応じて、複数のタイプの情報を含めることができます。たとえば、Mozillaのプロパティでは、必要な「プロファイル」構成を次のように設定できます。
<code>npm install -g mocha</code>
機能付きのビルダー
<code>npm install --save chai</code>
セレンWebDriver制御フローと約束管理
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(){
// 测试代码
// 断言
});
});セレンWebDriverは同様に動作します。コールバックピラミッドを回避し、テストエンジニアがスクリプトの経験とコードの読みやすさと保守性を改善するのを支援するために、Selenium WebDriverオブジェクトには「ControlFlow」を使用してPromise Managerが含まれています。 「ControlFlow」は、非同期WebDriverコマンドの実行を担当するクラスです。
ドライバーはWebDriverオブジェクトであり、約束のオブジェクトではありません
mocha /path/to/test_suite.js
注：タイトルは、実際の解析値ではなく、約束のオブジェクトです。
mocha -g “Test-2” /path/to/test_suite.js
mocha --recursive -g “Test-2” /directory/
Seleniumコマンドは自動的に登録され、WebDriverコマンドが正しい順序で実行され、約束を返すようにします。
以下が実行されます：
最初に、対応するモジュールをロードする必要があります：
<code>npm install -g mocha</code>
など。次に、上記のコードは次のように完全に書き直されます
<code>npm install --save chai</code>
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(){
// 测试代码
// 断言
});
});このチュートリアルでは、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を使用した基本的なテストケースの作成には、新しいJavaScriptファイルの作成とMoChaのテストケースの作成が含まれ、ブロックされます。このブロックでは、Selenium WebDriverのAPIを使用して、Webページに移動したり、要素と対話したり、プロパティをチェックしたりするなど、ブラウザと対話できます。基本的な例は次のとおりです
<code>npm install -g mocha</code>
Mochaを使用してテストケースを実行する方法は？
私のテストケースでアサーションを使用する方法は？
私のテストケースでエラーを処理する方法は？
Webページ上の要素と対話する方法は？
私のテストケースで条件を待つ方法は？
さまざまなブラウザでテストケースを実行するにはどうすればよいですか？
以上がSelenium WebDriverとMochaでJavaScriptをテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
