Nightwatch.js 入門

# Nightwatch.js 入門

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

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

## 環境構築手順

※Windows環境

**1.`Node.js`の[ダウンロード](https://nodejs.org/download/)及びインストール**

**2.`Selenium server`の[ダウンロード](http://docs.seleniumhq.org/download/)**

**3.`GeckoDriver`の[ダウンロード](https://github.com/mozilla/geckodriver/releases/tag/v0.27.0)**

**4.`ChromeDriver`の[ダウンロード](https://sites.google.com/a/chromium.org/chromedriver/downloads)**
 ※Chromeのバージョンとドライバーのバージョンがずれる場合、テスト実行できないため要注意。ここでつまった。

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

**6.`nightwatch` をインストール。**

```shell
npm install nightwatch --save-dev
```
**7.プロジェクトフォルダ直下に`lib`フォルダを作成する。**

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

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

   ```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検索するテスト。

   ```javascript
   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)
    

    
## 参考情報

* [Nightwatch setup in Windows](http://tanmaysarkar.com/nightwatch-setup-in-windows/)
* [NightWatch.jsを試してみた、その記録](https://qiita.com/KKoh/items/d9d894c911887781a3d5)
* [seleniumで「Message: session not created: This version of ChromeDriver only supports Chrome version 75」のエラーが表示される場合の対処法](https://qiita.com/stoneBK7/items/9f258e8ab9ce2d4fa4f5)