yarnでnightwatch.jsを動かす簡単設定 - 親バカエンジニアのナレッジ帳

nightwatch.jsとは

nightwatch.jsはE2Eテストフレームワークとして最も有名なものの1つではないでしょうか。
開発したWebのアプリケーションに対して1つ1つ手動でテストをしていくのは大変なので、Seleniumでテストを自動化させることが主流になっていますが、その中でもシンプルでわかりやすいと評判のフレームワークですね。
今回はそんなnightwatch.jsをyarn(node)でインストールして実行まで進めたいと思います。
とりあえずChromeのドライバで動かすことが目的なので、オプションなどその他の設定は今回は気にしません。
また、今回はyarnで行っておりますが、npmで実行される方は適宜コマンドを置き換えてください。

yarn add --dev

は

npm install --save-dev

などに置き換えることができますので。

nodeの設定

これは人によっては不要な手順ですが、まだnodeの設定ができていない場合の設定手順です。
今回はnodenvで最新のnodeをインストールするものとします。
すでにプロジェクトがある方はこの手順は飛ばしてください。

まずは適当にプロジェクトを配置するフォルダを作成してください。

mkdir selenium-test

次にプロジェクトに対してnodeのインストールです。

cd selenium-test
nodenv install --list

を実行したところ、このタイミングでは13.11.0が最新だったので13.11.0をインストールしてみます。
（特に最新に拘っているわけではないのでお好きなバージョンでどうぞ）

nodenv install 13.11.0

nodenv versions

を入力すると、インストールしたバージョンではなく、デフォルトのバージョンが選択されています。

* system (set by /Users/xxxxxxxxx/.anyenv/envs/nodenv/version)
  13.11.0

このプロジェクトではインストールした13.11.0を使用するようにしましょう。

nodenv local 13.11.0

これでバージョンを見ると、

node -v
v13.11.0

v13.11.0が表示されていますね。

次にnodeプロジェクトの初期化です。

yarn init

を入力し、適当に全部エンターを押していきます。

yarn init v1.22.1
question name (selenium-test):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨  Done in 14.65s.

nightwatchモジュールとドライバのインストール

ここからはいよいよnightwatchやchromedriverをインストールし、動かしてみましょう。

まずはnightwatchのインストール

yarn add --dev nightwatch

続いてGoogle Chromeのドライバをインストールします。

yarn add --dev chromedriver

次にnightwatch.conf.js（nightwatch.jsonで書かれているマニュアルもあります）を書きます。
このファイルはconfと書かれているだけあって、nightwatchの動作における設定ファイルです。
環境によって色々な設定を入れることができますが、今回は超簡単に動作させるための必要最小限だけ記述します。

nightwatch.conf.js

module.exports = {
  src_folders: ['./tests'], // テストが書かれたパス

  webdriver: {
    start_process: true,
    port: 4444,
    server_path: require('chromedriver').path // ドライバのパス
  },

  test_settings: {
    default: {
      desiredCapabilities : {
        browserName : 'chrome'
      }
    }
  }
};

上記を見ていただければ分かる通り、テストは「./tests」ディレクトリ配下に置くことになっています。
なので「./tests」ディレクトリ配下にさっそくファイルを置きましょう。
これはnightwatch.jsの公式ページにあるサンプルになります。
./tests/ecocia.js

module.exports = {
  'Demo test Ecosia.org': function (browser) {
    browser
      .url('https://www.ecosia.org/')
      .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')
      .end();
  }
};

最後に実行です。
package.jsonにnightwatchを実行するためのスクリプトコマンドを設定しましょう。
package.json

{
  "name": "selenium-test",
  "version": "1.0.0",
  "main": "index.js",
  // 以下のtestコマンドを入れる
  "scripts": {
    // -cをつけた場合はconfigファイルを読み取って実行
    "test": "nightwatch -c ./nightwatch.conf.js"
  },
  "license": "MIT",
  "devDependencies": {
    "chromedriver": "^86.0.0",
    "nightwatch": "^1.4.3"
  }
}

これでyarnから実行してみましょう。

yarn run test

yarn run v1.22.1
$ nightwatch -c ./nightwatch.conf.js

[Ecocia] Test Suite
===================
ℹ Connected to localhost on port 4444 (3626ms).
  Using: chrome (86.0.4240.75) on Mac OS X platform.

Running:  Demo test Ecosia.org

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

OK. 5 assertions passed. (7.74s)
✨  Done in 13.21s.

このようになれば成功です。
あとは自分に合った設定をnightwatch.conf.jsに入れれば自分に合った形にカスタマイズできます。