Nightwatch.js 入門

Nightwatch.jsの学習備忘録記事。

Nightwatch.jsとは

公式
E2Eテストフレームワーク
- E2Eテスト：システム全体を通して行うテスト。ユーザと同様にブラウザ操作し、挙動が期待通りになっているか確認する。
  - 例：ログインページのテストケース。
    1. ログイン画面を表示
    2. メールアドレス/パスワードを入力
    3. ログインボタンを押下
    4. ログイン後画面に遷移していること
Selenium WebDriverAPIを仲介し各ブラウザ操作を行う。

環境構築手順

※Windows環境

1.Node.jsのダウンロード及びインストール

2.Selenium serverのダウンロード

3.GeckoDriverのダウンロード

4.ChromeDriverのダウンロード
※Chromeのバージョンとドライバーのバージョンがずれる場合、テスト実行できないため要注意。ここでつまった。

5.プロジェクトフォルダを作成し、移動する。

6.nightwatch をインストール。

npm install nightwatch --save-dev

7.プロジェクトフォルダ直下にlibフォルダを作成する。

8.libフォルダにダウンロードしたSelenium Server、GeckoDriver、ChromeDriverを配置する。

9.プロジェクトフォルダ直下に設定ファイルnightwatch.jsonを作成する。

{
  "src_folders": ["tests"],
  "output_folder": "reports",
  "custom_commands_path": "",
  "custom_assertions_path": "",
  "page_objects_path": "",
  "globals_path": "",

  "selenium": {
    "start_process": true,
    "server_path": "./lib/selenium-server-standalone-3.141.59.jar",
    "log_path": "",
    "port": 4444,
    "cli_args": {
      "webdriver.chrome.driver": "./lib/chromedriver.exe",
      "webdriver.gecko.driver": "./lib/geckodriver.exe"
    }
  },

  "test_settings": {
    "default": {
      "launch_url": "http://localhost",
      "selenium_port": 4444,
      "selenium_host": "localhost",
      "silent": true,
      "screenshots": {
        "enabled": false,
        "path": ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "marionette": true
      }
    },

    "chrome": {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    }
  }
}

10.プロジェクトフォルダ直下にtestsフォルダを作成する。

11.testsフォルダ内にテストコードtest.jsを作成する。
以下は、ブラウザを起動し、nightwatchをGoogle検索するテスト。

module.exports = {
  'Demo test Google' : function (browser) {
    browser
      .windowMaximize()
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('#main', 'nightwatch')
      .end();
  }
};

12.テスト実行
テストブラウザにGoogleChromeを指定して、実行する場合(testsフォルダ配下の全jsを実行)

.\node_modules\.bin\nightwatch -e chrome

テストを個別指定する場合

.\node_modules\.bin\nightwatch .\tests\test.js -e chrome

ブラウザ操作が行われる。

13.テスト結果確認

[Test] Test Suite
=================
i Connected to localhost on port 4444 (4563ms).
  Using: chrome (85.0.4183.102) on windows platform.

Running:  Demo

√ Element <body> was visible after 105 milliseconds.
√ Testing if the page title equals 'Google' (16ms)
√ Testing if element <input[type=text]> is visible (75ms)
√ Element <input[name=btnK]> was visible after 643 milliseconds.

OK. 4 assertions passed. (6.568s)

参考情報