> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel-labs/agent-browser/llms.txt
> Use this file to discover all available pages before exploring further.

# Screenshot Commands

> Capture screenshots and generate PDFs

## Overview

Screenshot commands allow you to capture visual snapshots of pages and elements.

## screenshot

Capture a screenshot of the page or a specific element.

<table>
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>selector</code></td>
      <td>Optional: Element selector to screenshot. If omitted, captures viewport.</td>
    </tr>

    <tr>
      <td><code>path</code></td>
      <td>Optional: File path to save screenshot. If omitted, saves to temp directory.</td>
    </tr>
  </tbody>
</table>

**Options:**

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>--full, -f</code></td>
      <td>Capture full page (scrolls to capture entire page)</td>
    </tr>

    <tr>
      <td><code>--annotate</code></td>
      <td>Overlay numbered labels on interactive elements</td>
    </tr>
  </tbody>
</table>

### Basic Screenshots

**Examples:**

```bash theme={null}
# Screenshot viewport (saves to temp directory)
agent-browser screenshot

# Screenshot to specific path
agent-browser screenshot page.png

# Full page screenshot
agent-browser screenshot --full fullpage.png

# Screenshot specific element
agent-browser screenshot @e1 element.png

# Screenshot by selector
agent-browser screenshot "#content" content.png
```

**Output:**

```
Screenshot saved to /tmp/screenshot-2026-03-02T12-00-00-abc123.png
```

### Annotated Screenshots

Annotated screenshots overlay numbered labels `[1]`, `[2]`, etc. on interactive elements. Each label corresponds to a ref (`@e1`, `@e2`) that you can use for interactions.

**Examples:**

```bash theme={null}
# Annotated screenshot
agent-browser screenshot --annotate

# Save to specific path
agent-browser screenshot --annotate page.png

# Full page annotated
agent-browser screenshot --full --annotate fullpage.png
```

**Output:**

```
Screenshot saved to /tmp/screenshot-2026-03-02T12-00-00-abc123.png
[1] @e1 button "Submit"
[2] @e2 link "Home"
[3] @e3 textbox "Email"
[4] @e4 button "Sign In"
```

**Using Refs from Annotated Screenshots:**

```bash theme={null}
# Take annotated screenshot
agent-browser screenshot --annotate screenshot.png

# Click element labeled [2]
agent-browser click @e2

# Fill element labeled [3]
agent-browser fill @e3 "user@example.com"
```

### Full Page Screenshots

Capture the entire page by scrolling and stitching screenshots together.

**Examples:**

```bash theme={null}
# Full page screenshot
agent-browser screenshot --full page.png

# Short flag
agent-browser screenshot -f fullpage.png

# Full page with annotations
agent-browser screenshot --full --annotate annotated.png
```

## pdf

Generate a PDF of the current page.

<table>
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>path</code></td>
      <td>File path to save PDF</td>
    </tr>
  </tbody>
</table>

**Examples:**

```bash theme={null}
# Generate PDF
agent-browser pdf page.pdf

# Generate PDF of documentation
agent-browser open example.com/docs
agent-browser pdf documentation.pdf
```

**Output:**

```
PDF saved to page.pdf
```

## Workflow Examples

### Visual Testing

```bash theme={null}
# Navigate to page
agent-browser open example.com

# Wait for page to load
agent-browser wait --load networkidle

# Take baseline screenshot
agent-browser screenshot --full baseline.png

# Make changes...

# Take comparison screenshot
agent-browser screenshot --full comparison.png
```

### Documentation Generation

```bash theme={null}
# Open documentation pages
agent-browser open example.com/docs/intro
agent-browser screenshot --full intro.png

agent-browser open example.com/docs/api
agent-browser screenshot --full api.png

agent-browser open example.com/docs/guide
agent-browser pdf guide.pdf
```

### Multimodal AI Workflow

```bash theme={null}
# Take annotated screenshot for vision model
agent-browser screenshot --annotate page.png

# Vision model analyzes screenshot and identifies elements
# Returns: "Click the blue button labeled [3]"

# Use the ref to interact
agent-browser click @e3
```

### Error Reporting

```bash theme={null}
# Test fails, capture screenshot for debugging
agent-browser screenshot error-state.png

# Also capture full page for context
agent-browser screenshot --full error-full.png

# Generate PDF report
agent-browser pdf error-report.pdf
```

### Element Screenshots

```bash theme={null}
# Screenshot specific element
agent-browser screenshot @e1 button.png

# Screenshot modal dialog
agent-browser screenshot ".modal" dialog.png

# Screenshot table
agent-browser screenshot "#data-table" table.png
```

### Responsive Testing

```bash theme={null}
# Desktop
agent-browser set viewport 1920 1080
agent-browser screenshot desktop.png

# Tablet
agent-browser set viewport 768 1024
agent-browser screenshot tablet.png

# Mobile
agent-browser set viewport 375 667
agent-browser screenshot mobile.png
```

## Image Formats

Screenshots are automatically saved in the format based on file extension:

<table>
  <thead>
    <tr>
      <th>Extension</th>
      <th>Format</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>.png</code></td>
      <td>PNG (default, lossless)</td>
    </tr>

    <tr>
      <td><code>.jpg</code>, <code>.jpeg</code></td>
      <td>JPEG (lossy, smaller file size)</td>
    </tr>

    <tr>
      <td><code>.webp</code></td>
      <td>WebP (modern, efficient)</td>
    </tr>
  </tbody>
</table>

**Examples:**

```bash theme={null}
agent-browser screenshot page.png   # PNG
agent-browser screenshot page.jpg   # JPEG
agent-browser screenshot page.webp  # WebP
```

## Environment Variables

Control screenshot behavior with environment variables:

<table>
  <thead>
    <tr>
      <th>Variable</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>AGENT\_BROWSER\_ANNOTATE</code></td>
      <td>Enable annotated screenshots by default</td>
    </tr>
  </tbody>
</table>

```bash theme={null}
# Enable annotations by default
export AGENT_BROWSER_ANNOTATE=1
agent-browser screenshot page.png
```

## Best Practices

### Wait Before Screenshot

Always wait for page to load before taking screenshots:

```bash theme={null}
agent-browser open example.com
agent-browser wait --load networkidle
agent-browser screenshot page.png
```

### Use Full Page for Documentation

```bash theme={null}
# Capture entire page for documentation
agent-browser screenshot --full docs.png
```

### Use Annotated for AI Agents

```bash theme={null}
# Let AI agents see labeled elements
agent-browser screenshot --annotate
```

### Specify Paths for Organization

```bash theme={null}
# Organize screenshots in directories
agent-browser screenshot ./screenshots/homepage.png
agent-browser screenshot ./screenshots/dashboard.png
```