argent-screenshot-diff
software-mansion/argent
Compare app screenshots to detect visual regressions and UI changes pixel-by-pixel.
What is argent-screenshot-diff?
The argent screenshot-diff tool compares saved or live app screenshots to identify visual changes in layout, spacing, color, typography, and rendering. Use it for visual regression testing and before/after UI comparisons when pixel-level differences can verify the expected result.
- Compare baseline and current screenshots to highlight pixel-visible changes
- Support both saved PNG files and live device captures for flexible testing workflows
- Work with physical iPhones at full resolution for accurate visual regression detection
- Suppress image context to keep full-resolution PNGs out of token budget
- Generate diff artifacts showing layout, spacing, color, typography, clipping, and overflow changes
How to install argent-screenshot-diff
npx skills add https://github.com/software-mansion/argent --skill argent-screenshot-diff- Physical iPhone or simulator with the app installed and accessible
- Baseline PNG screenshot saved at a known file path or ability to capture one
- Stable app state before and after the change being tested
How to use argent-screenshot-diff
- 1.Navigate the app to a known-good state and capture a baseline screenshot using `screenshot` with `scale: 1.0` and `includeImageInContext: false`
- 2.Save the returned baseline image path for later reference
- 3.Perform the interaction or code change and navigate to the state under test
- 4.Call `screenshot-diff` with `baselinePath`, `captureCurrent: true`, `udid`, and `outputDir` to compare baseline against a live capture
- 5.Review the diff summary and artifact paths, then combine visual inspection with structural or runtime evidence for your assertion
Use cases
- Verify UI layout and spacing remain unchanged after code refactoring
- Compare before/after screenshots when updating component styling or colors
- Detect unintended visual regressions in typography or text rendering across app updates
- Validate image and icon rendering consistency across device models and resolutions
- Check for clipping or overflow issues after responsive design changes
- QA engineers performing visual regression testing
- Mobile app developers validating UI changes before merging
- Design-focused teams comparing design-to-implementation fidelity
- Teams maintaining screenshot baselines across device models
argent-screenshot-diff FAQ
No. Use `describe`, `debugger-component-tree`, or `native-describe-screen` to locate targets first. Screenshot-diff is for pixel comparison, not coordinate discovery.
Yes. Provide `baselinePath` and `currentPath` (both file paths) along with `udid` and `outputDir` to compare saved screenshots directly.
Screenshot-diff is a poor fit for dynamic or unpausable content. Use structural verification (state checks, accessibility tree, logs) instead, or crop/mask dynamic regions if possible.
No. On hardware devices, the capture follows the device's real physical orientation; the `rotation` parameter is ignored.
Use normal downscaled `screenshot` calls for context and state checks. Use full-resolution (`scale: 1.0`) only when saving baseline/current PNG files for visual regression comparison.
Full instructions (SKILL.md)
Source of truth, from software-mansion/argent.
name: argent-screenshot-diff description: 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.
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:
{ "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: truewithcaptureCurrent: true, or provide both a path and live capture flag for the same side.
5. Deterministic Flow
- Navigate to the known-good state.
- Capture a baseline PNG with
screenshotusingscale: 1.0andincludeImageInContext: false; keep the returnedpath. - Perform the interaction, apply the code change and navigate to the state under test.
- Call
screenshot-diffwith the savedbaselinePath,captureCurrent: true,udid, andoutputDir. - Inspect the summary and artifact paths, then combine the diff with normal visual inspection and any structural/runtime evidence needed for the assertion.
{
"baselinePath": "/tmp/baseline.png",
"captureCurrent": true,
"udid": "<UDID>",
"outputDir": "/tmp/argent-diff"
}
If both images are already saved, use file paths for both sides:
{
"baselinePath": "/tmp/baseline.png",
"currentPath": "/tmp/current.png",
"udid": "<UDID>",
"outputDir": "/tmp/argent-diff"
}
Related skills
More from software-mansion/argent and the wider catalog.

argent-settings-permissions
Control iOS and Android app permissions directly without navigating Settings—for test setup when the app can't change them itself.

argent-test-ui-flow
Autonomously test iOS/Android app UI flows with interact-screenshot-verify loops using argent MCP tools.

argent-tv-interact
Control Apple TV, Android TV, and Fire TV apps via focus-driven remote navigation and debugging.

argent-android-emulator-setup
Set up and connect to Android emulators for UI automation and testing.

solana-dev
Build, test, and deploy Solana dApps with Anchor programs, Kit clients, and transaction v1 support.

integration-privy
Add Privy authentication to Solana Expo Android apps with Sign-In-With-Solana and Mobile Wallet Adapter.