Argent Screenshot Diff

作者 software-mansioncb0f538ad083無授權條款收錄於 2026年10月8日更新於 2026年10月8日

Compare saved or live app screenshots with the argent screenshot-diff tool. Use when testing visual regressions, before/after UI comparisons, screenshot diff checks, visible layout, spacing, color, typography, clipping, overflow, text rendering, or image/icon rendering changes.

AI 產生的概覽

使用 argent screenshot-diff 工具比較已儲存或即時的行動應用程式截圖,找出像素層級可見的介面變化。

功能
引導代理使用 argent screenshot-diff 工具,將基準截圖與目前截圖進行比較,截圖可來自已儲存的 PNG 檔案或裝置即時擷取。內容涵蓋截圖規則、參數組合,以及先建立基準再比較的確定性流程,並產出差異摘要與產物路徑,用於視覺回歸檢查。此技能定位為輔助性的視覺證據,不能取代人工目視檢查或結構性檢查。
適用情境
適用於明確的 UI 或視覺回歸測試、截圖差異比對請求,以及預期結果為像素層級可見的前後視覺比較,例如版面配置、間距、顏色、字體排版、裁切、溢出或圖片算繪變化。當結果更適合以結構性方式驗證,或動態內容與缺少基準會使比較產生雜訊時,則不適合使用。
執行需求
需要 argent screenshot-diff 工具與截圖能力、目標裝置 UDID(支援實體 iPhone),以及輸出目錄;以檔案為基礎的比較還需要已儲存的基準與目前 PNG 檔案。此技能未隨附指令碼。

1. Role

Use screenshot-diff as supporting visual evidence for UI QA and visual regression checks. It highlights pixel-visible change or stability; it does not replace visual inspection, accessibility/component-tree state, frame/attribute checks, logs, network evidence, or app behavior.

Do not use screenshot diffing for tap-coordinate discovery. Use describe, debugger-component-tree, or native-describe-screen to find targets first.

screenshot-diff supports physical iPhones (kind "device") for both saved-file diffs and live captures. A live capture on hardware goes through the on-device runner at full resolution, is device-wide, and needs no registered app. Keep baselines per device model and resolution, and note that the rotation parameter is ignored on hardware: the capture follows the device's real orientation.

2. When To Use

Use screenshot-diff when pixel comparison can answer the verification question:

  • Required for explicit "UI regression test", "visual regression test", "screenshot diff", "compare screenshots", or "before/after visual comparison" requests, unless stable comparable screenshots cannot be produced.
  • Good fit when the affected screen has stable before/after states and the expected result is pixel-visible: layout, position, size, spacing, color, typography, image/icon rendering, clipping, overflow, or text rendering.
  • Good fit when the risk is unintended visual regression outside the exact element changed.
  • Poor fit when the result is better verified structurally: state changes, navigation existence, accessibility tree contents, console/network behavior, or unit tests.
  • Poor fit when dynamic content, unpausable animation, timestamps, ads, random data, or missing baseline/current screenshots would make the comparison noisy or meaningless.

3. Capture Rules

Use normal downscaled screenshot calls for UI context and state checks. Use full-resolution screenshots only when saving baseline/current PNG files for visual regression comparison. Suppress the image block so the full-size PNG is not loaded into context:

json
{ "udid": "<UDID>", "scale": 1.0, "includeImageInContext": false }

Capture the stable baseline before the relevant interaction or before editing whenever feasible. Compare it to the post-change or post-interaction screen after the app reloads, rebuilds, or reaches the state under test.

4. Parameters

Provide udid and exactly one input for the baseline side and exactly one input for the current side:

  • Common UI regression flow: saved baseline plus live current -> baselinePath, captureCurrent: true, udid, outputDir.
  • Both screenshots already saved -> baselinePath, currentPath, udid, outputDir.
  • Rare fixture flow: live baseline plus saved current -> captureBaseline: true, currentPath, udid, outputDir.
  • Do not combine captureBaseline: true with captureCurrent: true, or provide both a path and live capture flag for the same side.

5. Deterministic Flow

  1. Navigate to the known-good state.
  2. Capture a baseline PNG with screenshot using scale: 1.0 and includeImageInContext: false; keep the returned path.
  3. Perform the interaction, apply the code change and navigate to the state under test.
  4. Call screenshot-diff with the saved baselinePath, captureCurrent: true, udid, and outputDir.
  5. Inspect the summary and artifact paths, then combine the diff with normal visual inspection and any structural/runtime evidence needed for the assertion.
json
{  "baselinePath": "/tmp/baseline.png",  "captureCurrent": true,  "udid": "<UDID>",  "outputDir": "/tmp/argent-diff"}

If both images are already saved, use file paths for both sides:

json
{  "baselinePath": "/tmp/baseline.png",  "currentPath": "/tmp/current.png",  "udid": "<UDID>",  "outputDir": "/tmp/argent-diff"}

來源與署名

來源:software-mansion/argent位於packages/skills/skills/argent-screenshot-diff提交cb0f538

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架