Selector Parameter

The selector parameter allows you to capture a specific element on the page instead of the entire viewport.

Specifications

Property	Value
Type	string
Required	No
Default	null
API	Screenshot API only

Description

The selector parameter:

• Uses CSS selectors to target specific elements
• Captures only the selected element and its children
• Preserves the element’s styles and layout
• Useful for capturing specific components or sections

Examples

Basic Element Selection

{
    "url": "https://example.com",
    "selector": "#main-content"
}

Complex Selector

{
    "url": "https://example.com",
    "selector": ".article-container .content:first-child",
    "dpi": 2
}

Combining with Other Parameters

{
    "url": "https://example.com",
    "selector": ".product-card",
    "css": ".product-card { border: 2px solid blue; }",
    "webhook_url": "https://your-domain.com/webhook"
}

Common Selectors

Here are some commonly used selector patterns:

Selector	Description	Example
#id	Select by ID	”#header”
.class	Select by class	”.content”
tag	Select by tag name	”main”
[attr]	Select by attribute	”[data-section=‘hero’]“
Combined	Multiple selectors	”.container .card:first-child”

Best Practices

1. Use Specific Selectors

   • Prefer IDs when possible
   • Use unique class combinations
   • Avoid overly complex selectors

2. Verify Element Existence

   • Ensure the selector matches exactly one element
   • Test with different page states
   • Handle dynamic content appropriately

3. Consider Layout

   • Check element positioning
   • Account for responsive designs
   • Test different viewport sizes