Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use page.screenshot() to capture a page, and element.screenshot() to capture one DOM element. Set fullPage for a full-document image, clip for a defined region, and type, quality, or omitBackground to control the output. You can save the result with path or keep the returned bytes in memory.
Choose the right screenshot method
Puppeteer provides two main screenshot entry points. The official guide summarizes the page-level method directly: “For capturing screenshots use Page.screenshot().” Use it for a page or a region of one. If you need only one DOM node, locate it and call ElementHandle.screenshot() instead.
- Whole page or viewport:
page.screenshot(options). - One element:
element.screenshot(options).
The options below are documented in Puppeteer’s ScreenshotOptions reference. The official API and guide pages reported Puppeteer version 25.12.0 in search results; if your installed version differs, check its documentation before relying on a default or behavior.
Recommended Free Tools
Set up a complete page capture
Here is a runnable Node.js example that opens a URL, captures the full page as a PNG, and closes the browser even if navigation or capture fails. Install Puppeteer in your project first with npm install puppeteer; the package includes a compatible browser for its standard setup.
#1 Best Overall
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({
path: 'page.png',
type: 'png',
fullPage: true,
});
} finally {
await browser.close();
}Save the file as an ES module, for example screenshot.mjs, and run node screenshot.mjs. Change the URL and output path for your task. The navigation wait here is an example of coordinating page loading; it is not a screenshot option. Some sites keep network activity open, so if navigation never reaches that condition, use a different navigation wait and explicitly wait for the content your capture needs.
Pick the capture area
Viewport versus full page
By default, fullPage is false, so the capture is not explicitly extended to the full document. Set fullPage: true when you need the whole page rather than just the visible area.
await page.screenshot({ path: 'full.png', fullPage: true });Full-page capture is useful for long articles and page reviews, but a long document can produce a large image. For a stable, repeatable capture size, set the viewport before navigating or capturing:
await page.setViewportSize({ width: 1280, height: 900 });Use the method supported by your installed Puppeteer version to configure the viewport. The option reference distinguishes screenshot area controls; it does not prescribe a particular viewport size.
Clip to a region
Pass a clip rectangle when you want a specific part of the page instead of the full document. It defines the region to capture, which is useful for a chart, hero section, or fixed-size preview. Ensure the region coordinates and dimensions match the page layout you intend to capture.
Rank #2
await page.screenshot({
path: 'region.png',
clip: { x: 0, y: 0, width: 800, height: 500 },
});captureBeyondViewport controls whether the capture can extend beyond the viewport. Its documented default is false when no clip is supplied and true when a clip is supplied. Set it deliberately if your chosen clip or capture bounds extend beyond the visible viewport; it is not a substitute for choosing the right screenshot area.
Capture one element
For one element, get its handle and invoke its screenshot method. Puppeteer scrolls the target into view if needed. The call fails if the element has been detached from the DOM, so locate it after the page has loaded and avoid interacting with a page that removes or replaces the target during capture.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →const card = await page.$('.product-card');
if (!card) throw new Error('Product card was not found');
await card.screenshot({ path: 'card.png' });The selector is specific to this example: replace it with a selector present on the target page. An element handle is not the same thing as the page-wide clip rectangle: the former targets a DOM element, while the latter specifies a coordinate region.
Choose format, quality, and transparency
| Goal | Option | Behavior |
|---|---|---|
| Choose image format | type |
Defaults to png. If path is supplied, the filename extension is used to infer the screenshot type. |
| Adjust lossy image quality | quality |
Accepts a value from 0 to 100; it does not apply to PNG. |
| Allow a transparent background | omitBackground |
When true, hides the default white background and permits transparency. Defaults to false. |
For example, set type explicitly when the output format matters to a downstream process. If you use a path with an extension that implies a different format, do not assume that the explicit type and extension agree; choose a matching pair so the file is unambiguous.
await page.screenshot({
path: 'preview.webp',
type: 'webp',
quality: 80,
});The reference documents quality as 0–100 and says it does not apply to PNG. Do not use a quality value as a way to reduce a PNG file; choose an appropriate image format instead. To retain transparency, use a format that supports it and set omitBackground: true.
await page.screenshot({
path: 'logo.png',
type: 'png',
omitBackground: true,
});Save a file or use the result in memory
Write to disk with path
path tells Puppeteer to save the capture. A relative path is resolved from the process’s current working directory, not necessarily the directory containing the JavaScript file. If you omit path, Puppeteer does not save an image to disk.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
const imageBytes = await page.screenshot({ path: 'captures/home.png' });Create the destination directory before capture if it does not exist, and check the process working directory when a file appears somewhere unexpected. With a path, the returned image data is still available to your code.
Keep bytes or request base64
By default, the promise resolves to a Uint8Array. This is useful when passing image bytes to another API, storing them in an object store, or writing the file yourself. With encoding: 'base64', the promise resolves to a string instead.
const bytes = await page.screenshot();
// Pass bytes to the image consumer or storage layer you use.
const base64 = await page.screenshot({ encoding: 'base64' });
// base64 is a string, not a Uint8Array.Base64 is an encoding for transporting image data, not a different screenshot format. When a consumer accepts binary data, the default byte result avoids adding base64 representation overhead and conversion steps.
Coordinate capture with page activity
A correct option set cannot compensate for a page that has not rendered the content you need. Navigate first, then wait for an application-specific signal when the page’s important content is loaded. The screenshot option reference covers capture behavior; your site’s loading conditions determine what to wait for.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Rank #4
- Dynamic content: wait for a selector that appears when the relevant content is ready.
- Late layout changes: capture only after images, fonts, or client-rendered components have settled enough for your use case.
- Changing pages: avoid taking a screenshot while the target element is being removed or replaced.
Puppeteer documents that BrowserContext.newPage(), Browser.newPage(), and Page.close() automatically wait for a screenshot operation in progress. Page.bringToFront() does not wait for existing screenshot operations. If your workflow depends on a screenshot finishing before another action, await the screenshot promise yourself rather than assuming every page operation provides that synchronization.
Common problems and fixes
The file was not created
Check whether you supplied path. Without it, capture data is returned to the caller but not saved to disk. If the path is relative, resolve it from the process’s current working directory. Also ensure that the destination directory exists and is writable.
The capture shows only part of the document
Set fullPage: true for the full document. For a deliberate subsection, use clip and verify the rectangle’s coordinates and dimensions. Review captureBeyondViewport when the clip extends outside the visible viewport; its default depends on whether a clip is present.
The screenshot looks blank or incomplete
Wait for the page’s relevant content before capturing. A navigation event finishing does not necessarily mean a particular client-rendered component is ready. Use a page-specific readiness condition, then confirm that the selector or content is present before calling the screenshot method.
Free tools Windows power users keep installed
One-click scans. No signup required.
Element capture fails
Confirm that the selector matched an element. If it did, the element may have been detached before the screenshot operation. Query it after the relevant page update and take the screenshot before the application replaces or removes it.
Quality appears unchanged
quality is not applicable to PNG. Select a lossy image format supported by your installed Puppeteer version if you need a quality setting, and keep the filename extension consistent with the format.
Transparency is missing
Set omitBackground: true to hide the default white background, and choose an output format that can represent transparency. A white background is the documented default behavior.
When a screenshot API is a better fit
Puppeteer is a good fit when you need browser automation in your own Node.js workflow and want to control the capture directly. If you would rather make an HTTP request than install and coordinate a browser, ScreenshotNeo is a website screenshot API and MCP server for developers. Its options include full-page capture, CSS-selector element capture, image formats, PDF, custom waits, and other page controls; parameter names used by other screenshot APIs also work to ease switching.
Or skip the browser setup
Make one GET request with a URL and your API key. See the ScreenshotNeo API documentation for the request and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo 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 cost nothing, and response headers report the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Can I take a screenshot without writing it to a file?
Yes. Omit `path` and use the returned `Uint8Array`, or request base64 encoding when a string is required.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Does a full-page screenshot change the browser viewport?
`fullPage` controls the captured page area. Set the viewport separately when you need a particular viewport size.
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.
