こんにちは。asatoです。
前回、spaces.bzというプロダクトの開発でTestCafeでテストを自動化している話をしました。

実際に開発をしていると、「え？そんなところで？」と思うようなところでテストがFailになることもあります。
TestCafeのエラーメッセージはとてもわかりやすいのですが、「そんなわけないよ！実際に画面見せろよ！」となることもありますよね。

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

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

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

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

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

TestCafeの起動時に

$ testcafe chrome:headless -s takeOnFails=true

のように記載すればOKです。

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()を使ってあげれば#buttonをクリックする直前の画面をスクリーンショットできます！
これも特に指定しなければ./screenshotsディレクトリの中のテストケースのディレクトリ内に、テスト失敗のスクリーンショットと分けて格納されます。
takeScreenshot()もパスや全画面を対象にするかを選択できますので、気になる方は公式サイトを御覧ください。

まとめ

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

spaces.bzも応援よろしくおねがいします！🎉