co browser

Quick browser screenshots and automation with one command. Perfect for debugging, testing, and visual proof.

Quick Start: co browser "screenshot localhost:3000" - instant screenshot, no code required.

Basic Usage

code

bash

co browser "screenshot localhost:3000"

output

[browser] Taking screenshot of http://localhost:3000

[browser] Saved to .tmp/screenshot_20260310_143022.png

✓ Screenshot saved successfully

Saves to .tmp/screenshot_YYYYMMDD_HHMMSS.png by default.

Command Format

co browser "screenshot [URL] [save to PATH] [size SIZE]"

All parts except URL are optional.

Basic Screenshots

code
bash
# Local development
co browser "screenshot localhost:3000"

# Specific port
co browser "screenshot localhost:8080"

# External site
co browser "screenshot example.com"

# Full URL
co browser "screenshot https://docs.connectonion.com"

Save to Specific Path

code
bash
# Save to temp directory
co browser "screenshot localhost:3000 save to /tmp/debug.png"

# Save to current directory
co browser "screenshot localhost:3000 save to homepage.png"

# Save to subdirectory
co browser "screenshot localhost:3000 save to screenshots/test.png"

Device Sizes

code
bash
# iPhone viewport
co browser "screenshot localhost:3000 size iphone"

# Custom dimensions
co browser "screenshot localhost:3000 size 390x844"

# Common presets
co browser "screenshot localhost:3000 size ipad"
co browser "screenshot localhost:3000 size desktop"

Device Presets

Preset	Dimensions	Device
iphone	390x844	iPhone 14/15
android	360x800	Common Android
ipad	768x1024	iPad
desktop	1920x1080	Full HD Desktop

Complete Examples

Debug Mobile Checkout

code

bash

co browser "screenshot localhost:3000/checkout save to /tmp/checkout-mobile.png size iphone"

Document Bug

code

bash

co browser "screenshot localhost:3000/xray save to bug-report.png size 1920x1080"

Test Responsive Design

code
bash
# Test multiple viewports
co browser "screenshot localhost:3000 save to mobile.png size 390x844"
co browser "screenshot localhost:3000 save to tablet.png size 768x1024"
co browser "screenshot localhost:3000 save to desktop.png size 1920x1080"

URL Handling

The command intelligently handles URLs:

localhost→http://localhost

localhost:3000→http://localhost:3000

example.com→https://example.com

http://example.com→http://example.com(unchanged)

Use Cases

1. Debug Local Development

code
bash
# Quick check of homepage
co browser "screenshot localhost:3000"

# Debug specific route
co browser "screenshot localhost:3000/api/status"

2. Document Bugs

code
bash
# Capture error state
co browser "screenshot localhost:3000/error save to bug.png"

# Mobile-specific issue
co browser "screenshot localhost:3000/mobile-bug save to mobile-issue.png size iphone"

3. Test Responsive Design

code
bash
# Test different viewports
for size in iphone android ipad desktop; do
  co browser "screenshot localhost:3000 save to view-$size.png size $size"
done

4. CI/CD Integration

code
bash
# In GitHub Actions or similar
co browser "screenshot $DEPLOY_URL save to artifacts/deployed.png"

Framework Examples

Next.js

code

bash

co browser "screenshot localhost:3000"
co browser "screenshot localhost:3000/_error save to error.png"

FastAPI

code

bash

co browser "screenshot localhost:8000"
co browser "screenshot localhost:8000/docs save to api-docs.png"

Django

code

bash

co browser "screenshot localhost:8000"
co browser "screenshot localhost:8000/admin save to admin.png"

React Dev Server

code

bash

co browser "screenshot localhost:3000"
co browser "screenshot localhost:3000 size iphone"

Installation

Browser features require Playwright:

code
bash
# Install Playwright
pip install playwright
playwright install chromium

# Or install ConnectOnion with browser support
pip install connectonion[browser]

Common Errors

❌ Browser tools not installed

Run: pip install playwright && playwright install chromium

❌ Cannot reach http://localhost:3000

Is your server running? Start it first.

❌ Natural language browser agent unavailable. Set OPENAI_API_KEY

Set your OpenAI API key for natural language commands

Tips & Best Practices

Quick Debug: Just co browser "screenshot localhost:3000" for instant feedback

Organize Screenshots: Use descriptive paths like save to bugs/issue-123.png

Test Viewports: Use device names (iphone, ipad) for common sizes

Timestamps: Default filenames include timestamp for versioning

Limitations

• Screenshots only (no interaction, clicking, forms)
• Single page at a time
• Headless browser only
• PNG format only

For complex browser automation, use the full ConnectOnion browser agent or Playwright directly.

co browser

Basic Usage

Command Format

Basic Screenshots

Save to Specific Path

Device Sizes

Device Presets

Complete Examples

Debug Mobile Checkout

Document Bug

Test Responsive Design

URL Handling

Use Cases

1. Debug Local Development

2. Document Bugs

3. Test Responsive Design

4. CI/CD Integration

Framework Examples

Next.js

FastAPI

Django

React Dev Server

Installation

Common Errors

Tips & Best Practices

Limitations

Star us on GitHub