ScreenshotNeo

BlogHow-to

How to Capture a Specific Element Instead of a Full Page with Microlink

Use Microlink’s `element` option to screenshot one CSS-selected component. Learn how to choose a selector, handle dynamic content, and troubleshoot captures.

By the ScreenshotNeo team4 October 20265 min read

To capture one component with Microlink, pass a CSS selector in the screenshot option named element. For example, #section-hero selects the element with that ID. Microlink waits for the selected element to become visible and returns a screenshot cropped to it. Use fullPage when you want the whole scrollable page instead.

Choose a selector that matches the element on the page you are capturing. Microlink’s documented example uses a Netflix title page and #section-hero; treat that as an example, and replace both URL and selector with your own target.

import createClient from 'microlink.io'

const microlink = createClient()
const data = await microlink.screenshot('https://www.netflix.com/title/80057281', {
  element: '#section-hero'
})

console.log(data)

The JavaScript SDK call above is Microlink’s documented pattern. See the Microlink screenshot parameter documentation for the current parameter details. An element screenshot is an image result, not selector-based text or HTML extraction.

cURL

curl -G "https://api.microlink.io" \
  -d "url=https://www.netflix.com/title/80057281" \
  -d "screenshot=true" \
  --data-urlencode "element=#section-hero"

URL-encode selectors when they contain characters such as spaces, brackets, or commas. --data-urlencode handles that for the query parameter.

CLI

microlink 'https://www.netflix.com/title/80057281&screenshot&element=#section-hero'

Replace the example selector with the CSS selector for the component you want in the destination page’s DOM, such as a chart or pricing table.

2. Pick the right capture scope

Need Use What it captures
One chart, card, table, or section element The selected DOM element
What is currently visible in the browser viewport Default screenshot scope The viewport
The entire scrollable document fullPage: true The full page

Prefer element when the requested output is just one component. A full-page capture includes more content and can take longer; Microlink’s speed guidance recommends avoiding full-page capture when a viewport or element capture is enough.

const elementShot = await microlink.screenshot(pageUrl, {
  element: '.pricing-table'
})

const fullPageShot = await microlink.screenshot(pageUrl, {
  fullPage: true
})

Use one scope for the intended result. The selector belongs to the page being captured, not to your local application or the Microlink documentation.

3. Make dynamic elements ready before capture

Microlink waits for the selected element to be visible. That does not necessarily mean every chart, image, or value inside it has finished rendering. If the target appears only after a user action or scrolling, perform that action first; if other page content needs time to settle, use the documented readiness options.

  • Element visibility: use element to select the target; the screenshot workflow waits for it to be visible.
  • Separate readiness signal: use waitForSelector when a different selector indicates that page content is ready, particularly for viewport or full-page captures.
  • Page lifecycle: set waitUntil to the appropriate lifecycle readiness condition for the page.
  • Lazy-loaded target: scroll to the section to trigger loading, then wait for the content that signals it is ready.
  • Hidden tab or panel: use click to reveal it before capture.
  • Fixed-delay fallback: use waitForTimeout if there is no better readiness signal. A fixed delay can be either longer than needed or too short under load.

Illustrative SDK shape for a target that requires interaction and a readiness wait:

const data = await microlink.screenshot(pageUrl, {
  element: '.chart-panel',
  click: '.charts-tab',
  waitForSelector: '.chart-panel svg'
})

Check Microlink’s screenshot guide for the supported automation options and their current syntax. The exact selector and action depend on the page’s markup and state.

4. Troubleshoot missing or incorrect captures

Symptom Likely cause What to do
The result is the whole viewport or page The element option was omitted, misspelled, or not passed to the screenshot request. Pass the selector as element. Use fullPage: true only when the whole document is intended.
The selected component is absent The selector does not match the target page’s DOM, or the target is not visible yet. Inspect the destination page’s DOM, correct the CSS selector, and ensure the element becomes visible.
The panel or tab is missing The page only creates or displays it after interaction. Use the documented click automation to open the tab or panel before capture.
The element appears, but its content is blank or incomplete Visibility arrived before asynchronous content or lazy images finished loading. Scroll to trigger lazy loading and wait for a meaningful child selector or page readiness condition.
Results vary between requests The page’s dynamic state or load timing changes; a fixed wait may not match every run. Prefer a selector or lifecycle signal over a guessed delay, and make the page state consistent before capture.
You receive extracted text or HTML rather than an image You used Microlink’s extraction workflow instead of its screenshot workflow. Use screenshot with the element option for an image capture.

Selector support does not guarantee that every website, selector, or dynamic page state will behave identically. Validate the selector and readiness condition on the target page.

5. Performance, reliability, and cost considerations

  • Capture only what you need: element capture avoids requesting the entire scrollable page when one component is sufficient.
  • Wait on a condition: a meaningful selector or lifecycle signal is generally more predictable than an arbitrary fixed delay.
  • Account for page state: interactions, lazy loading, and client-side rendering affect whether the desired content exists at capture time.
  • Validate the output: test that the chosen selector identifies the intended component on the actual page and that the captured content is ready.
  • Plan cost from your Microlink account and current plan: the cited documentation does not establish a price or billing rule for this request, so check Microlink’s current service information before estimating usage.

6. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API captures a URL as an image; this example captures the page rather than selecting a CSS element, so use the Microlink method above when selector-specific cropping is essential.

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses identify the page verdict and billing status in headers. An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. See the ScreenshotNeo API documentation.

cURL

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

Python

import requests

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

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

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

7. Frequently asked questions

Can I use an ID, class, or other CSS selector?

Yes. The element parameter takes a CSS selector. Use one that matches the intended target in the page being captured.

Does element capture return the selected element’s text?

No. It produces a screenshot. Use Microlink’s separate extraction API when you want selected values or serialized HTML, text, or Markdown.

Should I use waitForSelector for every element screenshot?

No. The screenshot’s element option waits for that selected element to be visible. Add a separate wait when another signal indicates that dynamic content is ready.

Can I capture a lazy-loaded section?

Yes, if it is loaded before capture. Scroll to trigger loading and wait for the relevant content; use a click first if the section is behind a tab or panel.