Playwright 1.63.0で、テストが遅い理由を追うための証跡が一段扱いやすくなりました。組み込みのPerfettoレポーターはTrace Event Formatを書き出し、HTMLレポートにはテストステップごとのduration waterfallが表示されます。
「遅い」を合計時間だけで判断しない
テストが10秒かかった、と分かっても、どこで時間を使ったのかは分かりません。ブラウザの起動、ページ遷移、locatorの待機、APIレスポンス、アサーションのどこが原因なのかを分けないと、AIに相談しても推測の域を出ません。
Playwright 1.63.0のHTMLレポートでは、テストステップの横にduration waterfallが表示されます。まずここで、遅さが一つの長いステップなのか、細かい待機の積み重ねなのかを確認できます。
Perfettoレポーターで時系列をファイルにする
同じリリースには、Perfetto UIやchrome://tracingで開けるTrace Event Formatを書き出す組み込みレポーターが追加されました。テストを実行するだけなら、次のように指定します。
npx playwright test --reporter=perfetto出力されたトレースイベントは、ブラウザのタイムラインを見るための形式です。Playwrightのテスト結果を人間だけが画面で読むのではなく、保存可能な証跡として扱えるのがポイントです。
AIに渡す時の現実的な流れ
Claude CodeなどのAIに「このテストを速くして」と頼む場合も、最初からコードを書き換えさせるのは危険です。まずHTMLレポートのwaterfallやPerfettoで確認した事実を、次の順に渡します。
- 遅いテストと再現条件を固定する。
- duration waterfallで長いステップを特定する。
- 必要ならPerfettoの時系列で前後のイベントを見る。
- AIには「原因候補」と「追加で確認する計測」を分けて提案させる。
- 変更後に同じテストを再実行し、waterfallの変化で検証する。
たとえばlocatorの待機が長いなら、セレクターを変える前に、対象要素が表示されるまでのアプリ側処理やネットワークを確認します。AIが「この待機を短くすればよい」と言っても、固定sleepを削るだけではflaky testを増やす可能性があります。
Speedboardとの使い分け
以前紹介したPlaywright Speedboardは、遅いテストを見つける入口として便利です。今回のPerfettoとduration waterfallは、見つけた遅さを時系列とステップ単位で掘るための道具、と整理すると迷いません。
テスト失敗の画面操作やネットワークを詳しく追う場合は、traceとVideo Receiptsの証跡も役立ちます。ただし、traceやHARにはCookie、Authorizationヘッダー、フォーム入力が残ることがあるため、CIアーティファクトをAIに渡す前にマスキングと保存期間を確認してください。
まずは一つの遅いテストで試す
Perfettoを導入したからといって、すべてのテストを毎回細かく分析する必要はありません。CIで時間が伸びたテストを一つ選び、通常のHTMLレポートでwaterfallを確認し、原因が分かれない時だけPerfettoに進むのが現実的です。
今回の変更で大事なのは、AIに分析を丸投げできるようになったことではありません。テストの実行時間を再現可能な証跡にし、AIの提案を同じ証跡で検証できるようになったことです。推測を便利に使いながら、最後の判断は再実行で確かめる。この順番なら、PlaywrightとClaude Codeを組み合わせた無人の改善ループにも組み込みやすくなります。
まとめ
- Playwright 1.63.0でPerfetto向けのTrace Event Formatレポーターが追加された。
- HTMLレポートのduration waterfallで、テストステップごとの時間を確認できる。
- AIにはまず証跡と再現条件を渡し、原因候補と追加計測を分けて提案させる。
- 変更後は同じテストを再実行し、waterfallの変化で効果を確認する。
コメント