Eric Elliottは、JavaScriptテストに関する記事を書きました：JavaScriptテスト：ユニットテスト、機能テスト、および統合テストは、さまざまなタイプのテストとどのテストを使用するかを説明します。
この記事では、JavaScriptの機能テストをより詳細に調べ、nightwatch.jsライブラリを使用して実証します。
開始する前に、機能テストとは何か、そしてそれが重要な理由を確認しましょう。簡単に言えば、機能テストは、アプリケーションがユーザーの観点から期待どおりに機能するように設計されています。
単体テストや統合テストなどの技術的なテストについては話していません。ここでの目標は、ユーザーがプラットフォームへのログイン、製品の購入など、特定のシナリオをシームレスに実行できるようにすることです。
キーポイント
nightwatch.jsonファイルまたはnightwatch.conf.jsファイルに配置できます。生産環境。 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
};で実行するように指示します。これはたまたまナイトウォッチのデフォルト値です。また、ダウンロードして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
};オプションは、キーが各環境の名前であるオブジェクトが別の構成オブジェクトにマッピングされるオブジェクトを期待しています。この場合、カスタム環境を（まだ）セットアップしていないため、デフォルトの環境を使用します。後で、ステージングまたは生産テスト環境を作成できます。 test_settings
注：より高度な使用については、すべてのテストオプションのリストを確認してください。
var DEFAULT_CONFIGURATION = {
launch_url: 'http://localhost',
selenium_port: 4444,
selenium_host: 'localhost',
desiredCapabilities: FIREFOX_CONFIGURATION
};
var ENVIRONMENTS = {
default: DEFAULT_CONFIGURATION
};を使用して）またはオペレーティングシステム（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
};
login.js
オプションに依存します。このように、ページオブジェクトにはコンテキストがなく、環境に関係なく機能します。
ページオブジェクトを使用するようにテストを変更することは非常に簡単です。まず、クライアントを介してページオブジェクトからページを取得する必要があります。各ページオブジェクトは、ページオブジェクトファイル名にちなんで名付けられた関数として公開されます（例：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は、他のJavaScriptテストフレームワークと比較してどうですか？
nightwatch.jsはエンドツーエンドのテストに使用できますか？
nightwatch.jsは、単純なコールバックメカニズムを使用して、非同期テストを処理します。 nightwatch.jsの各テストコマンドは、定義された順序で非同期に実行されます。テストランナーは、次のコマンドを続行する前に、各コマンドが完了するのを待ちます。これにより、すべてのコマンドが非同期であっても、正しい順序で実行されることが保証されます。
はい、nightwatch.jsは他のテストライブラリで使用できます。 Mocha、Jasmine、Qunitなどの他のライブラリとシームレスに作業するように設計されています。これにより、複数のテストライブラリを利用して、Webアプリケーション用の包括的なテストスイートを作成できます。
nightwatch.jsのセットアップにはいくつかのステップが含まれています。まず、マシンにnode.jsとnpmをインストールする必要があります。その後、NPMを使用してnightwatch.jsをインストールできます。インストールが完了したら、test設定とオプションを指定するnightwatch.jsの構成ファイルを作成する必要があります。その後、テストの作成を開始できます。
はい、nightwatch.jsはクロスブラウザーテストをサポートしています。自動ブラウザー用のツールであるSelenium WebDriverとシームレスに統合します。つまり、nightwatch.jsを使用して複数のブラウザで実行できるテストを作成して、Webアプリケーションがさまざまなプラットフォームで適切に機能するようにすることができます。
nightwatch.jsは、いくつかのデバッグテストオプションを提供します。 node.jsでビルトインデバッガーを使用するか、Chrome Devtoolsなどの外部ツールを使用できます。 nightwatch.jsは、テストが失敗したときに問題を識別して修正しやすくするために、詳細なエラーメッセージとスタックトレースも提供します。
nightwatch.jsは主にWebテストに使用されますが、人気のあるモバイルテストフレームワークであるAppiumと統合することでモバイルテストにも使用できます。これにより、Webテストと同じ構文とツールを使用してモバイルアプリケーションのテストを作成できます。
nightwatch.jsは、並列テストの実行をネイティブにサポートしています。構成ファイルで並行して実行するテストを指定できます。テストを実行すると、nightwatch.jsはテストを複数のワーカープログラムに自動的に割り当て、全体的なテスト実行時間を高速化します。
出力は、元の意味を保存しながら、フローと読みやすさを改善するために、元の画像のフォーマットと配置を維持しています。
以上がnightwatch.jsを使用したJavaScript機能テストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
