Back to Details

comparing-branches-visually

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Comparing Branches Visually

分支视觉对比

Create a visual before/after comparison of UI changes between two branches.
创建两个分支之间UI变更的前后视觉对比。

Workflow

工作流程

1. Set Up Two Worktrees

1. 设置两个工作树

Use 
best-of-n-runner
subagents or git worktrees to run both branches simultaneously:
bash
undefined
使用
best-of-n-runner
子代理或git worktrees同时运行两个分支：
bash
undefined

Create a worktree for the base branch

为基准分支创建工作树

git worktree add /tmp/branch-compare-base main
git worktree add /tmp/branch-compare-base main

The current working directory has the feature branch

当前工作目录为功能分支

undefined
undefined

2. Start Both Servers

2. 启动两个服务器

Start the base branch server on a different port:
bash
undefined
在不同端口启动基准分支的服务器：
bash
undefined

In the base worktree

在基准工作树中

cd /tmp/branch-compare-base && PORT=3001 npm run dev
cd /tmp/branch-compare-base && PORT=3001 npm run dev

Current branch is already on the default port (3000)

当前分支已在默认端口（3000）运行

undefined
undefined

3. Identify Pages to Compare

3. 确定要对比的页面

Determine which pages are affected by the changes:
bash
git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'
Map changed files to their routes (e.g. 
app/dashboard/page.tsx
→ 
/dashboard
).
找出受变更影响的页面：
bash
git diff main --name-only | grep -E '\.(tsx?|jsx?|vue|svelte|css)'
将变更文件映射到对应的路由（例如 
app/dashboard/page.tsx
→ 
/dashboard
）。

4. Screenshot Both Versions

4. 对两个版本截图

For each affected page:
  1. browser_navigate
    to 
    http://localhost:3001/<page>
    (base branch)
  2. browser_take_screenshot
    → save as "before"
  3. browser_navigate
    to 
    http://localhost:3000/<page>
    (feature branch)
  4. browser_take_screenshot
    → save as "after"
针对每个受影响的页面：
  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. Report

5. 生成报告

Present the comparison:
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
展示对比结果：
视觉差异：feature/redesign-header vs main

/dashboard:
  基准版本：[来自main分支的截图]
  变更版本：[来自功能分支的截图]
  变更内容：页眉高度降低，导航链接重新定位，新增头像下拉菜单

/settings:
  基准版本：[截图]
  变更版本：[截图]
  变更内容：未检测到视觉差异

6. Clean Up

6. 清理环境

bash
undefined
bash
undefined

Stop the base branch server

停止基准分支的服务器

Remove the worktree

删除工作树

git worktree remove /tmp/branch-compare-base
undefined
git worktree remove /tmp/branch-compare-base
undefined

Tips

小贴士

  • Test at a consistent viewport size (1280×800 is a good default)
  • For mobile-first changes, also compare at 375px width
  • If the app requires auth, log in on both ports first
  • This pairs well with 
    screenshotting-changelog
    for PR descriptions
  • 在一致的视口尺寸下进行测试（1280×800是不错的默认选择）
  • 针对移动端优先的变更，同时在375px宽度下进行对比
  • 如果应用需要授权，请先在两个端口完成登录
  • 该流程与
    screenshotting-changelog
    搭配使用，可优化PR描述