Frontend PR 証拠
PRのマージベースとヘッドを、同一のフィクスチャ、ビューポート、インタラクションで記録し、両方の記録を gh を通じて1つのPRコメントとして投稿します。リポジトリのPRスキルがPR本文を管理します。$SCRATCH はセッションのスクラッチディレクトリを意味します。バンドルされたスクリプトは絶対パスで実行してください。
手順
- リビジョンを解決する。
gh pr view PR_URL --json baseRefName,headRefOidからbaseRefNameとheadRefOidを読み取ります。git fetch origin BASE_BRANCH pull/PR_NUMBER/headを実行し、次にgit merge-base origin/BASE_BRANCH HEAD_SHAを実行します。両方のSHAがローカルで解決されたら完了です。 - 両方のリビジョンをビルドする。 各リビジョンがビルド済みの出力フォルダまたは実行中の開発サーバーを持ち、そのソースがSHAと一致したら完了です。
- フローを書く
$SCRATCH配下に、サンプル から始めて、以下のフローインターフェースに従って記述します。 - キャプチャする
node scripts/capture.cjs FLOW "$SCRATCH/evidence"を実行します。失敗した場合、そのエラー名が修正方法を示します。インストールコマンド、アプリからのナビゲーションアウェイ、またはハイライトの問題などです。セレクタの失敗は、出力フォルダにfailure.pngとfailure-aria.ymlも残します。フローを修正して再実行します。以下の場合に完了です。- コマンドが終了コード0で終了する。
- すべての
manifest.networkエントリが説明されている（モック実行の場合、各エントリはモックされていない呼び出しです）。 comparison.pngが両方のフェーズで変更部分をフレームに収めている。video-contact-sheet.pngがカーソルが各ターゲットに到達し、最終状態が保持されていることを示している。
- 公開する
node scripts/publish.cjs "$SCRATCH/evidence" PR_URLを実行します。証拠がPRの現在のヘッドおよびマージベースと一致することを確認し、比較画像と動画を添付したcomment.mdを投稿し、GitHubが両方をホストしていることを確認します。同じキャプチャに対して再実行すると、そのコメントを再利用します。gh auth statusでログインがないことが示された場合、そのステップについてのみユーザーに依頼します。公開がブロックされたままの場合は、アーティファクトを保持し、正確なエラーを報告します。コメントURLが出力されたら完了です。 - リンクする PR本文の証拠セクションからコメントURLにリンクします。PR本文が、
publish.cjsが現在のヘッドに対して出力したURLをリンクし、以前の証拠リンクを置き換えたら完了です。 - クリーンアップする 起動したサーバーとワークツリーをクリーンアップします。アーティファクト、Cookie、およびストレージステートファイルをソース管理の対象外にしておきます。
フローインターフェース
フローモジュールは以下をエクスポートします。
description: テスト対象のインタラクションと、データがモックかライブかを示します。コメントのテキストになります。phases: 2つの{ label, revision, url | dir, run }エントリ。Before、After の順です。dirはビルド済みの出力フォルダで、ヘルパーによってクライアントルートがindex.htmlにフォールバックして提供されます。urlは実行中の開発サーバーを指します。viewport(オプション、デフォルト 1440×900)。setup(page, phase)(オプション): 各フェーズの最初のナビゲーションの前に実行されます。ルート、初期化スクリプト、Cookie、ストレージがリセットされたページ上で実行されます。ここでモック、シード、認証フィクスチャを登録します。ルートは新しいものから順にマッチするため、特定のモックの前にキャッチオールのアボートを登録してください。warmup(page, phase)(オプション): ページ読み込み後に記録されずに実行されます。例えば、開発サーバーがコンパイルしている間などに使用します。run(page, tools): インタラクションを実行し、各フェーズの期待される状態をアサートします。tools.click(locator)、tools.point(locator)、tools.highlight(locator, label?)を使用します。各フェーズには少なくとも1つのハイライトが必要で、runが戻るときにまだ表示されている必要があります。
出力: before.png、after.png、comparison.png、comparison.webm、video-contact-sheet.png（タイムスタンプ付きフレームの動画）、manifest.json、comment.md。
認証が必要なアプリケーション。 ヘルパーのChromiumはログインなしで起動します。他の場所でのブラウザセッションや gh 認証は到達しません。setup でサインイン状態を再現してください。サンプルでは2つの方法を示しています。ライブ認証証拠が必要で、キャプチャコンテキストがそれに到達できない場合は、その制限と実際に実行されたチェックを報告してください。
スクリプトを変更したりPlaywrightをアップグレードしたりした後は、node scripts/capture.test.cjs を実行してください。CAPTURE_TEST_OUTPUT=DIR を設定してそのアーティファクトを保持し、PLAYWRIGHT_MODULE=PATH を設定して別のPlaywrightインストールをテストできます。