【NightWatch】NightWatch ～ カスタムアサーション ～

NightWatch

■ はじめに

https://dk521123.hatenablog.com/entry/2021/02/06/220603
https://dk521123.hatenablog.com/entry/2021/03/04/172003
https://dk521123.hatenablog.com/entry/2021/03/05/113518

の続き。

e2e-nightwatch をインストールした際に、ファイルがいくつか追加される。
その際に、custom-assertions内に「elementCount.js」が
既に用意されているのだが、内部を確認したところ、
カスタムアサーションで、便利そうなのでメモ。

目次

【１】ドキュメント
【２】elementCount.js について
【３】カスタムアサーションを作ってみる
【４】カスタムアサーションの保存先を変更するには

【１】ドキュメント

* 以下、参考になりそうなドキュメント。

https://github.com/nightwatchjs/nightwatch-docs/blob/master/guide/extending-nightwatch/custom-assertions.md

【２】elementCount.js について

* 要素が指定数かどうかを確認するもの
 => 指定の仕方（セレクタ）については、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2021/02/27/000000
使い方 

// elementCount(【CSSセレクタ（タグ）】, 【個数】)
browser.assert.elementCount('img', 1);

ディレクトリ構成
https://dk521123.hatenablog.com/entry/2021/02/06/220603

より抜粋
~~~~~~~~~~~~~~~~~~
tests/e2e/
  ├── custom-assertions/ ... カスタムassert/verifyがあるフォルダ
  |   └── elementCount.js
  ... 略 ...
  ├── specs/ ... テストファイルがあるフォルダ
  |   ├── test.js ... E2Eテストファイル（サンプル）
  ... 略 ...
~~~~~~~~~~~~~~~~~~

tests/e2e/custom-assertions/elementCount.js 

/**
 * A custom Nightwatch assertion. The assertion name is the filename.
 *
 * Example usage:
 *   browser.assert.elementCount(selector, count)
 *
 * For more information on custom assertions see:
 *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
 *
 *
 * @param {string|object} selectorOrObject
 * @param {number} count
 */

exports.assertion = function elementCount(selectorOrObject, count) {
  let selector;

  // when called from a page object element or section
  if (typeof selectorOrObject === 'object' && selectorOrObject.selector) {
    // eslint-disable-next-line prefer-destructuring
    selector = selectorOrObject.selector;
  } else {
    selector = selectorOrObject;
  }

  this.message = `Testing if element <${selector}> has count: ${count}`;
  this.expected = count;
  this.pass = (val) => val === count;
  this.value = (res) => res.value;
  function evaluator(_selector) {
    return document.querySelectorAll(_selector).length;
  }
  this.command = (cb) => this.api.execute(evaluator, [selector], cb);
};

tests/e2e/spec/test.js (改変) 

module.exports = {
  'default e2e tests': (browser) => {
    browser
      .init()
      // 'img'タグが1つあることを確認する
      .assert.elementCount('img', 1)
      .end();
  },
};

【３】カスタムアサーションを作ってみる

* 指定した要素が期待したテキストかどうかを
　確認するアサーションを作ってみる

tests/e2e/custom-assertions/elementEquals.js 

/**
 * A custom Nightwatch assertion. The assertion name is the filename.
 *
 * Example usage:
 *   browser.assert.elementEquals(selector, expectedText)
 *
 * For more information on custom assertions see:
 *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
 *
 *
 * @param {string|object} selectorOrObject
 * @param {string} expected Text
 */

exports.assertion = function elementEquals(selectorOrObject, expectedText) {
  let selector;

  // when called from a page object element or section
  if (typeof selectorOrObject === 'object' && selectorOrObject.selector) {
    // eslint-disable-next-line prefer-destructuring
    selector = selectorOrObject.selector;
  } else {
    selector = selectorOrObject;
  }

  this.message = `Testing if element <${selector}>'s text is ${expectedText}`;
  this.expected = expectedText;
  this.pass = (val) => val === expectedText;
  this.value = (res) => res.value;
  function evaluator(_selector) {
    // ★変えたのほぼここだけ★
    return document.querySelector(_selector).textContent;
  }
  this.command = (cb) => this.api.execute(evaluator, [selector], cb);
};

tests/e2e/spec/test.js (改変) 

// This is a template for E2E tests.

module.exports = {
  before(browser) {
    browser
      .init()
      .url('http://localhost:8080/');
  },
  'Test Case No.1': (browser) => {
    // ★ここに注目★
    // <div id="value1">こんにちは<div>を確認するテスト
    browser
      .assert.elementEquals('#value1', 'こんにちは');
    // [出力結果]
    // √ Testing if element <#value1>'s text is こんにちは (10ms)
  },
  after(browser) {
    browser
      .end()
      .perform((done) => {
        // eslint-disable-next-line no-console
        console.log('Done');
        done();
      });
  },
};

【４】カスタムアサーションの保存先を変更するには

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

nightwatch.json 

   {
     "custom_assertions_path": "./examples/custom-assertions",

参考文献
https://qiita.com/KWS_0901/items/440b1f8dd8b5ea92ba9f
https://github.com/nightwatchjs/nightwatch/blob/master/bin/nightwatch.json

関連記事

Vue + NightWatch で E2Eテスト をする
https://dk521123.hatenablog.com/entry/2021/02/06/220603
NightWatch ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/03/04/172003
NightWatch ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/03/05/113518
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/02/07/180052
セレクタ
https://dk521123.hatenablog.com/entry/2021/02/27/000000