Cropping

Cropping allows you to define precise regions for your screenshots, ensuring consistent dimensions across versions.

Interactive Cropping

When capturing a screenshot during recording, you can define a crop region:

1. Press C to open capture menu
2. Select screenshot type
3. A cropping UI appears in the browser
4. Drag to define your region
5. Confirm to save

Persisting Crop Regions

You can choose to apply a crop to all future runs of a scenario:

{
  "action": "capture",
  "key": "dashboard-widget",
  "crop": {
    "x": 50,
    "y": 100,
    "width": 400,
    "height": 300
  }
}

This ensures:

• Consistent image dimensions across versions
• Focused screenshots without distracting UI elements
• Smaller file sizes

Use Cases

Capturing a Specific Widget

{
  "action": "capture",
  "key": "analytics-chart",
  "selector": "[data-testid='chart-container']",
  "crop": {
    "x": 0,
    "y": 0,
    "width": 600,
    "height": 400
  }
}

Hiding Sensitive Information

Crop out areas that contain:

• User-specific data
• Timestamps that change
• Advertisement banners

Consistent Thumbnail Sizes

For documentation galleries, define standard dimensions:

{
  "crop": {
    "width": 800,
    "height": 450
  }
}

Tips