Skip to main content

Overview

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

screenshot

Capture a screenshot of the page or a specific element.
ParameterDescription
selectorOptional: Element selector to screenshot. If omitted, captures viewport.
pathOptional: File path to save screenshot. If omitted, saves to temp directory.
Options:
OptionDescription
—full, -fCapture full page (scrolls to capture entire page)
—annotateOverlay numbered labels on interactive elements

Basic Screenshots

Examples:
# 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:
# 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:
# 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:
# 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.
ParameterDescription
pathFile path to save PDF
Examples:
# 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

# 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

# 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

# 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

# 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

# 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

# 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:
ExtensionFormat
.pngPNG (default, lossless)
.jpg, .jpegJPEG (lossy, smaller file size)
.webpWebP (modern, efficient)
Examples:
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:
VariableDescription
AGENT_BROWSER_ANNOTATEEnable annotated screenshots by default
# 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:
agent-browser open example.com
agent-browser wait --load networkidle
agent-browser screenshot page.png

Use Full Page for Documentation

# Capture entire page for documentation
agent-browser screenshot --full docs.png

Use Annotated for AI Agents

# Let AI agents see labeled elements
agent-browser screenshot --annotate

Specify Paths for Organization

# Organize screenshots in directories
agent-browser screenshot ./screenshots/homepage.png
agent-browser screenshot ./screenshots/dashboard.png

Build docs developers (and LLMs) love