Nightwatchのインストール

Nightwatchを使い始めるのは、ほんの数分で完了します。Nightwatchでは、以下の種類のテストを実行できます。

  1. デスクトップとモバイルブラウザでのWebアプリのエンドツーエンドテスト
  2. React、Vue、Storybook、Angularなどの主要なフレームワークを使用したコンポーネントテスト
  3. AndroidとiOSでのモバイルアプリテスト
  4. APIテスト
  5. ビジュアルリグレッションテスト（VRT）
  6. アクセシビリティテスト

すべてのタイプのテストでは、まずNightwatch自体をインストールする必要があります。さあ、始めましょう！

前提条件

Node.jsがシステムにインストールされていることを確認してください。

Nightwatchは、v14.20以上のすべてのNodeバージョンをサポートしています。

Nightwatchのセットアップ

Nightwatchは、新しいプロジェクトとして、または既存の場所に、1つのコマンドラインでインストールできます。

1. 新しいプロジェクトとして

Nightwatchを新しいプロジェクトとしてセットアップするには、次のコマンドを実行します。

npm init nightwatch <directory-name>
2. 既存のプロジェクトで
cd <directory-name> 
npm init nightwatch

create-nightwatchをインストールするプロンプトが表示されたら、yを押します。

❯ npm init nightwatch
Need to install the following packages:
  create-nightwatch
Ok to proceed? (y)

これにより、Nightwatchがインストールされ、設定が尋ねられ、以下に示すように、設定に基づいてnightwatch.conf.jsファイルがセットアップされます。

Nightwatch setup using CLI Utility


簡単な質問に答えて、Nightwatchのインストールを完了してください。これらの質問に関する詳細情報が必要な場合は、以下のガイドを参照してください。そうでない場合は、インストール完了後、「エンドツーエンドテストを実行する」セクションに進んでください。

設定

テストタイプ

これにより、選択したテストタイプに必要なすべての依存関係とともに、Nightwatchがセットアップされます。Nightwatchのベースバージョンは、選択肢に関係なくインストールされます。

? Select testing type to setup for your project (Press <space> 
to select, <a> to toggle all, <i> to invert selection, and 
 to proceed) 

❯◉ End-to-End testing 

 ◯ Component testing 

 ◯ Mobile app testing
1つのオプションを選択し、後で他のタイプのテストもセットアップできます。

テストランナーと言語

Nightwatchは他のテストランナーもサポートしています。Nightwatchとは別に、MochaまたはCucumber JSをテストランナーとして選択できます。

Nightwatchは、v1.6.0以降、テストファイルにTypeScriptをサポートしています。そのため、テストセットアップにJavascriptまたはTypescriptを選択できます。

? Select language + test runner variant (Use arrow keys) 

❯ JavaScript / default 

  TypeScript / default  

  JavaScript / Mocha  

  JavaScript / CucumberJS

ブラウザの選択

テスト対象のブラウザを選択すると、設定が自動的に作成されます。

? Select target browsers (Press <space> to select, <a> to toggle all, <i> to invert selection,
 and <enter< to proceed) 

❯◯ Firefox 

 ◯ Chrome 

 ◯ Edge 

 ◯ Safari
ドライバをインストールし、対応する環境を追加することで、後でブラウザを追加することもできます。

テストフォルダ

次に、テストを配置するフォルダの名前を指定できます。デフォルト値は「tests」です。

? Enter source folder where test files are stored (tests)

ベースURL

これは、テストで変数として使用する必要がある非常に重要な設定です。これにより、簡単な設定変更だけで、異なるテスト環境とURLを切り替えることができます。この設定は、デフォルトでhttps://になります。

? Enter the base_url of the project (https://)

ローカル/リモート（クラウド）での実行

Nightwatchを、ローカルマシン、クラウドマシン、またはその両方で実行するように設定できます。

? Select where to run Nightwatch tests (Use arrow keys) 

❯ On localhost 

  On a remote/cloud service 

  Both

リモートテストの場合、BrowserStackまたはSauce Labsを選択すると、ホストとポートの詳細が自動的に追加されます。ただし、独自のリモートSeleniumサーバーまたは他のクラウドプロバイダーで実行することを選択した場合は、nightwatch.conf.jsファイルでホストとポートの詳細を手動で設定する必要があります。

匿名メトリクス

Nightwatchが匿名メトリクスを収集することを許可します。ユーザーのプライバシーを尊重するため、設定はデフォルトで「いいえ」になります。

? Allow Nightwatch to collect completely anonymous usage 
metrics? (y/N)

モバイルWebでテストを実行する

Nightwatchは、実際のモバイルデバイスと仮想モバイルデバイスでのテストの実行をサポートしています。Nightwatchは、すべての基礎となるSDK、ライブラリ、および仮想デバイスのセットアップも処理します.

Setup testing on Mobile devices as well? (Use arrow keys) 

  Yes 

❯ No, skip for now

この設定を選択すると、Nightwatchのセットアップが開始されます。また、開始するためのサンプルテストも生成されます。

Macから実行している場合、safaridriverはデフォルトで存在しますが、有効にする必要があります。次のオプションが表示されます。

? Enable safaridriver (requires sudo password)? (Use arrow keys)
 ❯Yes
  No, I'll do that later.

最初のエンドツーエンドテストを実行する

セットアップが完了したら、次のコマンドでサンプルテストを実行できます。

npx nightwatch ./nightwatch/examples

出力は次のようになります。


 Running:  default: examples/accessibilty-tests/websiteAccessibility.js 

 Running:  default: examples/basic/duckDuckGo.js 

 Running:  default: examples/basic/ecosia.js 

 Running:  default: examples/basic/todoList.js 

 Running:  default: examples/with-custom-assertions/todoList.js 

 Running:  default: examples/with-custom-commands/angularTodo.js 

 Running:  default: examples/with-page-objects/google.js 
 


✔  default: examples/with-custom-assertions/todoList.js    

 [To-Do List End-to-End Test] Test Suite 

 ────────────────────────────────────────────────────────────────────────────── 

 Using: chrome (110.0.5481.177) on MAC OS X. 


  
 – should add a new todo element 

 ✔ Testing if element <#todo-list ul li> has count: 4 (10ms) 

 ✔ Testing if element <#todo-list ul li> has count: 5 (59ms) 

 ✔ default: examples/with-custom-assertions/todoList.js [To-Do List End-to-End Test] should add a new todo element (2.531s)  

. 

. 

. 

  ✨ PASSED. 22 total assertions (16.68s) 

 Wrote HTML report file to: <path to Nightwatch project folder>/tests_output/nightwatch-html-report/index.html

レポートの表示

出力の最後にあるHTMLパスをブラウザのアドレスバーにコピーして貼り付けるだけで、レポートを表示できます。

HTML report

おめでとうございます！Nightwatchをインストールし、テストを実行し、HTMLレポートを表示しました。

増え続けるNightwatchコミュニティとつながり、問題が発生した場合に備えて支援を求めるには、Discordサーバーに参加してください。

Nightwatchをインストールしたので、

  1. Webアプリケーションのエンドツーエンドテストの作成方法を学ぶ
  2. モバイルアプリテストの実施方法を学ぶ
  3. Nightwatchを使用したAPIテストを学ぶ
  4. ビジュアルリグレッションテストの実施方法を学ぶ
  5. アクセシビリティテストの実施方法を学ぶ