こんにちは。最近はCypressの回しすぎでテストエンジニアのようになってきたフロントエンジニアです。今回はCypressで大量のテストを回すと、ブラウザがクラッシュする問題の検証と解決を行いました。

■結論

最初に結論から述べると、テストを回すブラウザを「FireFox」にしたら解決しました。

■原因の追及

今回行ったテストは15ページ程に及ぶWebサイトのE2Eテストを通して行うというものでした。これを回すと途中でエラー画面になってしまい、テストが止まってしまいます。

こちらの記事にChrome Error 00005が起こる原因がまとめられています。

またこちらのstackoverflowの回答でも、今回の問題についてまとめられていました。

cypress openで実行する場合、Cypress はデバッグ目的で通常の DOM スナップショットを取得します。これにより最終的にクラッシュするまで、メモリは増加し続けます。

これらにより、原因はメモリ消費量なのではないかと突き止めました。

■色々やってみる

❌①Chromeを最新バージョンにしてみた。

Google Inc.ファイルの最新バージョンをダウンロードしてインストールすることで解決できます

先ほどの記事を参考に、Chromeをバージョンアップしてみました。
→ 解決せず。

❌②numTestsKeptInMemoryを0にしてみた。

GitHabのIssues:「(直訳)250秒（約）以上のテスト実行時に「Aw, Snap」エラー画面が表示される断続的」を参考に、cypress.configファイルに下記設定を追加しました。

cypress.config.ts

export default defineConfig({
  ...
  "numTestsKeptInMemory": 0, //追加
  ...
  },
})

参考： Cypress.configの引数一覧

numTestsKeptInMemory:
スナップショットとコマンドデータがメモリに保持されるテストの数。テスト実行中にブラウザで大量のメモリ消費が発生している場合は、この数値を減らしてください。

これで解決している人も多いようですが、私はダメでした。。
同じIssuesの中でこのような一文もありました。

私たちの多くがこのスレッドで以前に指摘したように、numTestsKeptInMemory はマイナーな可能な回避策にすぎません..

冒頭に挙げたstackoverflowでは下記のように述べられています。

メモリに保持されるスナップショットの数を減らすことができます。
numTestsKeptInMemoryデフォルトは 30 程度ですが、10、5、または 0 に減らすこともできます。0 の場合、DOM スナップショットは取得されません。メモリ使用量は引き続き増加しますが、速度ははるかに遅くなります。

スナップショットが取得されなくなるので、あまりいい方法ではなさそうです。

❌③テストを回すChromeのバージョンを変える

続いて試したのがこちらです。どうやらChromeの100以上のバージョンがダメ、という事でCypress起動コマンドを変更し、テストを回すChromeのバージョンを変えてみました。ただ実際に回しているバージョンが変わっていたのかよく分からず。。やり方が根本的に間違えていたかもしれません。

GitHub Issues:「(直訳)Cypress Open が Chrome 100 へのアップグレード後に「Aw Snap」で Chrome をクラッシュさせる」

npm run cypress --browser "pathToChromiumVersion\chrome.exe"

❌④ログを出力しないようにして軽くする

続いてこちらを試しました。
参照：Cypress Troubleshooting

起動コマンドを叩く際に、下記一文を追加して叩くとログが出なくなるようです。

CYPRESS_NO_COMMAND_LOG=1

画面に何も表示されなくなりました。サイトを立ち上げているターミナルではアクセスのログが吐かれていたので、恐らく動いているようですがこれではテストの結果もよく分からないので実用的ではなさそうです。

■解決

調べている内にGitHubに同じようなIssuesが複数立てられており、どこでも解決していないことが判明し諦めかけていました。ただここで皆さんが同じような問題を抱えている事に気が付きました。
「Chromeでクラッシュする」
「Edgeでもクラッシュする」
…
ブラウザを変えたら解決するのでは？

⭕️FireFoxで回してみた

試しにFireFoxで回してみたところ、クラッシュせずに回すことが出来ました！！
FireFoxはメモリ使用量を抑える特性を持っているようです。すばらしい

…ここで、もう１つGitHubでよく述べられていたコメントに気が付きました。
「テストを細かく分割せよ」
…これが恐らく最適解です。

■まとめ

今回はCypressで大量のテストを通して回すと、ブラウザがクラッシュする問題の検証を行いました。結果としては現在も議論が行われており、明確な解決方法は出されていないようでした。ひとまず

・メモリの消費量が少ないFireFoxを使う
・テストを分割して回すこと

が対応策になるみたいです。様々なブラウザで全て通してテストをしたい場合はちょっと不便かもしれないですね。。

お読みいただきありがとうございました。