#Screen Capture

Tools for capturing screenshots, component tree snapshots, querying native UI trees, and performing visual regression testing.

#take_screenshot

Capture the device/simulator screen as a JPEG image (720p).

#Parameters

#Example

// Request
{ "tool": "take_screenshot", "arguments": { "platform": "ios" } }

#Tips

• Returns base64 JPEG and point size metadata for coordinate conversion.
• Prefer assert_text or assert_visible over screenshots when possible — screenshots consume vision tokens.
• iOS only supports simulators, not physical devices.

#take_snapshot

Capture the React Native component tree. Returns UIDs, types, testIDs, and text content.

#Parameters

#Example

// Request
{ "tool": "take_snapshot", "arguments": { "maxDepth": 10 } }

// Response (abbreviated)
{
  "tree": {
    "uid": "RCTView:0",
    "type": "View",
    "children": [
      {
        "uid": "header",
        "type": "View",
        "testID": "header",
        "children": [
          { "uid": "header>Text:0", "type": "Text", "text": "Home" }
        ]
      }
    ]
  }
}

#Tips

• Use uid values with measureView(uid) via evaluate_script to get exact coordinates.
• Reduce maxDepth for large component trees to limit output size.
• The snapshot traverses the React Fiber tree, not the native view hierarchy.

#describe_ui

Query the native UI/accessibility tree. Returns the full native hierarchy.

#Parameters

#Example

// Request — iOS point query
{
  "tool": "describe_ui",
  "arguments": { "platform": "ios", "mode": "point", "x": 200, "y": 400 }
}

#Tips

• Produces a large payload. Prefer query_selector for querying React Native elements.
• iOS uses idb ui describe-all/describe-point. Android uses uiautomator dump.
• Useful for inspecting native components that aren't part of the React tree (e.g., native alerts, system UI).

#visual_compare

Compare the current screen against a baseline PNG for visual regression testing.

#Parameters

#Example

// Create baseline
{
  "tool": "visual_compare",
  "arguments": {
    "platform": "ios",
    "baseline": "/tmp/baselines/home.png",
    "updateBaseline": true
  }
}

// Compare against baseline
{
  "tool": "visual_compare",
  "arguments": {
    "platform": "ios",
    "baseline": "/tmp/baselines/home.png",
    "saveDiff": "/tmp/diffs/home-diff.png",
    "threshold": 0.05
  }
}

// Response
{
  "pass": false,
  "diffRatio": 0.023,
  "diffPixels": 4821,
  "totalPixels": 209664,
  "threshold": 0.05,
  "message": "Visual difference detected: 2.3% of pixels differ"
}

#Tips

• Use updateBaseline: true to create initial baselines.
• Use selector to compare only a specific component (e.g., #header) instead of the full screen.
• Lower threshold values are stricter (0 = pixel-perfect, 1 = any difference passes).
• Uses sharp + pixelmatch internally.