Playwrightのtrace・video・HARには何が残っているのか：CIの成果物から資格情報が漏れる経路と、その塞ぎ方

CIのtrace.zipをそのまま公開してはいけない

PlaywrightのテストがCIで失敗した。そこでtrace.zipを開いたら、原因が一発でわかる。これは本当に便利です。

ただし、traceは「失敗したテストのスクリーンショット」だけではありません。DOMスナップショット、ネットワークのリクエストとレスポンス、ヘッダー、フォーム入力まで残ります。

テスト用のアカウントだから大丈夫、と思って雑にCIアーティファクトへ置くと、認証情報や個人情報が入ったままになることがあります。

Playwright公式のTrace Viewerでは、アクションごとのDOMスナップショット、スクリーンショット、コンソール、ネットワーク通信を確認できます。

たとえばログイン処理なら、次のような情報が記録対象になります。

テストが失敗した場所だけを見ていると、trace全体に残っている情報を忘れがちです。ここ、注意です。

Playwrightの公式ドキュメントにある設定で、リトライ時だけtraceを作ります。

import { defineConfig } from '@playwright/test';

export default defineConfig({
  retries: 1,
  use: {
    trace: 'on-first-retry',
  },
});

テストを実行したあと、HTMLレポートからtraceを開けます。手元のzipを直接開くなら次のコマンドです。

npx playwright show-trace test-results/example-test/trace.zip

ActionsだけでなくNetworkも開いてください。リクエストを選ぶと、リクエストヘッダー、レスポンスヘッダー、リクエスト本文、レスポンス本文まで見えます。

「テストが失敗した原因だけ見る」つもりで、Networkを開かないまま共有するのは危険です。

次のようにすると全テストでtraceを記録できます。

export default defineConfig({
  use: {
    trace: 'on',
  },
});

しかし、公式ドキュメントもtrace onはパフォーマンスに重い設定として扱っています。成功したテストのtraceまで全部残す必要はありません。

CIでは、まず次のどちらかで十分です。

use: {
  trace: 'on-first-retry',
  video: 'on-first-retry',
}

// または、リトライを使わない場合
use: {
  trace: 'retain-on-failure',
}

失敗時の証跡は残しつつ、毎回の実行で巨大な成果物を作らずに済みます。

trace.zipをアップロードする処理の前に、最低限ここを確認してください。

認証情報をコードに書かないだけでは不十分です。コードに書いていない秘密が、テストの実行結果に残ることがあります。

すでに公開したtraceにパスワードやトークンが入っていたら、アーティファクトを削除するだけでは足りません。まず対象のパスワードやトークンを無効化して、必要なら再発行します。

そのあとでCIの保存先、ログ、キャッシュ、共有URLを確認します。どこまでコピーされたかは、traceを削除しただけではわからないからです。

テスト用の秘密でも、同じ値を別の場所で使っていたら実害が出ます。テスト用アカウントはテスト専用にしておくのが一番です。

Playwrightのtraceは、失敗原因を追うための強力な証跡です。DOM、スクリーンショット、ネットワークまで見えるからこそ、秘密情報も残ります。

CIではon-first-retryかretain-on-failureから始めて、共有前にtrace全体を確認してください。便利なものほど、置き場所には気をつけた方がいいですね。