How to Capture a Specific Element with Urlbox

To capture one element with Urlbox, pass its CSS selector in the render option named selector. For example, use "selector": "#element-to-screenshot". First find a stable selector in your browser’s developer tools, then send it with the page URL in your Urlbox request. If the element is inserted dynamically, wait for it with wait_for; if a missing element must not produce a misleading page screenshot, enable fail_if_selector_missing=true. Urlbox’s element screenshot guide documents the selector workflow.

1. Find the element’s CSS selector

Open the page in Chrome and right-click the element you want to capture, then choose Inspect.
In the Elements panel, right-click the highlighted node.
Choose Copy > Copy selector.
Check that the selector identifies the intended element, then use it as Urlbox’s selector option.

Copied selectors can be long or tied to the page’s current markup. Prefer a stable ID or class when available, and verify the target on the same URL and page state used for capture. The exact element guide demonstrates a synchronous API request with a selector option.

2. Capture the element through Urlbox

Include both the page URL and the CSS selector in the Urlbox render request. The exact authentication and endpoint format depend on your Urlbox account and integration; use the current Urlbox API instructions for those details. The key render option is selector.

{
  "url": "https://example.com",
  "selector": "#element-to-screenshot"
}

The Urlbox CLI also supports the selector option as -s or --selector. See the Urlbox CLI rendering documentation for command syntax.

3. Handle dynamic elements and missing selectors

A selector only works after the target exists in the rendered page. For content created by client-side JavaScript, use Urlbox’s wait_for option to wait for the selector, and set wait_timeout to the maximum time you are willing to wait. Choose values based on the target page; the documentation does not prescribe one delay for every site.

By default, Urlbox takes a normal viewport screenshot if the selector target is not found. This can look like a successful capture even though the intended element was absent. Set fail_if_selector_missing=true when the render should fail instead. This is useful in automated jobs where an unexpected fallback image could be stored or reported as a valid element screenshot. See the Urlbox render options reference.

4. Keep element capture separate from full-page capture

Use selector when the output should be a particular element. Use full_page when you need the entire scrollable document. Urlbox documents stitch as the default full-page mode and native as a faster alternative that may not work as well on every site. These are full-page options, not substitutes for selecting an element. More details are in the Urlbox screenshots documentation.

5. Troubleshoot common failures

Symptom	Likely cause	What to do
The output shows the viewport instead of the element	The selector did not match; Urlbox’s default missing-selector behavior is a normal viewport capture.	Check the selector against the rendered page. Set `fail_if_selector_missing=true` if a missing target should fail the render.
The selector works in DevTools but not in the capture	The live page may differ from the captured URL or state, or the element may not exist yet.	Confirm the exact URL and page state, then use `wait_for` and tune `wait_timeout` for the page.
The capture fails after enabling missing-selector failure	The target was not found before the configured wait expired.	Verify the selector and whether the page creates the element dynamically. Adjust the wait settings only as needed.
The captured page is clipped or includes more than the target	The request may be using a page capture goal or selector that does not identify the intended node.	Inspect the target again and pass its selector with `selector`. Use `full_page` only when the whole scrollable page is wanted.

6. Reliability, speed, and cost considerations

For repeatable element captures, use selectors that remain stable across page updates and enable failure on a missing selector when a viewport fallback would corrupt downstream results. Dynamic pages need enough wait time for the target to appear; longer waits can increase completion time. Full-page capture settings address a different task and may have different speed and compatibility tradeoffs. The reviewed Urlbox documentation establishes these behaviors but does not provide a universal performance figure or cost estimate, so check your account’s current pricing and measure the pages in your own workload.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It can capture one element with a CSS selector, along with full-page captures and other render options. Its request accepts parameter names used by other screenshot APIs, which can make switching easier. See the ScreenshotNeo documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com --data-urlencode selector="#element-to-screenshot" -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "selector": "#element-to-screenshot",
    },
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  selector: '#element-to-screenshot',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

With ScreenshotNeo, cookie banners, newsletter popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Create a free ScreenshotNeo account and get 1,000 screenshots a month with no card.

FAQ

Can I capture an element by its CSS class?

Yes. Pass a CSS selector that matches the target in the selector option. An ID, class, or other valid CSS selector can identify the element.

What happens if Urlbox cannot find the element?

By default, it returns a normal viewport screenshot. Set fail_if_selector_missing=true to make a missing target fail instead.

Does `full_page` capture just the selected element?

No. full_page is for the whole scrollable page. Use selector for a specific element.

How long should I wait for a dynamic element?

There is no universal duration. Use wait_for and wait_timeout, then tune the timeout for the page and how it loads.