Playwrightのトレースビューアでデバッグを効率的に行う

Playwrightのトレースビューアはとてもパワフルなデバッグツール。最近はWebのE2Eサービスが増えてきているが、そこで表示されるデバッグ情報に負けないビューアになっている。それもそのはず、Web E2Eのテストはブラウザを使ってテストをするため、取得できる情報がブウラウザ経由に限られる。よって、Chromeで実行するならChromeが取得している情報を再利用するしかない。

トレースビューアの設定

公式ドキュメント： Trace viewer | Playwright

設定は簡単。

import { defineConfig } from '@playwright/test';
export default defineConfig({
  retries: 1,
  use: {
    trace: 'on-first-retry',
  },
});

ただし、onにするとパフォーマンスが落ちるので、最初にリトライするときの設定（on-first-retry）やパフォーマンスは落ちそうだけど失敗したときに確実に取る設定（retain-on-failure）がよさそう。

トレースを取りながらテストを実行したあと、確認する場合は取得したtrace.zipを指定して以下のコマンドを叩く。

npx playwright show-trace test-results/failure-failure-test-Google-Chrome-retry1/trace.zip

こんなかんじでいい感じのレポートを取ってくれる。見た目はデベロッパーツールなので使いやすそう。

リアルタイムで見るならUIモードがいいだろうけど（npx playwright test ./tests/failure.spec.ts --ui）、CIとかで動かすならTrace viewerが選択肢になる。

trace.playwright.dev

トレースしたデータは/test-resultsにZip形式で作成される。これを見るためには https://trace.playwright.dev/ へアクセスする必要がある。

データをアップロードするのやだなぁと思うならChromeアプリをインストールすればローカルで動作させることもできる。

https://trace.playwright.dev/ にアクセスすればダウンロードのアイコンがアドレスバーに出てくる。

＊

とても便利だけど、エラー時に毎回trace.zipをダウンロードして、trace.playwright.devやChrome appにアップロードして確かめるのはめんどい。

よって、このレベルのデバッグ情報をぽちっと開ける状態を目指したいので調べなきゃ。