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 →To capture an entire scrollable page in JavaScript, use Playwright’s page.screenshot({ path: 'full-page.png', fullPage: true }) after navigating to the page. Puppeteer supports the same fullPage option. The flag asks the browser automation library to capture beyond the visible viewport; it does not ensure that every lazy-loaded image or asynchronous component has finished rendering.
How do I take a full-page screenshot with JavaScript?
With Playwright, navigate to the target URL and pass fullPage: true to page.screenshot(). The option captures the full scrollable page rather than just the visible viewport, as described in the Playwright Page API and its Screenshots guide.
await page.goto('https://example.com');
await page.screenshot({ path: 'full-page.png', fullPage: true });This snippet assumes page is an open Playwright page. A complete Node.js script is below. Use the URL and readiness condition that match your own application.
Complete Playwright script
Install Playwright in your project, then install its browser binaries using the documented Playwright setup for your environment. The following CommonJS script opens Chromium, visits a page, captures the full scrollable document, and closes the browser even if capture fails.
#1 Best Overall
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
await browser.close();
}
})();waitUntil: 'load' waits for the page load event; it is not proof that a single-page application, lazy image, animation, or late API response has reached the exact state you want to document. If capture depends on application content, wait for a known selector or state before taking the screenshot.
Wait for the page state you need
Full-page capture and page readiness are separate concerns. The screenshot option controls how much of the page is captured. Your script must separately decide when the content is ready. Prefer a meaningful condition specific to the site over an arbitrary pause.
Wait for a visible element
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
await page.locator('[data-testid="report-ready"]').waitFor({ state: 'visible' });
await page.screenshot({ path: 'report.png', fullPage: true });Replace the selector with an element that appears only when the content you need is ready. If the selector never appears, the wait fails rather than silently producing an image of the wrong state.
Handle lazy-loaded content deliberately
Some pages load images or sections only as they approach the viewport. A full-page screenshot request does not, by itself, establish that every such resource has loaded. If the output omits content, inspect the page’s loading behavior and use a site-specific method to trigger or await it before capture. Then inspect the resulting image; do not assume one universal waiting recipe works for every site.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose output size and image format
The file type and pixel scale affect the output image, not whether the capture covers the full page. Playwright documents PNG, JPEG and WebP screenshot types and a scale setting that chooses CSS-pixel or device-pixel sizing in its Page API.
- PNG: a practical choice for crisp text, interface screenshots, and images where lossless output matters.
- JPEG: useful when a smaller, lossy image is acceptable. Choose a quality value supported by the API when configuring it.
- WebP: an option when the consumer supports it and you want that image format.
- Scale: use CSS-pixel sizing for an image aligned to the page’s CSS layout; use device-pixel sizing when you need output reflecting device scale.
For example, set the image type explicitly when you need JPEG output:
await page.screenshot({
path: 'full-page.jpg',
type: 'jpeg',
quality: 80,
fullPage: true
});Confirm the exact accepted option values and constraints against the Playwright API version installed in your project. Format and quality settings do not make the page more complete; they only affect the encoded output.
Capture a full page with Puppeteer
If your JavaScript project already uses Puppeteer, use its fullPage screenshot option. Puppeteer’s ScreenshotOptions reference defines the option as taking a screenshot of the full page when true. Its current reference identifies version 25.12.0; check the API documentation matching your installed version.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #3
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
await browser.close();
}
})();Puppeteer also documents screenshot options including path, type, JPEG quality, clip, omitBackground, and captureBeyondViewport. Use a clip when you need a defined region rather than the entire scrollable page. Use the current Puppeteer reference for option-specific behavior and compatibility.
Playwright or Puppeteer: which should you use?
There is no universally best library established by these API references. If your project already depends on one, its page-level screenshot API is generally the direct route; both expose a full-page option. The useful choice is usually the one that fits your existing automation code and required output options.
| Route | What it provides | Good fit when |
|---|---|---|
| Playwright | Page-level full-page screenshot, image type and scale options documented in its Page API. | You are using Playwright or want its documented page API for this capture. |
| Puppeteer | Page-level fullPage option plus documented clip, type, quality, transparency, and beyond-viewport options. |
Your project already uses Puppeteer or needs its screenshot options. |
| Chrome DevTools Protocol | Lower-level Page-domain screenshot parameters, including format, quality, captureBeyondViewport, and fromSurface. |
You are working directly with the browser protocol rather than a page-library API. |
The Chrome DevTools Protocol Page domain is useful when you need protocol-level control. For ordinary Playwright or Puppeteer use, calling the protocol directly is not necessary just to request a full-page capture.
What full-page capture does—and does not—guarantee
A full-page screenshot means capturing the scrollable page beyond the currently visible viewport. It does not automatically mean that all intended content was rendered before the capture. Page-specific behaviors can affect what appears, including content loaded on scroll, delayed application updates, and animations. Inspect the image and test against the exact site and browser version when details such as fixed-position elements or unusually tall pages matter; the cited API references do not establish universal pixel limits or consistent behavior for those cases.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
For a reliable workflow, define the target state, wait for that state, capture, and inspect the output. If the image is missing content, determine whether the cause is page readiness, lazy loading, a selector or clipping choice, or image encoding before changing unrelated screenshot options.
Troubleshooting full-page screenshots
- The output contains only the visible viewport: verify that the call uses
fullPage: trueand that the option is passed to the page screenshot method—not a different screenshot API or helper. - Images or sections are missing: the page may load them asynchronously or only when scrolled into view. Wait for an application-specific ready signal, address lazy loading as that site requires, and inspect the result.
- The screenshot is from the wrong page state: navigation completion may have occurred before the app finished updating. Wait for a selector or state tied to the content you need rather than assuming the load event covers it.
- The file has the wrong format or appearance: check the output path, selected type, quality, and scale options against the API documentation for your installed library.
- You need only a portion of the page: use the relevant library’s clipping option instead of treating a full-page screenshot as an element capture. Puppeteer documents
clipin its ScreenshotOptions reference. - Capture differs across pages or browser versions: reproduce against the target URL and the browser version used in production. The references do not establish universal maximum image dimensions or fixed-element behavior.
- Browser startup or navigation fails: check that the browser binaries for the chosen library are installed and that the target page is reachable from the machine running the script. Keep browser closure in a
finallyblock so failures do not leave a process running.
Performance, reliability, and cost considerations
Full-page images can contain substantially more pixels than viewport captures, so choose format and scale according to how the output will be used. For repeatable test artifacts, wait for a stable application state and use consistent browser and viewport settings. The cited documentation does not provide a universal speed, memory, or maximum-height figure; those depend on the page and environment, so measure with your own workload rather than relying on a general limit.
For browser-based capture, your code is responsible for launching and maintaining the browser, navigating to the page, waiting for readiness, and storing the image. This gives you control over browser automation but also means you must handle runtime and page-specific failures. A hosted screenshot API is an alternative when you would rather send a URL than manage the capture browser yourself.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.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. For a full-page WebP capture, use this cURL request; see the ScreenshotNeo documentation for API parameters.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers indicate the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I use fullPage with a specific URL directly?
Navigate the Playwright or Puppeteer page to the URL first, then call the page screenshot method with its full-page option.
Does full-page screenshotting guarantee lazy-loaded images appear?
No. The option requests capture beyond the viewport; lazy-loaded and asynchronous content may need site-specific readiness handling.
Recommended Free Tools
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.
