PlayWrightのテストが失敗したときにトレース情報を参照する方法
これはInfocom Advent Calendar 2024 4日目の記事です．
問題
最近E2EテストにPlayWrightを使っているのですが，以下の2点の問題が発生しました．
npx playwright testで実行してテストが失敗したときに，トレース情報が出力されない．npx playwright test --uiで実行してテストが失敗したときに，サイドバーのActionsタブの内容が真っ白になってしまい，参照できなくなることがある（なんかエラーアイコンだけ表示されていたような気もする）．
1.はGitHub ActionsなどのCIで実行したときに，失敗原因を調べる方法がなく困りました．
ただし，デフォルトでは1回目のリトライの時にトレース情報が出力されるようです．
調べてみたところ，私の環境ではplaywright.config.jsのretriesを0にしていたので，トレースファイルが出力されていなかったようです．
2.はPlayWrightのバグなのか私の環境の問題なのかわかりませんが，解決方法がなく困りました．
解決方法
1.の場合も2.の場合にも対応するため，playwright.config.jsを次のように設定しました．
playwright.config.js（抜粋）
/* Never retry */
retries: 0,
use: {
/* Record trace for each test. When test run passes, remove the recorded trace. */
trace: 'retain-on-failure',
},use.traceに設定できる値をこちらを参照してください．
トレース情報の参照
この設定の場合，CIで実行してもローカルで実行しても，失敗したテストのレポートページ下部に，次のようなトレースファイルがダウンロードできるリンクが生成されます．
このファイルを使い，次のようなコマンドでトレース情報を参照できます．（npx playwright test --uiで実行したときと同様な画面が表示されます．）
npx playwright show-trace path/to/trace.zip
