■ はじめに

NightWatch について、業務で扱いそうなので予習。

【１】NightWatch とは？

* Node.js上で動作するE2E のテストフレームワーク
* 詳細は、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2021/03/04/172003

【２】環境設定

　今回は、簡単な方法である
新規でVueプロジェクトを作成する場合について扱う

前提条件

* npm, Java がインストールされていること

手順

https://dk521123.hatenablog.com/entry/2020/12/22/192553

の「例：vue init コマンド」にあるように

コマンド/出力一部抜粋

vue init webpack my-app

・・・略・・・
? Setup e2e tests with Nightwatch? Yes

補足：既にVueプロジェクトはあるが未インストールの場合

https://www.npmjs.com/package/@vue/cli-plugin-e2e-nightwatch

より抜粋

Installing in an Already Created Project
~~~~~
vue add e2e-nightwatch
~~~~~

【３】E2E関連のディレクトリ構成

* src/test/e2e 配下にある
* 詳細な説明は、以下のサイトを参照。

https://www.npmjs.com/package/@vue/cli-plugin-e2e-nightwatch
ディレクトリ構成

tests/e2e/
  ├── custom-assertions/ ... カスタムアサーションがあるフォルダ ... (※１)
  |   └── elementCount.js
  ├── custom-commands/ ... カスタムコマンドがあるフォルダ
  |   ├── customExecute.js
  |   ├── openHomepage.js
  |   └── openHomepageClass.js
  ├── page-objects/ ... よく使うパターンを保持してあるフォルダ
  |   └── homepage.js
  ├── specs/ ... テストファイルがあるフォルダ
  |   ├── test.js ... E2Eテストファイル（サンプル）
  |   └── test-with-pageobjects.js
  ├── reports/  ... テスト結果
  |   └── CHROME_XX.X.XXXX.XXX_Windows_test-with-pageobjects.xml
  └── globals.js ... グローバル設定ファイル

※１：カスタムアサーションについて

* 詳細は、以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2021/03/06/234935

【４】テスト実行

npm run test:e2e

補足：「WARN Local Chrome version is XX...」が表示される場合

対応する場合は、以下の関連記事を参照のこと。

NightWatch に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/07/180052

【５】独自のテストを作成してみる

　今回は、感じを掴むために、
Googleに対して、簡単なE2Eテストを作成してみる

テストの作成手順

１）JavaScript形式でE2Eテストファイル（※１）を作成
２）１）のファイルを「src/test/e2e/spec」配下に置く
３）実行「npm run test:e2e」（※２）

※１：E2Eテストファイル「example.js」

module.exports = {
  'Demo test for Google': (browser) => {
    browser
      // 対象サイト（今回は、「google」）
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      // タイトルが「Google」かどうか確認
      .assert.title('Google')
      // 「input[type=text]」が表示されているかどうか確認
      .assert.visible('input[type=text]')
      // 「input[type=text]」に「nightwatch」を入力しEnterキー押下
      .setValue('input[type=text]', ['nightwatch', browser.Keys.ENTER])
      // 1秒待つ
      .pause(1000)
      // 「#main」に「Night」が含まれているか確認
      .assert.containsText('#main', 'Night')
      // テスト終了
      .end();
  },
};

※２：テスト結果例

$ npm run test:e2e

> my-app@0.1.0 test:e2e
> vue-cli-service test:e2e

・・・略・・・

  App is served in production mode.
  Note this is for preview or E2E testing only.

 INFO  Running end-to-end tests ...

・・・略・・・

Running:  Demo test for Google

√ Element <body> was visible after 30 milliseconds.
√ Testing if the page title equals 'Google' (12ms)
√ Testing if element <input[type=text]> is visible (46ms)
√ Testing if element <#main> contains text 'Night' (218ms)

OK. 4 assertions passed. (3.273s)

・・・略・・・

参考文献

https://qiita.com/matsugaknight/items/a6eebd1f3697102c728b

プログラムの超個人的なメモ

Memo for Programming.

【NightWatch】Vue + NightWatch で E2Eテストをする

■ はじめに

目次

【１】NightWatch とは？

【２】環境設定

前提条件

手順

補足：既にVueプロジェクトはあるが未インストールの場合

【３】E2E関連のディレクトリ構成

【４】テスト実行

補足：「WARN Local Chrome version is XX...」が表示される場合

【５】独自のテストを作成してみる

テストの作成手順

参考文献

関連記事