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

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

#Nightwatchとは？
>Nightwatch.js is an automated end-to-end testing framework for web applications and websites. 

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

#Node.jsのインストール
1. [nodejs.org](https://nodejs.org/en/download/)から環境にあったインストーラーをダウンロード
+ インストーラーを起動
+ インストーラーの指示通りに進める（npmのインストールを外さないこと、デフォルトでチェックが入っています）

##Node.jsとnpmがインストールできたか確かめる
###Node.jsの確認
コマンドプロンプトで以下のように入力します。

```shell-session
$ node -v
```

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

```shell-session
$ node -v
v12.16.2
```

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

```shell-session
$ npm -v
```

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

```shell-session
$ npm -v
6.14.4
```

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

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

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

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

##作業用フォルダにNightwatchをインストールする
###作業フォルダでコマンドプロンプトを起動
作業用フォルダのアドレスバーに`cmd`と打ち込めばそのフォルダで起動します。
こんな感じになります。

```shell-session
C:\Users\(ユーザー名)\Documents\Nightwatch>
```

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

```shell-session
C:\Users\(ユーザー名)\Documents\Nightwatch>npm init -y
```
結果は以下のようになります。

```shell-session
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の存在理由(テストフレームワーク)を踏まえてマニュアル通りにしておきます。

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

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

```shell-session
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のバージョンを確認する
以下の手順で確認できます。
より詳しい説明は[公式のヘルプ](https://support.google.com/chrome/answer/95414?co=GENIE.Platform%3DDesktop&hl=ja)にあります。

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

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

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

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

# 特定のバージョンの場合
C:\Users\(ユーザー名)\Documents\Nightwatch>npm install chromedriver@XX.XX.X --save-dev
```

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

```shell-session
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)を作っていきます。
チュートリアルの[このパート](https://nightwatchjs.org/gettingstarted/configuration/#nightwatch-json)にあたります。

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

```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`として、以下のように作りました。

```shell-session
C:\Users\(ユーザー名)\Documents\Nightwatch\tests
```

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

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

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

```javascript: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を通す`の意味については[この記事](https://qiita.com/sta/items/63e1048025d1830d12fd)が分かりやすかったです。

1. windowsの検索窓に「path」と入力
+ 「環境変数を編集」が出てくるので選択
+ 「ユーザーの環境変数」の「Path」を選択
+ 「編集」を選択
+ 「環境変数名の編集」が出てくるので「新規」を選択
+ 以下のパスを追加（nightwatchの実行ファイルがある場所です）

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


###サンプルテストを実行してみる
作業フォルダでコマンドプロンプトを起動し、以下を入力してください。

```shell-session
C:\Users\(ユーザー名)\Documents\Nightwatch>nightwatch
```
Chromeが起動し、ecosia.orgを開き、nightwatchと検索してくれるはずです。
また、結果は以下のようになります。
ここまでできれば、チュートリアルに記載されている内容は完了となります。

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

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