What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use page.screenshot({ clip: { x, y, width, height } }) to capture a rectangular area, or call screenshot() on an element handle to capture a specific DOM element. The rectangle method gives you exact bounds; the element method is usually simpler when a selector identifies the content you want.
Capture a rectangular area with clip
Pass the rectangle’s page coordinates and dimensions in the clip option to Page.screenshot(). The values below are examples: choose coordinates and dimensions that match the page you are capturing.
await page.screenshot({
path: 'area.png',
clip: { x: 100, y: 80, width: 400, height: 250 },
});x and y set the rectangle’s position; width and height set its size. Puppeteer’s ScreenshotClip extends BoundingBox and also has an optional scale value, which defaults to 1.
A clip is not necessarily limited to the currently visible viewport. In Puppeteer 25.12.0, captureBeyondViewport defaults to false when there is no clip and true when a clip exists. See the ScreenshotOptions reference for the current behavior.
#1 Best Overall
Capture a DOM element instead
If the target is a single element identified by a selector, wait for it and use its element handle’s screenshot() method:
const element = await page.waitForSelector('.target');
await element.screenshot({ path: 'element.png' });The Puppeteer screenshots guide notes that ElementHandle.screenshot() tries to scroll an element into view by default if it is hidden. This is distinct from choosing a hand-defined rectangular clip: the element method targets the node identified by the selector.
Choose between a rectangle and an element
| Need | Use |
|---|---|
| Capture a geometric region, or an area not represented by one DOM node | page.screenshot({ clip: { x, y, width, height } }) |
| Capture a specific node selected from the DOM | elementHandle.screenshot() |
Save the image or use the returned data
Providing path saves the screenshot to a file, and Puppeteer infers the image type from the path’s extension. Without a path, Page.screenshot() returns image data. PNG is the default format. JPEG quality can be set from 0 to 100; the quality option does not affect PNG. The normal return type is Promise<Uint8Array>; the base64 encoding overload returns a string. Refer to the Page.screenshot() API for the available options and overloads.
Or skip the browser setup
ScreenshotNeo can return a screenshot through one GET request. For example, this cURL command saves a WebP shot of a page:
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to start with 1,000 screenshots a month and no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
What does clip.scale do?
It is an optional scale value on ScreenshotClip; its default is 1.
Does the JPEG quality setting change a PNG screenshot?
No. Puppeteer’s quality option applies to JPEG, not PNG.
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.
