✅ テスト・チェックClaude Code難易度: 中級

Playwright Trace CLI playwright-trace

テスト失敗の原因を掘り下げよう！

出典リポの★

91,917

最終更新

29日前

作者

microsoft

これは何？

Playwright Trace CLIは、テスト実行時に記録された詳細なトレース情報を、ブラウザを開かずにコマンドラインから調査できる便利ツールです。テストが失敗した時に、どのアクションで、どんな状態だったのかを詳しく調べることができます。まるでテスト実行時のタイムマシンのように、過去の状態を再現して調査できるのが特徴です。

これでできること

テスト実行時の全てのアクションをツリー形式で確認できる
特定のアクションの詳細（パラメータ、ログ、ソース位置）を調査できる
ネットワークリクエストやコンソールエラーをフィルタリングして表示できる
任意の時点のDOMスナップショットを取得して操作できる

こんな時に便利

テストが失敗した原因を特定したい時

特定のアクション実行時のページ状態を確認したい時

ネットワークリクエストの内容を詳細に調べたい時

コンソールに出力されたエラーメッセージを確認したい時

使い方

まず`trace open`コマンドでトレースファイルを開きます。次に`trace actions`でアクション一覧を確認し、気になるアクションIDを指定して詳細を調査します。ネットワークリクエストやコンソールログも同様にフィルタリングして確認できます。調査が終わったら`trace close`で後片付けしましょう。

使用例（こう頼んでみよう）

npx playwright trace open test-results/trace.zipnpx playwright trace actions --errors-onlynpx playwright trace snapshot 15 -- eval "document.title"npx playwright trace requests --failed

必要なもの

Playwrightがインストールされている
トレースファイル(.zip)が存在する

導入方法

いちばん簡単（AIに頼む）

次のスキルを入れて: https://github.com/microsoft/playwright/tree/main/packages/playwright-core/src/tools/trace

手動で置く

Claude Code → ~/.claude/skills/trace/

Codex → ~/.agents/skills/trace/

使いこなしのコツ

まずはactionsコマンドで全体の流れを把握してから詳細調査すると効率的です
--grepオプションで特定のキーワードを含むアクションやリクエストを絞り込めます
snapshotコマンドで取得したDOMに対してevalを実行すれば、当時の状態を詳しく調べられます

GitHubで見る