Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To capture one HTML section, select the element in a rendered browser and call Playwright’s locator screenshot method:
await page.locator('.report-section').screenshot({ path: 'section.png' });This captures the element’s rendered box rather than the whole page. Playwright scrolls the target into view and performs its normal actionability checks first. Puppeteer offers the equivalent through an element handle. The right selector, page state, and handling of scrollable content determine whether the result matches what a user sees.
Choose the element you actually want to capture
A selector such as section works only when the first matching section is the intended one. Prefer a stable ID, component class, test ID, or accessible locator that identifies the exact region.
Useful selector choices
#invoice-summarywhen the section has a unique ID..report-sectionwhen a dedicated component class is stable.[data-testid="sales-chart"]when your application exposes test attributes.- A role, label, or text-based locator when that is more stable than presentation classes.
Element screenshots represent the rendered, visible region. They do not reconstruct hidden DOM content, remove overlays, or automatically expand every independently scrollable descendant.
#1 Best Overall
Playwright: the recommended implementation
Install Playwright in your project, launch a browser, open the page, locate the section, and save the image. This complete Node.js example uses a meaningful selector and waits for the page to be ready.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
try {
await page.goto('https://example.com/report', {
waitUntil: 'networkidle'
});
const section = page.locator('#report-section');
await section.waitFor({ state: 'visible' });
await section.screenshot({
path: 'report-section.png',
type: 'png'
});
} finally {
await browser.close();
}
})();Replace the URL and selector with those from your page. The locator represents the logic used to find the element, so it is generally preferable for new code to retaining an element handle obtained earlier. Playwright’s locator screenshot operation scrolls the element into view before capturing it.
Return image bytes instead of writing a file
Omit path and retain the returned buffer when you need to upload the image, attach it to a report, or process it in memory.
const image = await page.locator('.report-section').screenshot({
type: 'webp',
quality: 85
});
// image is a BufferUse the image type and quality options supported by the Playwright version installed in your project. Check that version’s API reference before relying on newer options.
Wait for the section’s content, not just its element
An element can be visible while its chart, fonts, or asynchronous data are still loading. Wait for a page-specific readiness signal before the screenshot.
await page.locator('#report-section').waitFor({ state: 'visible' });
await page.locator('#report-section canvas').waitFor({ state: 'visible' });
await page.waitForTimeout(300); // only when a short rendering delay is known to be necessary
await page.locator('#report-section').screenshot({ path: 'section.png' });A selector wait, a deterministic application flag, or a network-idle condition is usually more reliable than an arbitrary long delay.
Capture with masks, styles, or animation controls
Playwright’s screenshot API documents options for image type, scale, animation handling, masking, background treatment, and injected styles. These are useful when timestamps, ads, or animated components would otherwise make output unstable. Option names and defaults can change, so verify them against the API reference for your installed version.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Puppeteer alternative
If your project already uses Puppeteer, select the element and call ElementHandle.screenshot().
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com/report', {
waitUntil: 'networkidle0'
});
const section = await page.waitForSelector('#report-section', {
visible: true
});
await section.screenshot({ path: 'report-section.png' });
} finally {
await browser.close();
}
})();Puppeteer attempts to scroll a hidden element into view before capture. For new Playwright implementations, use a locator rather than carrying over an element-handle pattern; in Puppeteer, the handle method remains the element-level screenshot API.
Element screenshot versus full-page screenshot
| Goal | Method | Result |
|---|---|---|
| One card, component, or section | locator.screenshot() or Puppeteer ElementHandle.screenshot() |
The target element’s rendered region |
| Entire scrollable document | page.screenshot({ path: 'page.png', fullPage: true }) |
The full page, including content below the viewport |
| Post-process or upload without a file | Call the screenshot method without path |
Image data returned as a buffer |
Do not use a full-page capture and crop it unless you have a reason to preserve page context. Element capture uses the browser’s measured element box and avoids guessing crop coordinates.
Scrollable sections and overlays
Independently scrollable containers
If the target has overflow: auto or overflow: scroll, the screenshot shows the content currently visible inside that container. It is not necessarily an image of every off-screen descendant. To capture all rows, either remove the internal scrolling for a capture-specific style, paginate the content, or capture each scroll position and combine the results in a separate image-processing step.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteFixed headers, dialogs, and consent banners
A fixed header, modal, cookie notice, chat bubble, or other overlay can cover part of the target. The screenshot reflects that visual obstruction. Close or hide the overlay through the application’s normal controls, or inject capture-only CSS when your automation policy permits it.
await page.locator('.cookie-banner button[aria-label="Close"]').click();
await page.locator('#report-section').screenshot({ path: 'clean-section.png' });Do not hide an overlay merely because it exists if the purpose of the screenshot is to document the real user view.
Reliable capture workflow
- Set a deterministic viewport. Choose width, height, and device scale that match the output you need.
- Load the exact URL. Use an appropriate wait condition and authenticate if the section is private.
- Choose a stable locator. Avoid positional selectors such as
section:nth-child(2)when markup can change. - Wait for content readiness. Wait for a visible target plus the chart, image, data flag, or font condition your page requires.
- Resolve overlays deliberately. Close them, leave them visible, or mask them according to the purpose of the capture.
- Capture and validate. Check the output dimensions, file type, and whether internal scrolling clipped required content.
- Close the browser. Use a
finallyblock so failures do not leave browser processes running.
Common failures and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| “Element not found” or a timeout | The selector is wrong, the frame is different, or rendering has not completed. | Inspect the live DOM, use a stable selector, wait for visibility, and select the correct frame when applicable. |
| Screenshot is blank | The page failed, content is deferred, or a canvas has not rendered. | Check navigation errors and console output; wait for the data/render signal; verify the element’s bounding box. |
| Only part of a list appears | The section is an independently scrollable container. | Capture each scroll position or temporarily change the container’s overflow and height for capture. |
| A banner covers the section | A fixed consent, chat, or modal overlay is still open. | Close it through the UI or apply an intentional capture-only style. |
| Fonts or images differ between runs | Assets are still loading or the environment differs. | Wait for the relevant assets, use a consistent browser image, viewport, timezone, and network conditions. |
| Screenshot is cropped unexpectedly | The element’s CSS box is smaller than its overflowing content. | Inspect computed size and overflow; expand the box or capture the needed descendants separately. |
| Navigation hangs | A third-party request never completes. | Use a practical navigation timeout, wait for a specific readiness selector, and log failed requests. |
Performance, repeatability, and security
Launching a new browser for every image is simple but expensive at scale. Reuse a browser process and create isolated pages or contexts for batches, while closing each page after use. Keep the viewport and device scale fixed so visual diffs are meaningful. Use a buffer when sending images directly to object storage or an HTTP response; writing and rereading temporary files adds avoidable I/O.
For authenticated pages, supply credentials through the browser’s supported context or session mechanism rather than putting secrets in a URL. Treat captured images as potentially sensitive artifacts. Disable or remove analytics and other unnecessary third-party resources only when doing so does not change the section you intend to document.
Element capture is normally cheaper in time and memory than a full-page image, but a very large element still produces a large bitmap. Consider WebP or JPEG when lossless PNG is unnecessary, and keep PNG for text-heavy or pixel-accurate output.
Or skip the browser setup
ScreenshotNeo captures a specific element by CSS selector through one API request, alongside full-page screenshots, custom CSS and JavaScript, click actions, waits, hidden selectors, device presets, retina scale, authentication headers and cookies, and other capture controls. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.
Use the ScreenshotNeo API documentation for the complete parameter list. This cURL request captures the target URL; adapt the URL and add the element-selector option required by your capture.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
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}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. Create a free ScreenshotNeo account.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
ScreenshotNeo plans
| Plan | Price | Included screenshots |
|---|---|---|
| Free | $0 | 1,000 per month |
| Starter | $5 | 3,000 |
| Growth | $15 | 15,000 |
| Pro | $39 | 60,000 |
| Scale | $99 | 250,000 |
| Business | $249 | 1,000,000 |
Yearly billing provides two months free, and every feature is available on every plan.
Frequently Asked Questions
Can I capture an element inside an iframe?
Yes, but first select the correct frame and then locate the element within that frame; a page-level locator cannot see DOM content belonging to a different frame.
Will an element screenshot include content below the fold?
Only content inside the element’s rendered box is included. An independently scrollable element contributes its currently scrolled content, not every hidden descendant.
Which format should I choose?
Use PNG for sharp text and lossless output, JPEG for smaller photographic images, and WebP when your consumers support it and you want a size-efficient result.
Free tools Windows power users keep installed
One-click scans. No signup required.
Why does my screenshot differ on CI?
Browser version, fonts, viewport, device scale, timezone, animations, network timing, and third-party overlays can all change rendering. Standardize those inputs and wait for a deterministic readiness signal.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
