■ はじめに

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

の続き。

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

【０】E2Eテスト

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

【１】NightWatch とは？

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

補足：NightWatch 以外のE2E

* Cypress
 => JavaScript製

https://future-architect.github.io/articles/20210428a/
https://qiita.com/KWS_0901/items/7c71d057bb0cb307fabc

公式サイト

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

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

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

【２】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();
  },
};

【３】テンプレート

* 以下を参考にした。

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/

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

Memo for Programming.

【NightWatch】NightWatch ～入門編～

■ はじめに

目次

【０】E2Eテスト

【１】NightWatch とは？

補足：NightWatch 以外のE2E

公式サイト

【２】NightWatch の勘所

【３】テンプレート

参考文献

関連記事