comparing-branches-visually

ブランチを視覚的に比較する

2 つのブランチ間の UI の変更を、変更前と変更後で視覚的に比較します。

ワークフロー

1. 2 つのワークツリーを設定する

best-of-n-runner サブエージェントまたは Git ワークツリーを使って、両方のブランチを同時に実行します。

# Create a worktree for the base branch
git worktree add /tmp/branch-compare-base main

# The current working directory has the feature branch

2. 両方のサーバーを起動する

ベースブランチのサーバーを別のポートで起動します。

# In the base worktree
cd /tmp/branch-compare-base && PORT=3001 npm run dev

# Current branch is already on the default port (3000)

3. 比較するページを特定する

変更の影響を受けるページを特定します。

git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'

変更されたファイルをルートに対応付けます（例：app/dashboard/page.tsx → /dashboard）。

4. 両方のバージョンのスクリーンショットを撮る

影響を受けるページごとに、次の手順を実行します。

1. browser_navigate で http://localhost:3001/<page>（ベースブランチ）に移動します
2. browser_take_screenshot → 「before」として保存します
3. browser_navigate で http://localhost:3000/<page>（フィーチャーブランチ）に移動します
4. browser_take_screenshot → 「after」として保存します

5. レポートする

比較結果を提示します。

Visual Diff: feature/redesign-header vs main

/dashboard:
  Before: [screenshot from main]
  After:  [screenshot from feature branch]
  Changes: Header height reduced, nav links repositioned, new avatar dropdown

/settings:
  Before: [screenshot]
  After:  [screenshot]
  Changes: No visual differences detected

6. クリーンアップする

# Stop the base branch server
# Remove the worktree
git worktree remove /tmp/branch-compare-base

ヒント

• ビューポートのサイズを統一してテストします（1280×800 が適切なデフォルトです）
• モバイルファーストの変更では、幅 375px でも比較します
• アプリで認証が必要な場合は、最初に両方のポートでログインします
• PR の説明には screenshotting-changelog と組み合わせると便利です