mcpField
U
update-screenshots

update-screenshots

github.com/microsoftテスト・品質194.4k3.0k 回インストール今日更新
リポジトリ

update-screenshots について

update-screenshotsは、コンポーネントのスクリーンショットハッシュ不一致に対応するスキルです。CIから値を取得して画像差分を確認し、所定の形式でコミット済みの基準を更新する手順を示します。

主な機能

  1. 01CIから期待されるハッシュを取得
  2. 02新旧スクリーンショットを比較
  3. 03画面変更が意図的かを確認
  4. 04スクリーンショットの基準ファイルを更新
  5. 05差分レポートとブロッキングエラーを区別

活用シーン

  1. 01ハッシュ不一致によるCI失敗に対処
  2. 02画面変更が意図的か回帰かを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/microsoft/vscode --skill update-screenshots

インストール後、Claude Code で/update-screenshotsを入力して読み込まれたか確認します。

詳細

CI からコンポーネントのスクリーンショットを更新する

スクリーンショットの画像はリポジトリに保存されていません。コミット SHA をキーとして、外部サービス（hediet-screenshots.azurewebsites.net）に保存されています。ただし、一部のフィクスチャは test/componentFixtures/blocks-ci-screenshots.md でハッシュが固定されており、このファイルはコミットされています。これらのハッシュが変わると CI が失敗するため、ファイルを更新する必要があります。

結果は2種類あり、ブロックするのはそのうち1つだけです

.github/workflows/component-fixtures.yml の Screenshots & Tests ジョブは、独立した2種類の結果を生成します。

結果ブロックしますか？対応
スクリーンショットの差分レポート（変更前と変更後の画像を含む PR コメント）いいえ — 情報提供のみ表示を確認します。コミットするものはありません。
blocks-ci ハッシュの不一致はい — チェックが失敗しますblocks-ci-screenshots.md を更新してコミットします。

フィクスチャは labels: { kind: 'screenshot', blocksCi: true } を指定すると、ブロック対象になります。blocks-ci-screenshots.md に含まれるのは、それらのフィクスチャのみです。

失敗すると、次のように表示されます。

##[error]blocks-ci screenshot hashes do not match committed file. See PR comment or job summary for the updated content.

ステップ 1：CI から期待されるハッシュを取得する

ハッシュをローカルで再生成しないでください。 これらは ubuntu-latest 上で生成された、レンダリング後の PNG バイト列のハッシュです。macOS や Windows でレンダリングすると異なるバイト列になるため、ハッシュも異なり、ローカルで生成した値では CI に失敗します。必ず CI ジョブから値をコピーしてください。

同じ内容が3か所に表示されます。都合のよいものを使ってください。

  • PR コメント「blocks-ci screenshots changed」（フォーク以外の PR のみ）には、更新後のファイル全体とパッチが含まれます。
  • ジョブのサマリーには同じ本文が表示され、フォーク PR で確認できるのはここだけです。
  • ジョブログの最終ステップには、統合差分が出力されます。
gh api repos/microsoft/vscode/actions/jobs/<JOB_ID>/logs > "$TMPDIR/ci-job-log.txt"
grep -n '##\[error\]' "$TMPDIR/ci-job-log.txt"

次のコマンドで、失敗したジョブ ID を確認します。

gh pr checks <PR> --json name,link,bucket --jq '.[] | select(.name == "Screenshots & Tests")'

ステップ 2：変更を受け入れる前に、意図した変更であることを確認する

このチェックは意図しないレイアウトのリグレッションを検出するためのものです。そのため、画像を確認せずに新しいハッシュを受け入れると、本来の目的が損なわれます。画像はハッシュを指定して公開取得できるので、古いバージョン（コミット済み）と新しいバージョン（CI から取得）の両方をダウンロードして比較します。

curl -sL -o old.png "https://hediet-screenshots.azurewebsites.net/images/<OLD_HASH>"
curl -sL -o new.png "https://hediet-screenshots.azurewebsites.net/images/<NEW_HASH>"

次に画像を表示し、スクリーンショット全体を目視で確認するのではなく、変更箇所を特定してください。差分は多くの場合、わずか1、2ピクセルです。

python3 -c "
from PIL import Image, ImageChops
a = Image.open('old.png').convert('RGB'); b = Image.open('new.png').convert('RGB')
print('diff bbox:', ImageChops.difference(a, b).getbbox())
"

差分が PR の意図と一致することを確認します。フィクスチャが変更と無関係な場合、または予想より大きくずれている場合は、リグレッションとして扱い、ハッシュではなくコードを修正してください。

ステップ 3：適用してコミットする

test/componentFixtures/blocks-ci-screenshots.md の変更された行だけを編集し、画像 URL 内の古いハッシュを新しいハッシュに置き換えます。

#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Dark
![screenshot](https://hediet-screenshots.azurewebsites.net/images/<NEW_HASH>)

このファイルは build/lib/screenshotBlocksCi.ts によって生成され、バイト単位で比較されます。そのため、`` ヘッダー、#### <fixtureId> と画像リンクの組み合わせ、エントリー間の空行、fixtureId のソート順を維持してください。編集内容が CI で報告された差分の正確な逆になっていることを確認します。

git diff test/componentFixtures/blocks-ci-screenshots.md

その後、コミットしてプッシュします。チェックが再実行され、成功するはずです。マージ後、main のハッシュが新しいベースラインになります。

さらに調査する

実行時に取得した未加工の画像とマニフェストは、アーティファクトとしてアップロードされます。

gh run download <RUN_ID> --name screenshots --dir .tmp/screenshots

manifest.json は、各 fixtureId を imageHash およびレンダリングエラーに対応付けます。

同じジョブで発生する関連エラー

フィクスチャのレンダリングに失敗した場合（Fail if fixtures had errors）、または Playwright フィクスチャテストに失敗した場合も、チェックは失敗します。これらは実際のバグであり、ハッシュを更新しても解決しません。ログ内の ::error::<fixtureId>: を探し、テストの失敗については playwright-test-results アーティファクトをダウンロードしてください。

コメント

Markdown 対応