差异比较

比较页面状态以检测变化——通过无障碍树快照进行结构性比较、通过像素比较进行视觉比较，或跨两个不同的 URL 进行比较。

命令¶

命令	描述
`diff snapshot`	将当前快照与会话中的最后一个快照进行比较
`diff snapshot --baseline <file>`	将当前快照与已保存的文件进行比较
`diff screenshot --baseline <file>`	与基线图像进行视觉像素差异对比
`diff url <url1> <url2>`	比较两个页面（快照 + 可选截图）

快照差异¶

通过行级文本差异，比较不同时间点之间的无障碍树。

# Compare against the last snapshot taken in this session
agent-browser diff snapshot

# Compare against a saved baseline file
agent-browser diff snapshot --baseline before.txt

# Scope to a specific part of the page
agent-browser diff snapshot --selector "#main" --compact

未使用 --baseline 时，命令会自动与当前会话中最近一次获取的快照进行比较。这是智能体验证某个操作是否达到预期效果的主要使用场景。

选项¶

标志	描述
`-b, --baseline <file>`	要进行比较的已保存快照文件的路径
`-s, --selector <sel>`	将当前快照限定到某个 CSS 选择器或 @ref
`-c, --compact`	使用紧凑快照格式
`-d, --depth <n>`	限制快照树的深度

输出¶

该差异使用 + 表示新增行，使用 - 表示删除行，与统一差异格式类似。摘要行会显示新增、删除和未更改行的数量。

- button "Submit" [ref=e2]
+ button "Submit" [ref=e2] [disabled]
  3 additions, 2 removals, 41 unchanged

截图差异¶

在像素级别将当前页面截图与基线图像进行比较，并生成一张差异图像，其中发生变化的像素以红色突出显示。

# Basic visual diff
agent-browser diff screenshot --baseline before.png

# Save diff image to a specific path
agent-browser diff screenshot --baseline before.png --output diff.png

# Adjust threshold and scope to element
agent-browser diff screenshot --baseline before.png --threshold 0.2 --selector "#hero"

选项¶

标志	描述
`-b, --baseline <file>`	要与之比较的基线 PNG/JPEG 图像（必填）
`-o, --output <file>`	生成的差异图像的保存路径（默认：临时目录）
`-t, --threshold <0-1>`	颜色距离阈值（默认：0.1）。值越大，容差越高
`-s, --selector <sel>`	将当前截图限定到某个元素
`--full`	获取整页截图

输出¶

报告差异图像路径、不同像素的数量以及不匹配百分比。差异图像会将未更改的像素变暗，并以红色显示发生变化的像素。

如果基线图像与当前图像具有不同的尺寸，命令会报告尺寸不匹配，而不是尝试进行像素比较。

URL 差异¶

通过依次导航到两个页面并对结果进行差异比较，来比较两个页面。

# Compare two URLs (snapshot diff)
agent-browser diff url https://staging.example.com https://prod.example.com

# Include visual comparison
agent-browser diff url https://v1.example.com https://v2.example.com --screenshot

# Full-page screenshot comparison
agent-browser diff url https://v1.example.com https://v2.example.com --screenshot --full

该命令先导航到第一个 URL，捕获状态，然后导航到第二个 URL 并再次捕获。快照差异始终包含在内；截图差异则需要 --screenshot 标志。

执行完成后，浏览器会停留在第二个 URL 上。

选项¶

标志	描述
`--screenshot`	同时进行视觉截图比较
`--full`	使用整页截图
`--wait-until <strategy>`	导航等待策略：`load`、`domcontentloaded`、`networkidle`（默认：`load`）
`-s, --selector <sel>`	将快照限定到某个 CSS 选择器或 @ref
`-c, --compact`	使用紧凑快照格式
`-d, --depth <n>`	限制快照树的深度

--wait-until 选项仅接受 load、domcontentloaded 和 networkidle，无法表达特定于应用的条件。如果页面需要选择器、文本、URL 或 JavaScript 条件，请使用单独的 open 和 wait 命令，然后比较捕获的快照或截图，而不是使用 diff url。对于网络安静的页面，networkidle 受支持，但 SSE、WebSockets、轮询和长轮询可能会阻止其完成解析。

使用场景¶

验证智能体操作¶

最常见的用例：确认某个操作（点击、填写、提交）按预期改变了页面。

agent-browser snapshot -i          # Take interactive-only snapshot (baseline)
agent-browser fill @e3 "test@example.com"
agent-browser diff snapshot        # Compare current snapshot to the baseline

监控变化¶

定期将页面与保存的基线进行比较，以检测更新。

# Save baseline
agent-browser open https://example.com && agent-browser snapshot > baseline.txt

# Later, check for changes
agent-browser open https://example.com && agent-browser diff snapshot --baseline baseline.txt

视觉回归测试¶

比较部署前后的截图，以捕捉意外的视觉变化。

agent-browser open https://staging.example.com && agent-browser screenshot baseline.png
# ... deploy happens ...
agent-browser open https://staging.example.com && agent-browser diff screenshot --baseline baseline.png

比较环境¶

对比暂存环境与生产环境，以验证一致性。

agent-browser diff url https://staging.example.com https://prod.example.com --screenshot

本页原文 Markdown：在 AtomGit 查看·内容源自开源项目 agen/agent-browser