TestCafeでテストに失敗したときにスクリーンショットを撮りたい

TestCafeのエラーメッセージはとてもわかりやすいのですが、「そんなわけない。実際に画面見たい。」となることもありますよね。

この記事では、TestCafeでテストに失敗時のスクリーンショットを自動的に保存できるようにします。

-s takeOnFails=trueオプションをつけるだけ

ま、以上なんですが...。

公式サイトだと、こちらに書かれております。

Command Line Interface | API

便利すぎやしませんか...TestCafeさん...。

TestCafeの起動時に次のようにオプションを付与するだけです。

testcafe chrome:headless -s takeOnFails=true

package.jsonに追記する

僕たちはNuxtで開発をしており、テストはyarn testコマンドで起動するようにしています。

{
  "script": {
    ...略...
    "test": "testcafe chrome:headless",
    ...略...
  },
}

と記載していました。ここを、次のように書き替えるだけです。

"test": "testcafe chrome:headless",
"test": "testcafe chrome:headless -s takeOnFails=true",

スクリーンショットはどこへ...

スクリーンショットはプロジェクトのルートディレクトリにscreenshotsディレクトリが自動で作成され、その中にテストケースごとのディレクトリが作られて保存されます。 テストケースのディレクトリには番号が振られているので、複数のテストが失敗したときでもどのテストがどのスクリーンショットなのかわかりやすいです。

pathオプション を使えば、ディレクトリの場所を変えることもできるみたいですが、特にルートディレクトリにディレクトリが作成されても困っていないので指定していません。

ただ、screenshotはGitHubなどのGitサービスにあげる必要がないものなので、.gitignoreでGitの対象から外してます。

screenshots

また、新しいテストを始めるときに、古いテストのスクリーンショットが残っているとわけがわからなくなってしまいます。 そこで、package.jsonでtestcafe実行前にscreenshotsディレクトリを削除するようにしています。

"test": "testcafe chrome:headless -s takeOnFails=true"
"test": "rm -rf ./screenshots && testcafe chrome:headless -s takeOnFails=true"

これでステキな自動テストライフを過ごせます🎁。

番外編：失敗時のスクリーンショットじゃわからない...

そんなときもあります。 なんかエラー画面が出てるだけで終わり...その直前の画面が見たい... そんなときはテストコード内で意図的にスクリーンショットを撮ることもできます。

test('take a screenshot', async t => {
  await t
    .typeText('#input', 'hello')
    .takeScreenshot()
    .click('#button')
    .expect(...).eql(...)
})

このように#buttonのクリック直後のテストの失敗原因がスクリーンショットからはわからないときは、takeScreenshot()を使ってクリック直前の画面をスクリーンショットを取得できます。 これも特に指定しなければ./screenshotsディレクトリの中のテストケースのディレクトリ内に、テスト失敗のスクリーンショットと分けて格納されます。 takeScreenshot()もパスや全画面を対象にするかを選択できますので、気になる人は公式サイトを御覧ください。

.takeScreenshot() | TestController | Test API | API

まとめ

前回に引き続き、TestCafeについてお話しました。 テスト時のスクリーンショットは、自作しなかったりしなくてはいけないテストフレームワークもあったりするので、TestCafeはかなり手軽でした。 みなさんにステキなテストライフが訪れますように🤞。