Complete Screenshot Examples: Every Feature Explored

This guide showcases every screenshot feature with working code examples. From basic captures to advanced content blocking, accessibility testing, and mobile optimization - see how to use each capability effectively.

Note: Install the SDKs if you haven't already: Install the SDKs

Basic Desktop Screenshot

Start with the fundamentals - a clean desktop screenshot capturing above-the-fold content.

from supacrawler import SupacrawlerClient
from supacrawler.scraper_client.models import (
    ScreenshotCreateRequest, 
    ScreenshotCreateRequestFormat,
    ScreenshotCreateRequestDevice
)

client = SupacrawlerClient(api_key='YOUR_API_KEY')

job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://antoineross.com",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    format_=ScreenshotCreateRequestFormat.PNG,
    full_page=False
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=30)
print(f"Screenshot URL: {result.screenshot_url}")
print(f"Size: {result.metadata.get('width')}x{result.metadata.get('height')}")

Result: Clean 1920x1080 PNG perfect for hero sections and navigation testing.

Mobile Screenshots with JPEG Optimization

Mobile screenshots with format optimization for faster loading and smaller file sizes.

# Mobile portrait with JPEG compression
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://antoineross.com",
    device=ScreenshotCreateRequestDevice.MOBILE,
    format_=ScreenshotCreateRequestFormat.JPEG,
    quality=90,  # Balance between quality and file size
    full_page=True  # Capture entire mobile layout
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=30)
print(f"Mobile screenshot: {result.screenshot_url}")
print(f"Format: {result.metadata.get('format')}")
print(f"File size: {result.metadata.get('file_size')} bytes")

Mobile Benefits:

375x812 portrait resolution (iPhone-like)
JPEG compression reduces file size by ~40%
Full page captures complete mobile experience

Custom Dimensions with Dark Mode

Test specific breakpoints and accessibility features like dark mode rendering.

# Custom dimensions with dark mode
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://hikari.antoineross.com",
    device=ScreenshotCreateRequestDevice.CUSTOM,
    width=1200,  # Custom breakpoint
    height=800,
    dark_mode=True,  # System dark mode
    format_=ScreenshotCreateRequestFormat.PNG
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=30)
print(f"Dark mode screenshot: {result.screenshot_url}")
print(f"Custom size: {result.metadata.get('width')}x{result.metadata.get('height')}")

Use Cases:

Testing specific breakpoints (1200x800)
Dark mode accessibility testing
Social media image generation
Thumbnail creation

Advanced Content Blocking

Dramatically improve loading speed and focus on essential content by blocking ads, trackers, and unnecessary resources.

from supacrawler.scraper_client.models import (
    ScreenshotCreateRequestWaitUntil,
    ScreenshotCreateRequestBlockResourcesItem
)

# Advanced content blocking for clean captures
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://www.quora.com/Which-website-has-the-most-ads",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    format_=ScreenshotCreateRequestFormat.PNG,
    
    # Block unwanted content
    block_ads=True,      # Remove advertising
    block_cookies=True,  # Hide cookie banners
    block_trackers=True, # Block analytics
    block_resources=[    # Block resource types
        ScreenshotCreateRequestBlockResourcesItem.IMAGE,
    ],
    
    # Hide specific elements
    hide_selectors=["footer", ".social-links"],
    
    # Fast loading strategy
    wait_until=ScreenshotCreateRequestWaitUntil.DOMCONTENTLOADED,
    delay=2  # Wait 2 seconds after load
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=45)
print(f"Clean screenshot: {result.screenshot_url}")
print(f"Load time: {result.metadata.get('load_time')}ms")

Network Idle for Complete Loading

Compare DOM loaded vs waiting for all network activity to complete:

# Wait for all network activity to complete
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://www.quora.com/Which-website-has-the-most-ads",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    format_=ScreenshotCreateRequestFormat.PNG,
    
    block_ads=True,
    block_cookies=True,
    block_trackers=True,
    
    # Wait for network idle - captures all loaded content
    wait_until=ScreenshotCreateRequestWaitUntil.NETWORKIDLE,
    delay=2
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=45)
print(f"Complete loading: {result.screenshot_url}")

Wait Strategy Comparison:

DOMCONTENTLOADED: Fast, initial render
NETWORKIDLE: Complete, all resources loaded
Custom delay: Additional wait for dynamic content

Accessibility Features Testing

Test how sites render for users with different accessibility needs and preferences.

# Comprehensive accessibility testing
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://developer.mozilla.org/en-US/",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    format_=ScreenshotCreateRequestFormat.PNG,
    
    # Accessibility settings
    dark_mode=True,         # System dark theme
    reduced_motion=True,    # Disable animations
    high_contrast=True,     # Enhanced contrast
    
    # Custom user agent for browser testing
    user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=30)
print(f"Accessibility test: {result.screenshot_url}")
print("Features: Dark mode, Reduced motion, High contrast")

Custom Headers and Authentication

Handle authenticated content, localization, and session-based screenshots.

from supacrawler.scraper_client.models import (
    ScreenshotCreateRequestHeaders,
    ScreenshotCreateRequestCookiesItem
)

# Custom headers for localization and authentication
headers = ScreenshotCreateRequestHeaders.from_dict({
    "Accept-Language": "en-US,en;q=0.9",
    "Authorization": "Bearer session-token",
    "X-Custom-Header": "screenshot-api"
})

# Session cookies for personalized content
cookies = [
    ScreenshotCreateRequestCookiesItem.from_dict({
        "name": "theme",
        "value": "dark",
        "domain": "antoineross.com"
    }),
    ScreenshotCreateRequestCookiesItem.from_dict({
        "name": "session_id", 
        "value": "abc123",
        "domain": "antoineross.com"
    })
]

# Tablet landscape with custom settings
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://antoineross.com",
    device=ScreenshotCreateRequestDevice.TABLET,
    format_=ScreenshotCreateRequestFormat.JPEG,
    quality=95,
    headers=headers,
    cookies=cookies,
    is_landscape=True  # Tablet in landscape mode
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=30)
print(f"Authenticated screenshot: {result.screenshot_url}")

Authentication Use Cases:

Session tokens: Authenticated dashboard screenshots
Localization: Multi-language testing
A/B testing: Feature flag variations
Personalization: User-specific content

Interactive Screenshots

Capture content that appears after user interaction like clicks and form fills.

# Interactive screenshot with click and wait
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://example.com/interactive-demo",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    format_=ScreenshotCreateRequestFormat.PNG,
    
    # Click element to reveal content
    click_selector="button[data-tab='advanced']",
    
    # Wait for the clicked content to appear
    wait_for_selector=".advanced-options",
    
    # Additional wait after interaction
    delay=2,
    
    # Maximum wait time
    timeout=30
))

result = client.wait_for_screenshot(job.job_id, timeout_seconds=45)
print(f"Interactive screenshot: {result.screenshot_url}")

Interactive Capabilities:

click_selector: Click buttons, tabs, dropdowns
wait_for_selector: Wait for dynamic content
Form interactions: Submit forms, fill fields
Modal captures: Screenshot after opening modals

Format and Quality Optimization

Choose the optimal format and quality settings for your specific use case.

# PNG for UI screenshots (lossless, crisp text)
ui_job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://docs.example.com",
    format_=ScreenshotCreateRequestFormat.PNG,
    device=ScreenshotCreateRequestDevice.DESKTOP
))

# JPEG for photo-heavy content (smaller files)
photo_job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://gallery.example.com",
    format_=ScreenshotCreateRequestFormat.JPEG,
    quality=85,  # Good balance of quality/size
    device=ScreenshotCreateRequestDevice.DESKTOP
))

# WebP for modern browsers (best compression)
modern_job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://modern-app.example.com",
    format_=ScreenshotCreateRequestFormat.WEBP,
    quality=80,  # Excellent compression
    device=ScreenshotCreateRequestDevice.DESKTOP
))

Format Selection Guide:

Format	Best For	File Size	Quality
PNG	UI, text, documentation	Largest	Lossless
JPEG	Photos, gradients	Medium	Quality 60-95
WebP	Modern apps, best compression	Smallest	Configurable

Device Matrix Testing

Comprehensive device testing across all major screen sizes and orientations.

# Test across all device presets
devices = [
    (ScreenshotCreateRequestDevice.DESKTOP, "Desktop - 1920x1080"),
    (ScreenshotCreateRequestDevice.MOBILE, "Mobile - 375x812"),
    (ScreenshotCreateRequestDevice.TABLET, "Tablet - 1024x768")
]

for device, description in devices:
    # Portrait
    portrait_job = client.create_screenshot_job(ScreenshotCreateRequest(
        url="https://responsive-site.com",
        device=device,
        format_=ScreenshotCreateRequestFormat.PNG,
        is_landscape=False
    ))
    
    # Landscape (for mobile/tablet)
    if device != ScreenshotCreateRequestDevice.DESKTOP:
        landscape_job = client.create_screenshot_job(ScreenshotCreateRequest(
            url="https://responsive-site.com",
            device=device,
            format_=ScreenshotCreateRequestFormat.PNG,
            is_landscape=True
        ))
    
    print(f"Testing {description} in both orientations")

# Custom breakpoint testing
custom_job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://responsive-site.com",
    device=ScreenshotCreateRequestDevice.CUSTOM,
    width=1440,  # MacBook Pro 14"
    height=900,
    format_=ScreenshotCreateRequestFormat.PNG
))

Device Testing Matrix:

Desktop: 1920x1080 (standard desktop)
Mobile: 375x812 (iPhone 13-like)
Tablet: 1024x768 (iPad-like)
Custom: Any dimensions (MacBook, ultrawide, etc.)
Orientations: Portrait and landscape for mobile/tablet

URL Management and Storage

Screenshot URLs are signed and expire for security. Here's how to handle them properly:

# Create screenshot
job = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://example.com",
    device=ScreenshotCreateRequestDevice.DESKTOP
))

# Get initial result
result = client.wait_for_screenshot(job.job_id, timeout_seconds=30)
print(f"Initial URL: {result.screenshot_url}")

# URLs expire in 15 minutes - get fresh signed URL
renewed = client.get_screenshot(job.job_id)
print(f"Renewed URL: {renewed.screenshot}")

# For permanent storage, download the image
import requests
import os

response = requests.get(result.screenshot_url)
if response.status_code == 200:
    filename = f"screenshot_{job.job_id}.png"
    with open(filename, 'wb') as f:
        f.write(response.content)
    print(f"Saved to {filename}")

Storage Best Practices:

URLs expire in 15 minutes for security
Use get_screenshot() to renew signed URLs
Download images for long-term storage
Store job IDs for re-access capabilities

Real-World Implementation Examples

Visual Regression Testing

# Capture baseline and compare
baseline = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://staging.myapp.com/dashboard",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    wait_until=ScreenshotCreateRequestWaitUntil.NETWORKIDLE,
    block_ads=True  # Consistent results
))

Social Media Preview Generation

# Perfect Open Graph dimensions
social_preview = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://blog.mysite.com/post/new-feature",
    device=ScreenshotCreateRequestDevice.CUSTOM,
    width=1200,
    height=630,  # Facebook/Twitter optimal
    format_=ScreenshotCreateRequestFormat.JPEG,
    quality=85
))

Documentation Screenshots

# Clean documentation captures
docs_screenshot = client.create_screenshot_job(ScreenshotCreateRequest(
    url="https://docs.myapp.com/api-reference",
    device=ScreenshotCreateRequestDevice.DESKTOP,
    format_=ScreenshotCreateRequestFormat.PNG,
    block_ads=True,
    block_cookies=True,
    hide_selectors=[".sidebar-ads", "footer", ".newsletter-signup"]
))

Performance Optimization Tips

Format Selection: PNG for UI, JPEG for photos, WebP for modern apps
Quality Balance: 80-85% usually optimal for JPEG/WebP
Content Blocking: Block ads/trackers for 3x faster loading
Wait Strategy: DOMCONTENTLOADED for speed, NETWORKIDLE for completeness
Dimensions: Smaller screenshots = faster processing + smaller files
Timeouts: Set appropriate timeout values based on site complexity

Next Steps

Try it live: Screenshot API Reference
Advanced features: Complete Screenshot Guide Blog
SDKs: Install Python or JavaScript SDK

Ready to capture your first screenshot? Get your API key and start taking pixel-perfect screenshots in under 30 seconds.