In Puppeteer, choose the snapshot method by the output you need: page.screenshot() for an image, page.content() for serialized HTML, page.accessibility.snapshot() for the accessibility tree, or page.pdf() for a document. A page screenshot captures the viewport by default; set fullPage: true to request the full page.
Choose the right kind of snapshot
| What you need | Puppeteer method | What it returns |
|---|---|---|
| Visible pixels | page.screenshot() |
Image bytes, or base64 text when configured |
| One element’s pixels | elementHandle.screenshot() |
An image of that element |
| Rendered page markup | page.content() |
Full HTML, including the DOCTYPE |
| Accessibility representation | page.accessibility.snapshot() |
The current accessibility tree |
| Printable or screen-styled document | page.pdf() |
A PDF using print media by default |
These outputs serve different purposes: an image records appearance, HTML preserves markup, an accessibility snapshot exposes a browser’s accessibility-tree view, and PDF produces a document. See Puppeteer’s screenshots guide and the API references for page.content(), accessibility.snapshot(), and Page and page.pdf().
As an Amazon Associate I earn from qualifying purchases.
Capture a page screenshot
This Node.js example opens a page, waits for navigation, and saves a full-page PNG. It uses the Puppeteer package in a Node project; install it with npm install puppeteer if it is not already installed.
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 matchWindows 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 reinstallconst puppeteer = require('puppeteer');
(async () => {
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', fullPage: true });
} finally {
await browser.close();
}
})();The official guide demonstrates networkidle2 as a navigation wait condition. It is an example, not a universal signal that every page is ready: choose a condition appropriate to the page’s asynchronous work and verify the capture in your own workflow.
#1 Best Overall
Screenshot options and when to use them
The current official ScreenshotOptions reference is labeled Puppeteer 25.12.0. Check the matching reference for your installed version if your project uses another release.
| Option | Use | Documented default or caveat |
|---|---|---|
fullPage |
Request a full-page image instead of the viewport | false |
clip |
Limit capture to a rectangular page region | No default stated; check version-specific behavior for combinations |
captureBeyondViewport |
Control capture beyond the viewport | false without clip; true when clip is supplied |
type |
Choose image format | png |
quality |
Set quality for a supported lossy image format | 0–100; does not apply to PNG |
omitBackground |
Hide the default white background for transparency | false; use a format that supports transparency |
encoding |
Choose binary or base64 output | binary |
path |
Save the image to a file | If omitted, Puppeteer does not save it to disk; file extension can determine type |
fromSurface |
Capture from the surface rather than the view | true |
optimizeForSpeed |
Use the speed-oriented capture option | false |
With no base64 encoding, page.screenshot() returns a Uint8Array; with encoding: 'base64', it returns a string. While capture is running in a BrowserContext, newPage() and close() wait for it to finish; bringToFront() does not. See Page.screenshot().
Viewport, full page, or a region
- For only the visible viewport, leave
fullPageunset or set it tofalse. - For the whole page, set
fullPage: true. - For a rectangular region, pass
clip. Its full coordinate shape and every interaction withfullPageare not detailed here; consult your installed version’s API reference before depending on edge-case combinations. SetcaptureBeyondViewportexplicitly if a clipped capture needs particular beyond-viewport behavior.
Format, quality, and transparency
PNG is the documented default. Set type to a supported non-PNG format and quality between 0 and 100 when you want lossy output; quality has no effect on PNG. The cited reference excerpt does not enumerate every accepted format. For transparency, set omitBackground: true and choose an image format that supports it.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Capture one element
Find the element, then call its screenshot method. Puppeteer scrolls the element into view if needed; the call can fail if the element becomes detached before capture completes.
const element = await page.$('#receipt');
if (!element) {
throw new Error('Could not find #receipt');
}
await element.screenshot({ path: 'receipt.png' });The ElementHandle.screenshot() reference describes this behavior. Keep the target attached through the call, especially if the page rerenders dynamically.
Save HTML, an accessibility snapshot, or a PDF
HTML
const html = await page.content();
require('node:fs').writeFileSync('page.html', html, 'utf8');page.content() returns the full HTML serialization, including the DOCTYPE. It is not a screenshot and does not by itself preserve the page’s rendered pixels.
Accessibility tree
const snapshot = await page.accessibility.snapshot();
require('node:fs').writeFileSync(
'accessibility.json',
JSON.stringify(snapshot, null, 2),
'utf8'
);The snapshot’s interestingOnly setting defaults to true, filtering out nodes considered uninteresting; set it to false for the full tree. includeIframes defaults to false, and root can scope the snapshot to an element. This is a browser accessibility-tree view, not a guarantee of identical output across operating systems or screen readers; the API notes that accessibility is platform-specific. See Accessibility.snapshot().
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteawait page.pdf({ path: 'page.pdf' });Puppeteer generates PDFs using print media by default. To use screen styles instead, emulate screen media before creating the PDF:
await page.emulateMediaType('screen');
await page.pdf({ path: 'page.pdf' });The relevant method information appears in the Page API reference; its version status was not independently verified, so confirm PDF options against the reference matching your installed release.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. A single GET request can return an image or PDF. See the API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpIt removes cookie and consent banners, newsletter popups, and chat widgets before capture; 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 for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Recommended Free Tools
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting and practical limits
The screenshot shows only the viewport
fullPage defaults to false. Set fullPage: true when the entire page is required.
The capture is blank or missing late content
A navigation wait condition does not guarantee that application-specific asynchronous work has finished. Choose a readiness condition based on the page and verify the result; the official guide’s networkidle2 example should not be treated as a universal guarantee.
An element screenshot fails
Confirm the selector found an element and that it remains attached until elementHandle.screenshot() finishes. Puppeteer scrolls it into view, but a detached element causes an error.
A clipped capture includes unexpected area
captureBeyondViewport has a different documented default depending on whether clip is present. Set it explicitly when that distinction matters, and check the API reference for your Puppeteer version because the documented excerpt does not fully specify all clip combinations.
Transparency or quality settings appear ineffective
Quality is not applicable to PNG. For a transparent background, set omitBackground: true and use a format that supports transparency.
The output type or save behavior is unexpected
Check type, encoding, and path. Without path, the screenshot is not written to disk; binary output is a Uint8Array, while base64 encoding returns a string. The file extension can determine the saved image type.
Performance, reliability, and cost considerations
The cited Puppeteer documentation defines options but does not establish comparative speed, output-size benchmarks, cross-browser parity, or reliability rates. Avoid choosing an option on those grounds without measuring it in your own workflow. For repeated captures, account for the fact that newPage() and close() wait for screenshot work to finish in a BrowserContext; bringToFront() does not. Puppeteer itself documents no per-capture price in the references cited here, so infrastructure and runtime cost depend on how you deploy it.
Frequently Asked Questions
Does Puppeteer have a method literally called snapshot()?
For a page image, use page.screenshot(). Puppeteer also has page.accessibility.snapshot() for an accessibility-tree representation; HTML and PDF use separate methods.
Which Puppeteer version do the screenshot option defaults describe?
The ScreenshotOptions API page cited here is labeled Puppeteer 25.12.0. Check the API reference for the version installed in your project.
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.
