初心者がNightwatchの導入からチュートリアル終了までやってみる

はじめに

この記事はほぼ全てnightwatchjs.orgの内容そのままです。
余力があるならそちらをご覧になってもよいかと思います。
想定する読者は、（自分のように）初めてプログラミングするという方です。

Nightwatchとは？

Nightwatch.js is an automated end-to-end testing framework for web applications and websites.

Nightwatch.jsは、WebアプリケーションおよびWebサイト用の自動化されたエンドツーエンドのテストフレームワークです。
要は、ブラウザを実際に動かして自動テスト（操作）してくれるって事のようです。
エンドツーエンド(E2E)についてはこの記事が分かりやすかったです。

Node.jsのインストール

1. nodejs.orgから環境にあったインストーラーをダウンロード

• インストーラーを起動
• インストーラーの指示通りに進める（npmのインストールを外さないこと、デフォルトでチェックが入っています）

Node.jsとnpmがインストールできたか確かめる

Node.jsの確認

コマンドプロンプトで以下のように入力します。

$ node -v

で、結果がこんな感じになればOKです。

$ node -v
v12.16.2

npmの確認

npmも同じようにコマンドプロンプトで以下のように入力します。

$ npm -v

こちらもこんな感じに表示されればOKです。

$ npm -v
6.14.4

うまくいかない場合は、インストールできていないかpathが通っていない可能性があるので、
エラーログを読みつつ、再度Node.jsのインストールを試してください。

npmをつかってNightwatchをインストールする

ここからNightwatchをインストールしていきます。
さっくり消せるように専用のフォルダを作って作業していきます。

Nightwatch用のフォルダを作る

好きな場所にフォルダを作ってください。
今回は以下のようにドキュメントの下に作りました。
フォルダ名はNightwatchにしています。

C:\Users\(ユーザー名)\Documents\Nightwatch

作業用フォルダにNightwatchをインストールする

作業フォルダでコマンドプロンプトを起動

作業用フォルダのアドレスバーにcmdと打ち込めばそのフォルダで起動します。
こんな感じになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>

package.jsonを作る

npmを使ってインストールするために、作業フォルダにpackage.jsonをつくります。
package.jsonについてはこの記事が分かりやすかったです。
作業フォルダのコマンドプロンプトで以下のように入力してください。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm init -y

結果は以下のようになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm init -y
Wrote to C:\Users\(ユーザー名)\Documents\Nightwatch\package.json:

{
  "name": "Nightwatch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npmを使ってNightwatchをインストールする

作業フォルダのコマンドプロンプトで以下のように入力します。
単体で使うなら--save-devは不要ですが、Nightwatchの存在理由(テストフレームワーク)を踏まえてマニュアル通りにしておきます。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm install nightwatch --save-dev

結果は以下のようになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm install nightwatch --save-dev
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

> ejs@2.7.4 postinstall C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN Nightwatch@1.0.0 No description
npm WARN Nightwatch@1.0.0 No repository field.

+ nightwatch@1.3.4
added 264 packages from 669 contributors and audited 439 packages in 11.678s

15 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

npmを使ってWebドライバーをインストールする

今回はChromeのみでのテストを予定しています。
なので、seleniumドライバーは不要です。
Webドライバーは使うブラウザのバージョンと対応する必要があるので、調べてからインストールしていきます。

使っているChromeのバージョンを確認する

以下の手順で確認できます。
より詳しい説明は公式のヘルプにあります。

1. パソコンで Chrome を開きます。

• 右上のその他アイコンをクリックします。
• [ヘルプ] 次に [Google Chrome について] をクリックします。
• [Google Chrome] という見出しの下に表示される番号が現在のバージョン番号です。

このバージョン番号と一致したChromeドライバーのバージョンをインストールします。
（Chromeを最新バージョンにしていれば、Chromeドライバーも最新バージョンで良いはずです。）

対応したバージョンのChromeドライバーのインストール

対応したバージョンのChromeドライバーインストールしていきます。

# 最新バージョンの場合
C:\Users\(ユーザー名)\Documents\Nightwatch>npm install chromedriver --save-dev

# 特定のバージョンの場合
C:\Users\(ユーザー名)\Documents\Nightwatch>npm install [e-mail].X --save-dev

結果は以下のようになります。

C:\Users\(ユーザー名)\Documents\Nightwatch>npm install chromedriver --save-dev
> chromedriver@81.0.0 install C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceeding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/81.0.4044.69/chromedriver_win32.zip
Saving to file: C:\Users\(ユーザー名)\AppData\Local\Temp\81.0.4044.69\chromedriver\chromedriver_win32.zip
Received 1040K...
Received 2080K...
Received 3120K...
Received 4160K...
Received 4290K total.
Extracting zip contents.
Copying to target path C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
npm WARN Nightwatch@1.0.0 No description
npm WARN Nightwatch@1.0.0 No repository field.

+ chromedriver@81.0.0
added 58 packages from 95 contributors and audited 539 packages in 8.679s

17 packages are looking for funding
  run `npm fund` for details

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Nightwatchの実行

インストールが終わったので、テストを実行してみます。

Nightwatchの設定ファイルを作る

Nightwatchの設定ファイル(nightwatch.conf.js)を作っていきます。
チュートリアルのこのパートにあたります。

設定ファイル(nightwatch.conf.js)を作る

作業フォルダ（Nightwatch）の下にnightwatch.conf.jsというファイルを作ります。
中身は以下のようにします。
nightwatch.jsonではなくnightwatch.conf.jsにした理由は、拡張性が高く、両方存在したときに優先されるらしいためです。

nightwatch.conf.js

module.exports = {
  src_folders: ["tests"],

  webdriver: {
    start_process: true,
    port: 9515,
    server_path: require("chromedriver").path,
  },

  test_settings: {
    default: {
      desiredCapabilities: {
        browserName: "chrome",
      },
    },
  },
};

自動テストを作る

実際に動かすテストを書いていきます。
既に入っているサンプルテストでも良いのですが、せっかくなので作ります。

テストフォルダを作る

先ほど作った作業フォルダの下にテストフォルダを作成します。
この中に作った自動テストを格納していきます。
フォルダ名はtestsとして、以下のように作りました。

C:\Users\(ユーザー名)\Documents\Nightwatch\tests

このテストフォルダが、設定ファイル(nightwatch.conf.js)のsrc_folders: [tests]にあたります。
src_foldersにテストフォルダを記載しない場合は、テスト実行時の引数で指定することになります。

テストを作る

テストを実際に作ります。
以下のコードはサンプルテストほぼそのままです。
google.jsでも良いですが、わかりやすそうので、ecosia.jsを利用しました。

以下のファイルをテストフォルダ(tests)の中に入れてください。

ecosia.js

describe("Ecosia.org Demo", function () {
  before((browser) => browser.url("https://www.ecosia.org/"));

  test("Demo test ecosia.org", function (browser) {
    browser
      .waitForElementVisible("body")
      .assert.titleContains("Ecosia")
      .assert.visible("input[type=search]")
      .setValue("input[type=search]", "nightwatch")
      .assert.visible("button[type=submit]")
      .click("button[type=submit]")
      .assert.containsText(".mainline-results", "Nightwatch.js");
  });

  after((browser) => browser.end());
});

テストを実行する

作ったテストを実行して、動作するか見ていきます。

Nightwatchのpathを通す

Nightwatchを簡単に実行できるようにpathを通します。
pathを通すの意味についてはこの記事が分かりやすかったです。

1. windowsの検索窓に「path」と入力

• 「環境変数を編集」が出てくるので選択
• 「ユーザーの環境変数」の「Path」を選択
• 「編集」を選択
• 「環境変数名の編集」が出てくるので「新規」を選択
• 以下のパスを追加（nightwatchの実行ファイルがある場所です）

C:\Users\(ユーザー名)\Documents\Nightwatch\node_modules\.bin

サンプルテストを実行してみる

作業フォルダでコマンドプロンプトを起動し、以下を入力してください。

C:\Users\(ユーザー名)\Documents\Nightwatch>nightwatch

Chromeが起動し、ecosia.orgを開き、nightwatchと検索してくれるはずです。
また、結果は以下のようになります。
ここまでできれば、チュートリアルに記載されている内容は完了となります。

C:\Users\(ユーザー名)\Documents\Nightwatch>nightwatch

[Ecosia.org Demo] Test Suite
============================
\ Connecting to localhost on port 9515...

DevTools listening on ws://127.0.0.1:53905/devtools/browser/a6462e23-1c06-4ce8-9d1b-2cbba2c0e66d
i Connected to localhost on port 9515 (2615ms).
  Using: chrome (81.0.4044.113) on Windows platform.

Running:  Demo test ecosia.org

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

OK. 5 assertions passed. (2.17s)

おわりに

これでNightwatchのチュートリアルは終了です。
内容の不備などあればコメントしていただけますと大変勉強になります。
ここまで初心者の記事を読んでいただきありがとうございました。

次回は開発ガイドを読みながら、テストを書いてみたいと思います。