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

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

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

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

キーポイント

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

nightwatch.jsはじめに

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

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

インストールnightwatch

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

npm install --save-dev nightwatch

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

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

npm install --save-dev nightwatch

わかりました、準(zhǔn)備はできました。始めましょう。

構(gòu)成nightwatch

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

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

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

この場(chǎng)合、特定のセレン構(gòu)成と特定のテスト設(shè)定を使用して、テストが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
};

この構(gòu)成オブジェクトを使用すると、Seleniumに

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

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

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

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

nightwatchの

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

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

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

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

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

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

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

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

わかりました、今では正しい構(gòu)成ができました。最初のテストを書く時(shí)が來ました！

ナイトウォッチテストの執(zhí)筆

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

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

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

npm install --save-dev nightwatch

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

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

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

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()を使用してコマンドリストを終了します。

これはとても簡(jiǎn)単です！これで、テストを?qū)g行して機(jī)能するかどうかを確認(rèn)できます。

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

これは、次のような結(jié)果を與えるはずです：

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

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

package.json

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

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

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

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

を使用できます。

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

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

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

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

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

ファイルを作成できます。ファイル名は、このファイルで指定されたすべての構(gòu)成を取得するためのキーとして使用されるため、意味のある名前を付けることをお?jiǎng)幛幛筏蓼埂?

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

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

login.js

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

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

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

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

npm install --save-dev nightwatch

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

複數(shù)の環(huán)境を使用して

さまざまな環(huán)境で機(jī)能テストを?qū)g行する能力は、ローカル作業(yè)がユーザーのパスを壊さないこと、またはステージング環(huán)境と生産環(huán)境も同じように機(jī)能することを保証するために非常に便利です。

特定の環(huán)境でテストを?qū)g行するには、CLIの

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

ステージング環(huán)境を構(gòu)成に追加しましょう。

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

さて、テストを?qū)g行すると、

オプションは環(huán)境によって異なります。 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は、エンドツーエンドの機(jī)能テストを作成するためのJavaScriptフレームワークです。 Selenium WebDriver APIに依存しており、異なるブラウザを自動(dòng)的に実行できます。

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

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

nightwatch.js faq（faq）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

nightwatch.jsを使用して並行してテストを?qū)g行する方法は？

nightwatch.jsは、並列テストの実行をネイティブにサポートしています。構(gòu)成ファイルで並行して実行するテストを指定できます。テストを?qū)g行すると、nightwatch.jsはテストを複數(shù)のワーカープログラムに自動(dòng)的に割り當(dāng)て、全體的なテスト実行時(shí)間を高速化します。

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

以上がnightwatch.jsを使用したJavaScript機(jī)能テストの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。