nightwatch.jsを使用したJavaScript機能テスト

Eric Elliottは、JavaScriptテストに関する記事を書きました：JavaScriptテスト：ユニットテスト、機能テスト、および統合テストは、さまざまなタイプのテストとどのテストを使用するかを説明します。

この記事では、JavaScriptの機能テストをより詳細に調べ、nightwatch.jsライブラリを使用して実証します。

開始する前に、機能テストとは何か、そしてそれが重要な理由を確認しましょう。簡単に言えば、機能テストは、アプリケーションがユーザーの観点から期待どおりに機能するように設計されています。

単体テストや統合テストなどの技術的なテストについては話していません。ここでの目標は、ユーザーがプラットフォームへのログイン、製品の購入など、特定のシナリオをシームレスに実行できるようにすることです。

キーポイント

• nightwatch.jsは、node.jsに基づくエンドツーエンドのテストフレームワークであり、Webブラウザーの自動化に依存しているため、スクリプト化されたシナリオを作成してから自動的に実行できます。
• nightwatch.jsはnode.jsをマシンにインストールする必要があり、Javaで実行されているSelenium WebDriverサーバーが必要なSelenium WebDriver APIに依存しているため、Java開発キット（JDK 7）をインストールする必要があります。ユーザーの環境。
• nightwatch.jsの構成は、プロジェクトのルートにあるnightwatch.jsonファイルまたはnightwatch.conf.jsファイルに配置できます。生産環境。
• nightwatch.jsは、テストされたページまたはページスニペットをオブジェクトに包むページオブジェクトメソッドをサポートして、基礎となるHTMLと共通構成を抽象化し、シナリオを簡素化し、テストスイートのメンテナンスを容易にします。

nightwatch.jsはじめに

nightwatch.jsは、node.jsに基づいたエンドツーエンドのテストフレームワークとして自分自身を説明しています。 Webブラウザーの自動化を促進するために設計されたプロジェクトであるSeleniumに依存しています。

ユーザーフレンドリーな構文を使用して、nightwatch.jsはシナリオを「スクリプト」し、ブラウザによって自動的に実行されることがあります（必ずしもヘッドレスではありません）。

インストールnightwatch

nightwatch自体はnode.jsモジュールです。つまり、マシンにnode.jsをインストールする必要があります。最も簡単な方法は、NVMなどのバージョンマネージャーを使用することです。 NightWatchはNPMに配布されるため、他のモジュールをインストールするようにインストールできます。-gでグローバルにインストールするか、--save-devを使用して現在のプロジェクトにインストールできます。

npm install --save-dev nightwatch

NightwatchはSelenium WebDriver APIに依存するため、Selenium WebDriverサーバーが必要です。 Javaで実行されます。つまり、環境にJava Development Kit（JDK 7）をインストールする必要があります。 Oracle WebサイトからJDKをダウンロードできます。

ダウンロードとインストールが完了した後、java -versionを使用して、Javaがマシンで利用できることを確認できます。最後のステップは、Seleniumダウンロードページから瓶としてパッケージ化されたSelenium Standaloneサーバーをダウンロードすることです。プロジェクトのbinフォルダーに入れておくことをお勧めします。

npm install --save-dev nightwatch

わかりました、準備はできました。始めましょう。

構成nightwatch

想像できるように、ナイトウォッチには多くの構成があります。幸いなことに、始めるためにすべてを知る必要はありません。構成は、プロジェクトのルートディレクトリのnightwatch.jsonファイルまたはnightwatch.conf.jsファイルに配置できます。後者を使用することをお勧めします。これは、より柔軟で、コメントを追加できるためです。

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

注：構成ファイルがより小さな構成オブジェクトに分割され、JSONファイルがこれを許可しない場合、私は個人的に読みやすいと思います。

この場合、特定のセレン構成と特定のテスト設定を使用して、テストがtestsフォルダーにあることをナイトウォッチに伝えます。それを一つ一つ見てみましょう：

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

この構成オブジェクトを使用すると、Seleniumに

で実行するように指示します。これはたまたまナイトウォッチのデフォルト値です。また、ダウンロードして127.0.0.1:4444フォルダーに保存されたSeleniumサーバーを使用して自動的に起動することを確認します。 bin

注：より高度な使用については、すべてのSeleniumオプションのリストを確認してください。

実際のテストセットアップを続行します：

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

nightwatchの

オプションは、キーが各環境の名前であるオブジェクトが別の構成オブジェクトにマッピングされるオブジェクトを期待しています。この場合、カスタム環境を（まだ）セットアップしていないため、デフォルトの環境を使用します。後で、ステージングまたは生産テスト環境を作成できます。 test_settings

環境構成では、どのURLを開くか（たとえば、ステージング環境のURLが異なる場合）、どのブラウザーを使用するかをテストの実行に使用する必要がある環境に伝えます。

注：より高度な使用については、すべてのテストオプションのリストを確認してください。

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

この場合、Firefoxを使用し、JavaScriptを有効にし、SSL証明書を受け入れます。さらに一歩進んで、特定のブラウザバージョン（

を使用して）またはオペレーティングシステム（versionを使用）を指定できます。 platform

注：より高度な使用法については、すべての機能オプションのリストを確認してください。

わかりました、今では正しい構成ができました。最初のテストを書く時が来ました！

ナイトウォッチテストの執筆

テストでは、電子メールフィールド、パスワードフィールド、および送信ボタンを備えた

にあるログインページを検討します。フォームを送信した後、ユーザーは「ニュースフィード」を表示するページにリダイレクトする必要があります。 /login

構成では、テストがtestsという名前のフォルダーにあることを指定します。これを作成して、testsフォルダーとlogin.jsという名前のファイルを作成しましょう。

npm install --save-dev nightwatch

このファイルは、シナリオを説明するオブジェクトをエクスポートします。各キー（複数の場合）は、実行する手順を含む関数にマッピングされたテストの名前です。

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

テスト関数は、シーンを説明するために必要なAPIを提供するオブジェクトを公開します。最初に行うことは、ログインURLに移動することです。次に、フィールドに記入してボタンを押します。最後に、「ニュースフィード」テキストが表示されているかどうかを確認してください。

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

注：セレンセッションが適切に閉じられるように、必ず.end()を使用してコマンドリストを終了します。

これはとても簡単です！これで、テストを実行して機能するかどうかを確認できます。

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

これは、次のような結果を与えるはずです：

注：Firefox 47のリリースにより、Firefoxdriverの拡張ベースのバージョンが動作を停止しました。これは、Firefox 47.1およびSelenium 2.53.1で修正されています。別のブラウザを使用してテストを実行するには、プロジェクトのWikiを確認してください。

私たちができる最後のことは、毎回ナイトウォッチバイナリにアクセスしないようにすることです。

package.json

ナイトウォッチテストを改善

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

多くの機能的なテストを行うと、多くの重複情報が得られるため、メンテナンスが行われます（はい、テストスイートにもメンテナンスが必要です）。これを防ぐために、ページオブジェクト

を使用できます。

エンドツーエンドのテストの世界では、ページオブジェクトアプローチは、ページ（またはページフラグメント）をオブジェクトに包むことを含む一般的なパターンです。目標は、基礎となるHTMLと共通構成を抽象化して、シナリオを簡素化することです。

幸いなことに、ナイトウォッチにはページオブジェクトを簡単に処理する方法があります。最初に行う必要があることは、構成に

オプションを追加することです。

は理にかなっていると思いますが、必要なフォルダーを指定できます。

page_objects_path tests/pagesこのフォルダーで

ファイルを作成できます。ファイル名は、このファイルで指定されたすべての構成を取得するためのキーとして使用されるため、意味のある名前を付けることをお勧めします。

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

このファイルでは、将来のシナリオを簡単に書くために、フレンドリーな名前のHTML要素をいくつかのHTML要素とエイリアスを指定します。

login.js

ハードコードされたURLがないことに注意してください。代わりに、環境構成で定義されている

オプションに依存します。このように、ページオブジェクトにはコンテキストがなく、環境に関係なく機能します。

ページオブジェクトを使用するようにテストを変更することは非常に簡単です。まず、クライアントを介してページオブジェクトからページを取得する必要があります。各ページオブジェクトは、ページオブジェクトファイル名にちなんで名付けられた関数として公開されます（例：login()）。

CSSセレクターをエイリアスに置き換えて、@シンボルでプレフィックスして、カスタム名を参照していることを示します。それでおしまい。

npm install --save-dev nightwatch

ページではなく、クライアント自体のセッションを終了する方法に注意してください。

複数の環境を使用して

さまざまな環境で機能テストを実行する能力は、ローカル作業がユーザーのパスを壊さないこと、またはステージング環境と生産環境も同じように機能することを保証するために非常に便利です。

特定の環境でテストを実行するには、CLIの

オプションを使用できます。このオプションを省略すると、デフォルトの環境（既に設定中）が使用されます。 --env

ステージング環境を構成に追加しましょう。

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

さて、テストを実行すると、

オプションは環境によって異なります。 launch_url

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

概要

これらすべてを要約しましょう。 nightwatch.jsは、エンドツーエンドの機能テストを作成するためのJavaScriptフレームワークです。 Selenium WebDriver APIに依存しており、異なるブラウザを自動的に実行できます。

テストの作成には、主に一般的なユーザーシナリオの定義が含まれます。この目的のために、シンプルだが非常に完全なAPIがあります。

ここから私はあなたにそれを任せ、あなたがあなたの最大のプロジェクトのために機能的なテストの作成を開始することを奨励します。

nightwatch.js faq（faq）

JavaScriptテストのnightwatch.jsの主な目的は何ですか？

nightwatch.jsは、node.jsで書かれた強力で使いやすいWebアプリケーションおよびウェブサイトのテストソリューションです。継続的な統合をセットアップし、自動テストを作成するプロセスを簡素化します。 nightwatch.jsは、node.jsユニットテストの書き込みにも使用できます。テストをすばやく書き込むことができるクリーンな構文を提供し、コマンドラインテストランナーが組み込まれており、テストを順次または並列、グループ化、またはスタンドアロンで実行できるようにします。

nightwatch.jsは、他のJavaScriptテストフレームワークと比較してどうですか？

nightwatch.jsは、その単純さと使いやすさのために際立っています。簡潔で明確な構文があり、ライティングテストの複雑さが低下します。他のテストフレームワークとは異なり、nightwatch.jsにはテストランナーが付属しており、他のツールは必要ありません。また、CSSとXPathセレクターをサポートしているため、Webページ上のさまざまな種類の要素を扱う際に普遍的になります。

nightwatch.jsはエンドツーエンドのテストに使用できますか？

はい、nightwatch.jsはエンドツーエンドのテストに最適なツールです。これにより、ユーザーのWebアプリケーションとの対話をシミュレートするテストを作成し、すべてのコンポーネントが期待どおりに連携するようにします。 nightwatch.jsを使用すると、フォームの提出、ページナビゲーション、さらには複雑なプロセスなど、さまざまなシナリオをシミュレートできます。

非同期検査に対処する方法は？

nightwatch.jsは、単純なコールバックメカニズムを使用して、非同期テストを処理します。 nightwatch.jsの各テストコマンドは、定義された順序で非同期に実行されます。テストランナーは、次のコマンドを続行する前に、各コマンドが完了するのを待ちます。これにより、すべてのコマンドが非同期であっても、正しい順序で実行されることが保証されます。

他のテストライブラリでnightwatch.jsを使用できますか？

はい、nightwatch.jsは他のテストライブラリで使用できます。 Mocha、Jasmine、Qunitなどの他のライブラリとシームレスに作業するように設計されています。これにより、複数のテストライブラリを利用して、Webアプリケーション用の包括的なテストスイートを作成できます。

私のプロジェクトにnightwatch.jsを設定する方法は？

nightwatch.jsのセットアップにはいくつかのステップが含まれています。まず、マシンにnode.jsとnpmをインストールする必要があります。その後、NPMを使用してnightwatch.jsをインストールできます。インストールが完了したら、test設定とオプションを指定するnightwatch.jsの構成ファイルを作成する必要があります。その後、テストの作成を開始できます。

nightwatch.jsはクロスブラウザーテストに使用できますか？

はい、nightwatch.jsはクロスブラウザーテストをサポートしています。自動ブラウザー用のツールであるSelenium WebDriverとシームレスに統合します。つまり、nightwatch.jsを使用して複数のブラウザで実行できるテストを作成して、Webアプリケーションがさまざまなプラットフォームで適切に機能するようにすることができます。

nightwatch.jsでテストをデバッグする方法は？

nightwatch.jsは、いくつかのデバッグテストオプションを提供します。 node.jsでビルトインデバッガーを使用するか、Chrome Devtoolsなどの外部ツールを使用できます。 nightwatch.jsは、テストが失敗したときに問題を識別して修正しやすくするために、詳細なエラーメッセージとスタックトレースも提供します。

モバイルテストにnightwatch.jsを使用できますか？

nightwatch.jsは主にWebテストに使用されますが、人気のあるモバイルテストフレームワークであるAppiumと統合することでモバイルテストにも使用できます。これにより、Webテストと同じ構文とツールを使用してモバイルアプリケーションのテストを作成できます。

nightwatch.jsを使用して並行してテストを実行する方法は？

nightwatch.jsは、並列テストの実行をネイティブにサポートしています。構成ファイルで並行して実行するテストを指定できます。テストを実行すると、nightwatch.jsはテストを複数のワーカープログラムに自動的に割り当て、全体的なテスト実行時間を高速化します。

出力は、元の意味を保存しながら、フローと読みやすさを改善するために、元の画像のフォーマットと配置を維持しています。

以上がnightwatch.jsを使用したJavaScript機能テストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。