Nightwatch.js 入門
Nightwatch.jsの学習備忘録記事。
Nightwatch.jsとは
- 公式
- E2Eテストフレームワーク
- E2Eテスト：システム全体を通して行うテスト。ユーザと同様にブラウザ操作し、挙動が期待通りになっているか確認する。
- 例：ログインページのテストケース。
- ログイン画面を表示
- メールアドレス/パスワードを入力
- ログインボタンを押下
- ログイン後画面に遷移していること
- 例：ログインページのテストケース。
- E2Eテスト：システム全体を通して行うテスト。ユーザと同様にブラウザ操作し、挙動が期待通りになっているか確認する。
-
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)