【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
https://dk521123.hatenablog.com/entry/2021/03/06/234935

の続き。

テスト時にスナップショットを撮る方法をメモする。

目次

【１】スナップショットを撮る
【２】エラー時にスナップショットを撮るには

【１】スナップショットを撮る

* saveScreenshot() を使う

https://nightwatchjs.org/api/saveScreenshot.html

サンプル

browser
  .waitForElementVisible('body', 10000)
  .saveScreenshot('screenshot.png');

【２】エラー時にスナップショットを撮るには

テストでエラーだった場合に、その時のスナップショットを取りたい。

公式ドキュメントの以下を参考にした。

https://nightwatchjs.org/api/end.html#taking-screenshots-on-failures-errors

前提条件

* NightWatch が設定されていること。
 => 以下の関連記事を参照のこと

Vue + NightWatch で E2Eテスト をする
https://dk521123.hatenablog.com/entry/2021/02/06/220603

設定

* プロジェクト直下に「nightwatch.json」を用意する

nightwatch.json

{
  "test_settings" : {
    "default" : {
      "screenshots" : {
        "enabled" : true,
        "on_failure" : true,
        "on_error": true,
        "path" : "./tests/e2e/reports/"
      }
    }
  }
}

出力先

設定したpath(今回、「tests/e2e/reports/」)に
<プロジェクト>/tests/e2e/reports/<テストファイル名>/<テスト名>_FAILED_<テスト時間>.png
で保存される

関連記事

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/06/234935
NightWatch に関するトラブルシューティング
https://dk521123.hatenablog.com/entry/2021/02/07/180052