How to Set a Screenshot API to Capture the Entire Web Page, Not the Viewport
Set a screenshot API to capture the full scrollable page instead of the visible viewport. Examples cover Playwright, Puppeteer, and ScreenshotNeo.
To capture an entire page with browser automation, enable the full-page option on the screenshot call: use fullPage: true in Playwright or Puppeteer. Both default to a viewport screenshot. With ScreenshotNeo, pass full_page=true in the API request. Full-page capture covers the page’s scrollable height, but the screenshot reflects the page state that has rendered; lazy-loaded or interaction-dependent content may need extra preparation.
1. Set full-page capture in Playwright
After navigating to the target page, set fullPage: true on page.screenshot(). The option defaults to false. Playwright defines a full-page screenshot as capturing the full scrollable page rather than only the currently visible viewport.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
await browser.close();
}Install Playwright and its browser before running this example with Node.js. For a minimal capture, the essential change is simply fullPage: true in the screenshot options. See the official Playwright screenshots guide and Page API.
2. Set full-page capture in Puppeteer
Puppeteer uses the same option name and behavior: set fullPage: true in page.screenshot(). Its documented default is also false.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
await browser.close();
}Consult Puppeteer’s screenshot API reference, ScreenshotOptions, and screenshots guide for the version you use.
3. Make sure the content is ready to capture
The full-page option controls capture extent; it does not promise that every site will load all of its content automatically. A page may load images only after scrolling, reveal sections on interaction, or update after a delay. Navigate to the correct state, wait for the content your screenshot needs, and inspect the output.
- Navigate to the page and wait for its relevant content to render.
- If the site uses lazy loading, scroll through the page or otherwise trigger the content before taking the screenshot.
- Perform any required interaction, such as dismissing a dialog or opening a section.
- Capture with
fullPage: trueand check the resulting image for missing sections or assets.
Navigation wait settings such as networkidle can help, but a network becoming idle does not prove that every application-specific or scroll-triggered element is ready.
4. Choose full-page, clipping, and scale options
| Need | Use | Notes |
|---|---|---|
| Capture all scrollable content | fullPage: true |
Use on the screenshot call in Playwright or Puppeteer. The default is viewport capture. |
| Capture only a region | clip |
Both APIs document clipping controls. In Playwright, specify x/y coordinates and width/height; Puppeteer also exposes a clip option. |
| Choose Playwright output scale | scale: "css" or scale: "device" |
CSS scale produces CSS-pixel sizing; device scale uses device pixels. Choose based on output dimensions and intended use. |
Clipping and scale solve different problems from full-page capture. A clip limits the captured area; scale determines pixel sizing. For option details, use the official Playwright Page API and Puppeteer ScreenshotOptions.
5. Troubleshooting full-page screenshots
The output still shows only the viewport
Confirm that fullPage: true is on the screenshot call itself, not on navigation or browser launch. Check spelling, confirm which automation library the code uses, and compare the installed package version with its API documentation.
Some sections or images are missing
The page may load them only after scrolling, waiting, or interacting. Trigger the required state before capture, wait for the target content, and inspect the resulting image. Full-page mode requests the scrollable page; it does not guarantee site-specific lazy content has been loaded.
The screenshot is much larger than expected
A full-page image includes the page’s full scrollable height. If only one component or area is needed, use a clip instead. In Playwright, consider whether CSS-pixel or device-pixel scale is appropriate; device scale can produce more pixels.
A fixed or sticky element appears unexpectedly
Full-page capture records the rendered page state, and browser behavior can vary with page layout and library version. Inspect the result and, when necessary, adjust the page state or capture a defined region. The cited API references do not promise identical behavior for every site layout.
6. Performance, reliability, and cost
A full-page screenshot can contain far more pixels than a viewport image, so it may take more time to render and produce a larger file. Very long pages can also make a single image unwieldy. If a downstream system has image-size limits, consider capturing sections or resizing the output. Wait for the content that matters instead of using an unnecessarily long fixed delay, and make sure automation closes its browser even when capture fails.
Playwright and Puppeteer are browser automation libraries, so your own runtime and infrastructure determine their operating cost. The documentation cited here defines the capture options, not universal performance benchmarks or a guaranteed capture time.
7. Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its full-page option loads lazy images. A single GET request can return an image or PDF; see the ScreenshotNeo API documentation for parameters and configuration. This example saves a WebP screenshot:
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-d full_page=true \
-o shot.webpCookie and consent banners, newsletter popups, and chat widgets are removed before capture; each cleanup 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. AI agents can use its MCP server tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Create a free ScreenshotNeo account to get 1,000 screenshots a month with no card.
8. FAQ
Does full-page mean the whole website, including other pages?
No. It means the full scrollable content of the page you opened, not every URL on the site.
Is a full-page screenshot the same as a PDF?
No. It is an image capture. A PDF is a separate output format with page size and pagination behavior.
Should I use full-page capture for visual regression tests?
Use it when the content below the fold is part of what you need to compare. Keep page state and loading conditions consistent between captures, and use viewport screenshots when the viewport itself is the subject of the test.
