iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Set fullPage: true in Puppeteer’s page.screenshot() call to capture a page beyond the visible viewport. Navigate to the URL, wait for the content you need to appear, save the image, and close the browser.
Capture a full page with Puppeteer
This minimal ES module opens a page, navigates to it, writes a PNG screenshot, and closes the browser even if navigation or capture fails:
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', fullPage: true });
} finally {
await browser.close();
}Install Puppeteer in your project with npm install puppeteer, save the script in a JavaScript file configured to use ES modules, then run it with Node.js. Replace https://example.com with the page you want to capture. The image is saved as page.png in the current working directory.
What the key settings do
fullPage: trueasks Puppeteer to capture the full page rather than only the visible viewport. The documented default isfalse, so include this option when you need the entire page. See the ScreenshotOptions reference.path: 'page.png'writes the image to a file. When a path is supplied, Puppeteer infers the image type from its extension; PNG is the documented default type. Choose an extension that matches the format you want.waitUntil: 'networkidle2'is an example navigation wait condition used in Puppeteer’s screenshots guide. It does not guarantee that every site’s delayed or application-rendered content is ready.
Wait for the page content you need
A navigation event and a fully rendered page are not always the same thing. A site may load important content after its initial response—for example, after a client-side request or when a component appears. If the screenshot misses that content, wait for a page-specific selector or application-ready condition before calling screenshot().
#1 Best Overall
For example, if a page displays its report only after an element appears, wait for that selector:
await page.goto('https://example.com/report', { waitUntil: 'networkidle2' });
await page.waitForSelector('[data-report-ready]');
await page.screenshot({ path: 'report.png', fullPage: true });Replace [data-report-ready] with a selector that reliably indicates the desired content is present. The selector wait supplements navigation; it should reflect the application’s actual ready state.
Rank #2
Choose the capture area and output
Viewport, full page, or one element
- Viewport: omit
fullPageor set it tofalseto capture the visible page area. - Full page: set
fullPage: trueto capture beyond the viewport. - One element: locate the element and call its
screenshot()method instead of capturing the whole page. Puppeteer documents that an element screenshot attempts to scroll a hidden element into view. See the screenshots guide.
Image format, quality, and clipping
For ordinary full-page captures, a file path and matching extension are usually enough. Puppeteer also supports a clip option to capture a specified region. Use omitBackground: true when you need to omit the default white background and allow transparency. The quality option applies to supported lossy image output, not PNG. Check the option reference for the current option definitions.
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 →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Troubleshoot common screenshot problems
- The screenshot contains only the visible screen: set
fullPage: true; its default is false. - Content is missing or appears incomplete: use a wait condition tied to the content you need, such as
page.waitForSelector(), before capturing. A navigation wait mode alone may not cover delayed application rendering. - The file is saved in an unexpected format: check the path extension. Puppeteer infers the image type from the extension when saving to a path.
- The output has an unwanted white background: consider
omitBackground: truewhere transparency is appropriate. - You need only a chart, card, or other component: use an element handle’s screenshot method rather than a full-page capture.
- The browser remains open after an error: keep
browser.close()in afinallyblock so cleanup runs after navigation or screenshot failures.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF, with options for full-page capture and other capture settings. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. See the API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpGet 1,000 free screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Frequently Asked Questions
Which Puppeteer option captures the whole page?
Set fullPage: true in page.screenshot().
Does Puppeteer wait until every part of a site has rendered?
No single navigation wait condition guarantees that all delayed or application-rendered content is ready. Wait for a selector or application-ready condition that matches the content you need.
Quick Recap
Best Value
- Used Book in Good Condition
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.
