---
id: gh-argent-screenshot-diff
name: "argent-screenshot-diff"
url: https://skills.yangsir.net/skill/gh-argent-screenshot-diff
author: software-mansion
domain: testing
tags: ["screenshot-diff", "visual-regression", "ui-testing", "pixel-comparison"]
install_count: 24300
rating: 4.60 (120 reviews)
github: https://github.com/software-mansion/argent/tree/main/packages/skills/skills/argent-screenshot-diff
---

# argent-screenshot-diff

> 此技能用于UI视觉回归测试，自动对比截图差异，帮助开发者快速发现布局、颜色、字体等像素级变化，适用于前端UI变更后的稳定性验证。

**Stats**: 24,300 installs · 4.6/5 (120 reviews)

## Before / After 对比

### UI视觉回归检查效率

**Before**:

在没有此技能之前，开发者需手动逐屏截图并用肉眼对比，过程耗时且容易遗漏细微差异，尤其在大量页面变更时效率极低。

**After**:

此技能自动进行像素级比对，并高亮差异区域，将检查耗时从小时级降至分钟级，同时避免人为疏漏，大幅提升准确率。

| Metric | Before | After | Change |
|---|---|---|---|
| 检查耗时 | 60分钟 | 10分钟 | -83% |

## Readme

## 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.

## 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"
}
```


---
*Source: https://skills.yangsir.net/skill/gh-argent-screenshot-diff*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-argent-screenshot-diff/markdown*