【NightWatch】NightWatch ~ 入門編 ~

■ はじめに

https://dk521123.hatenablog.com/entry/2021/02/06/220603

の続き。

NightWatch に関して、作業する上でとっかかりになるようなことをメモする。

目次

【1】NightWatch とは?
【2】NightWatch の勘所
【3】テンプレート

【1】NightWatch とは?

* Node.js上で動作するE2E (※ 補足) のテストフレームワーク
* Java / Selenium WebDriver APIを使用(依存)する

※ 補足:E2Eテスト

* E2E(End to End) の略
* 位置づけ的には、結合(インテグレーション)テスト?

公式サイト

https://nightwatchjs.org/
github
https://github.com/nightwatchjs/nightwatch

補足:TypeScript について
https://qiita.com/unhurried/items/4a2c47571d68cec8f611

より抜粋
~~~~~~~~
 TypeScriptを使うこともできるが、
公式にサポートされてはいないので使いにくいところがある。
~~~~~~~~

【2】NightWatch の勘所

browser オブジェクトをHackできるので、
用意されている各メソッドを使って、操作・確認していく

用意されているAPIについては、
以下の公式ドキュメントを参照すれば良さそう

https://nightwatchjs.org/api/

サンプル

module.exports = {
  'Demo test for Google': (browser) => {
    browser
      // 対象サイト(今回は、「google」)
      .url('http://www.google.com')
      // Windowを最大表示
      .windowMaximize()
      // bodyタグが現れるまで1秒待つ
      .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();
  },
};

【3】テンプレート

* 以下を参考にした。

https://stackoverflow.com/questions/53782850/beforeeach-and-aftereach-for-every-test-case-using-globals-js
サンプル

// This is a template for E2E tests.

module.exports = {
  before() {
    // This will get run only ONCE, before all the tests <
  },
  beforeEach(browser) {
    browser
      .init()
      .url('http://localhost:8080/');
  },
  'Test Case No.1': (browser) => {
    // This test does something here <
    browser
      .waitForElementVisible('body')
      .assert.title('vue-ts-demo');
  },
  'Test Case No.2': (browser) => {
    // This test does something else here
    browser
      .waitForElementVisible('body')
      .assert.urlEquals('http://localhost:8080/');
  },
  'Test Case No.3': (browser) => {
    // this test does something else here
    browser
      .waitForElementVisible('body')
      .assert.title('vue-ts-demo');
  },

  afterEach(browser) {
    // this will get run after every test case
    browser.end();
  },
  after(browser) {
    // this will get run ONCE, after all tests have run
  },
};

参考文献

https://blog.mmmcorp.co.jp/blog/2015/09/24/use-nightwatch/
https://www.wildwest-service.com/nightwatch/

関連記事

NightWatch ~ 基本編 ~
https://dk521123.hatenablog.com/entry/2021/03/05/113518
NightWatch ~ カスタムアサーション
https://dk521123.hatenablog.com/entry/2021/03/06/234935
NightWatch ~ カスタムコマンド ~
https://dk521123.hatenablog.com/entry/2021/03/10/003837
NightWatch ~ スナップショットあれこれ ~
https://dk521123.hatenablog.com/entry/2021/03/07/223957
NightWatch ~ あれこれ ~
https://dk521123.hatenablog.com/entry/2021/03/08/235438
Vue + NightWatch で E2Eテスト をする
https://dk521123.hatenablog.com/entry/2021/02/06/220603
NightWatch に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/07/180052
Selenium ~ 入門編 ~
https://dk521123.hatenablog.com/entry/2015/04/11/235336
Selenium WebDriver + Java ~ 初期設定編 ~
https://dk521123.hatenablog.com/entry/2015/05/12/230924