■ はじめに

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

の続き。

NightWatch に関して、基本的なことを行うのに必要なAPIを書き足していく

【０】API仕様
【１】ユーザ操作
　１）click()
　２）setValue()
【２】確認・検証
　１）title()
　２）visible()
　３）containsText()
　４）text() / value()
　５）getText() / getValue()
　６）urlEquals() / urlContains()
【３】クッキー
　１）set/get/deleteCookie
【４】その他のメソッド
　１）waitForElementVisible()
　２）pause()
　３）windowMaximize()
　４）saveScreenshot()

【０】

１）API仕様

https://nightwatchjs.org/api/

２）要素の指定の仕方

* メソッドの第一引数は、対象の要素を指定するのに、セレクタを用いる
 => セレクタについての詳細は、以下の関連記事を参照のこと

セレクタ
https://dk521123.hatenablog.com/entry/2021/02/27/000000

【１】ユーザ操作

１）click()

* クリック操作

例：select タグを選択する

browser.click('select[name="your-select-name"] option[value="some-value"]')

https://stackoverflow.com/questions/36020702/nightwatch-to-select-option-from-select-box/38397040

２）setValue()

* 値の入力

例：「input[type=text]」に「nightwatch」を入力しEnterキー押下

browser.setValue('input[type=text]', ['nightwatch', browser.Keys.ENTER]);

【２】確認・検証

* ここに記載されていないメソッドは、以下の公式サイトのAPIを参照のこと

https://nightwatchjs.org/api/
https://nightwatchjs.org/api/expect/

１）title

* タイトルの確認
 => 各ページにタイトルが一意に振られている場合は
　　ページ先遷移の確認として使える

例：タイトルの確認

browser.assert.title('your-expected-title');

２）visible

* 表示・非表示の確認

例：表示・非表示

// 表示の確認
browser.assert.visible('input[type=text]');

// 非表示の確認 (notを付加する)
browser.assert.not.visible('div');

３）containsText()

* ざっくり指定された文字列が含まれているを確認する際に使用

例：divの表示を確認する

// <div id='world'>Hello world!!</div> を確認したい
browser.containsText('#world', 'Hello world!!');

// <div class='hello'>Hello world!!</div> を確認したい
browser.containsText('.hello', 'Hello world!!');

４）text() / value()

* 表示の確認する際に使える

https://nightwatchjs.org/api/expect/#expect-text

例：div/id付の表示を確認する

// <div id="value1">こんにちは<div>を確認するテスト
browser.expect.element('#value1').text.to.equal('こんにちは');

// [出力結果]
// √ Expected element <#value1> text to equal: "こんにちは"

５）getText() / getValue()

* データを取得する

例：div/class付の表示を取得する

// <div id="value1">こんにちは<div>を確認するテスト
browser.getText('#value1', (result) => {
  // 「こんにちは」が表示される
  // console.log(result.value);
  browser.assert.strictEqual(result.value, 'こんにちは');
});

６）urlEquals() / urlContains()

* URL の確認
 => 遷移先のURL、リダイレクトしている/していない などの確認に使える

例：URLの確認

// URLが http://localhost:8080/ かどうか
browser.assert.urlEquals('http://localhost:8080/');

// localhostが含んでいる場合
browser.assert.urlContains('localhost');

【３】クッキーの操作

* ログイン情報がないクリーンの状態での動作確認で、
　クッキーを削除するなどのクッキー操作もサポートされている
* 以下の公式サイトを参照のこと

https://nightwatchjs.org/api/commands/#cookies-headline

１）set/get/deleteCookie

サンプル

// This is a template for E2E tests.

module.exports = {
  beforeEach(browser) {
    browser
      .init()
      .url('http://localhost:8080/');
  },
  'Test Case No.1': (browser) => {
    browser
      .waitForElementVisible('body')
      .assert.title('vue-ts-demo');
  },
  after(browser) {
    browser
      // クッキーの設定
      .setCookie({ name: 'my_cookie', value: 'success' })
      // クッキーの取得
      .getCookie('my_cookie', (result) => {
        // eslint-disable-next-line no-console
        console.log(result);
      })
      // クッキーの削除
      .deleteCookie('my_cookie', (result) => {
        // eslint-disable-next-line no-console
        console.log(result);
      })
      .end()
      .perform((done) => {
        // eslint-disable-next-line no-console
        console.log('Done');
        done();
      });
  },
};

/** 出力結果
{
  domain: 'localhost',
  expiry: 2245760105,
  httpOnly: false,
  name: 'my_cookie',
  path: '/',
  secure: false,
  value: 'success'
}
{
  sessionId: '203fb0b472335b9d2873b75ad45a8328',
  status: 0,
  value: null
}
Done
**/

【４】その他のメソッド

１）waitForElementVisible()

* 指定されたタグが表示されるまで待つ

例：bodyタグが現れるまで1秒待つ

browser.waitForElementVisible('body', 1000);

２）pause()

* 指定ミリ秒まで待つ

例：2秒待つ

browser.pause(2000);

３）windowMaximize()

* Windowを最大表示

４）saveScreenshot()

* スナップショットを取る
 => 詳細は、以下の関連記事を参照のこと

NightWatch ～スナップショットあれこれ～
https://dk521123.hatenablog.com/entry/2021/03/07/223957

参考文献

https://qiita.com/mima_ita/items/40293bd80a497a209a89
https://ito-u-oti.com/post-699/

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/08/235438
NightWatch ～カスタムアサーション～
https://dk521123.hatenablog.com/entry/2021/03/06/234935
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

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

Memo for Programming.

【NightWatch】NightWatch ～基本編～