Nightwatch は、Selenium Server (Selenium Grid とも呼ばれる) と共に、大規模な分散クロスブラウザエンドツーエンドテストにも使用できます。 Selenium Server は、WebDriver ノードのネットワークを管理する Java で記述されたオープンソースプロジェクトです。

これは、複数のマシンで並列にテストを実行する簡単な方法を提供することを目的としています。

Selenium Server Operation

前提条件

  1. Node がシステムにインストールされていることを確認してください。このガイドで使用されているバージョンは v16.14.2 です。
  2. Java がシステムにインストールされていることを確認してください。このガイドで使用されているバージョンは openjdk 11.0.14 です。

Nightwatch のセットアップ

新しいディレクトリを作成し、そこに Nightwatch プロジェクトを開始します。

mkdir <directory-name>
cd <directory-name>
npm init nightwatch@latest

または、単一のコマンドで新しいディレクトリにプロジェクトを直接作成します。

npm init nightwatch <directory-name>

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 以外にも、Mocha や Cucumber JS をテストランナーとして選択できます。

言語 - Javascript/Typescript

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

? What is your Language - Test Runner setup? (Use arrow keys)
❯ JavaScript - Nightwatch Test Runner
  JavaScript - Mocha Test Runner
  JavaScript - CucumberJS Test Runner
  TypeScript - Nightwatch Test Runner
  TypeScript - Mocha Test Runner

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

Nightwatch を設定して、マシン上でローカルに実行したり、クラウドマシン上でリモートに実行したり、あるいはその両方を実行したりできます。

? Where do you want to run your e2e tests? (Use arrow keys)
❯ On my local machine
  On a remote machine (cloud)
  Both

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

ブラウザの選択

テスト対象のブラウザを選択すると、設定が自動的に作成されます。複数選択オプションが用意されているため、テストするブラウザをいくつでも選択できます。ローカルマシンでテストする場合は、selenium-server を使用することもできます。

? Where you'll be testing on? (Press <space> to select, <a> to toggle all, <i> to invert selection,
 and <enter< to proceed)
❯◯ Firefox
 ◯ Chrome
 ◯ Edge
 ◯ Safari
 ◯ Local selenium-server

選択したブラウザの上にあるリストから ローカル selenium-server オプションを選択します。

テストフォルダー名

次に、テストを配置するフォルダーに名前を付けることができます。デフォルト値は tests です。

? Where do you plan to keep your end-to-end tests? (tests)

ベース URL

テストを実行するベース URL を追加します。この設定はデフォルトで http://localhost になります。

? What is the base_url of your project? (http://localhost)

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

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

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

テストを実行する

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

Firefox
npx nightwatch tests/specs/basic/ecosia.js --env selenium.firefox
Chrome
npx nightwatch tests/specs/basic/ecosia.js --env selenium.chrome
Safari
npx nightwatch tests/specs/basic/ecosia.js --env selenium.safari

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


[Ecosia.org Demo] Test Suite
============================
ℹ Connected to localhost on port 4444 (2153ms).
  Using: firefox (94.0.1) on mac 20.6.0 platform.

✔ Running Demo test ecosia.org:

✔ Element <body> was visible after 24 milliseconds.
✔ Testing if the page title contains 'Ecosia' (10ms)
✔ Testing if element <input[type=search]> is visible (51ms)
✔ Testing if element <button[type=submit]> is visible (12ms)
✔ Testing if element <.mainline-results> contains text 'Nightwatch.js' (197ms)

OK. 5 assertions passed. (1.838s)
さらにヘルプが必要な場合は、Discord サーバー にアクセスしてください。