Why Does a Website Screenshot Only Capture the Viewport?

A website screenshot usually captures only the viewport because that is the default mode: it records the part of the page currently visible in the browser. Capturing everything below the fold is a separate full-page option. In Puppeteer and Playwright, set fullPage: true; in Firefox Developer Tools, use its full-page screenshot control.

What “viewport” means

The viewport is the visible page area inside the browser window. It does not include browser controls such as tabs and the address bar, and a normal viewport screenshot does not include content that would require scrolling to see.

A full-page screenshot captures the page’s scrollable extent, as if the page could fit on a very tall screen. It is still a capture of the web page, not the browser window chrome. The exact behavior depends on the tool and its settings.

Capture the full page with Puppeteer

Puppeteer’s screenshot option fullPage is optional and defaults to false. Set it to true to request the whole page.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: true });
try {
  const page = await browser.newPage({
    viewport: { width: 1440, height: 900 },
  });
  await page.goto('https://example.com', { waitUntil: 'networkidle2' });
  await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
  await browser.close();
}

Use fullPage: false or omit the option for a viewport capture. Puppeteer also supports clip for capturing a specific rectangle and captureBeyondViewport for capture beyond the viewport in applicable configurations. Check the selected clip and capture mode if the result stops at an unexpected boundary. See the Puppeteer ScreenshotOptions reference.

Capture the full page with Playwright

Playwright also defaults to the visible viewport. Pass fullPage: true to capture the full scrollable page.

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
try {
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  await page.goto('https://example.com', { waitUntil: 'networkidle' });
  await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
  await browser.close();
}

For a standard viewport image, omit fullPage or set it to false. Playwright describes full-page mode as capturing the whole scrollable page as if it fit on a very tall screen. See the Page API and Screenshots guide.

Capture the entire page in Firefox Developer Tools

Open Firefox Developer Tools.
Open the toolbox settings and enable the “Take a screenshot of the entire page” button, if it is not already available.
Use the screenshot control to capture the page.

Firefox Developer Tools also documents taking a screenshot of an individual element through the Inspector. Follow the steps for the Firefox version you use; the available controls can vary. See Firefox’s screenshot documentation.

Why a screenshot may still be incomplete

Full-page mode was not enabled. The default in the documented Puppeteer and Playwright APIs is viewport capture. Set the full-page option explicitly.
A clip or region limit is active. A clip intentionally restricts the capture area. Remove it or adjust its dimensions if you need the full page.
The chosen tool does not provide full-page capture in that workflow. Check its documentation and selected capture mode; there is no single setting that applies to every browser, operating-system shortcut, and screenshot app.
Page content has not appeared yet. A full-page option cannot capture content that has not loaded or rendered. Wait for the relevant selector or page state before taking the screenshot.
The page changes as it scrolls. Lazy-loaded images and other scroll-triggered content may not be ready in a single capture unless the tool or your script causes them to load first.

Choosing between viewport, full-page, and element capture

Capture mode	Use it when	Check
Viewport	You need a screenshot of what a user sees without scrolling.	Set a consistent viewport size for repeatable results.
Full page	You need the complete scrollable page in one image.	Enable full-page mode and confirm no clip restricts the result.
Element	You need a particular component, such as a chart or product card.	Use a selector or the browser tool’s element capture feature.

cURL and API requests

With a screenshot API, the requested output depends on that service’s supported parameters. ScreenshotNeo accepts a URL in one GET request and supports full-page capture. Its API parameter names are compatible with names used by other screenshot APIs to make switching easier. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o full-page.webp

For full-page output, add the full-page parameter documented for the API you use. ScreenshotNeo supports full-page capture and loads lazy images; consult its docs for the current parameter name and other request options.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It returns PNG, JPEG, WebP, or PDF from a GET request. For a full-page capture, use the full-page option documented for the request:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Read the API docs for full-page and output settings. Before capture, ScreenshotNeo accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits cost nothing, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

Performance, reliability, and cost

Full-page images can be much taller and larger than viewport images, so use viewport capture when that is all you need. For automated captures, set a stable viewport, wait for the content that matters, and avoid waiting for every network connection to become idle if the site keeps long-lived requests open. For pages with lazy-loaded content, confirm that the capture tool loads it or explicitly scroll through the page before capture.

Local Puppeteer and Playwright captures use your own browser runtime and infrastructure. With a hosted screenshot API, check how it treats unsuccessful loads, caching, and billing. ScreenshotNeo states that failed loads, blank pages, bot checks, timeouts, and cache hits are not billed; its response includes headers identifying the verdict and billing status.

Troubleshooting

Symptom	Likely cause	Fix
Image ends at the visible screen	Viewport mode is still selected.	Enable `fullPage: true` in Puppeteer or Playwright, or use Firefox’s entire-page screenshot control.
Image ends at a rectangle or element boundary	A clip or element capture was selected.	Remove or revise the clip, or switch to full-page capture.
Images below the fold are missing	They may load only after scrolling.	Wait for the page to render them; scroll through the page before capture if needed, and verify the tool’s lazy-image behavior.
Some content is blank or stale	The capture happened before that content finished loading.	Wait for a meaningful selector or a suitable page state rather than relying only on a short fixed delay.
Full-page output is unexpectedly large	The page is very tall or the output scale is high.	Use a smaller viewport scale or capture only the required element or region where appropriate.

FAQ

Does full-page capture include browser tabs and the address bar?

No. It captures the web page’s scrollable area, not the surrounding browser window.

Can I capture just one element?

Yes. Puppeteer and Playwright support element-oriented capture workflows, and Firefox Developer Tools documents capturing an individual element through the Inspector.

Why is the full-page option not enough for a page with lazy loading?

Some pages fetch content only when it approaches the viewport. Make sure that content has loaded before capture, for example by scrolling through the page or waiting for the target elements.

Is there one shortcut that makes every browser screenshot full-page?

No universal shortcut is established by the cited tool documentation. The steps depend on the browser, operating system, and capture tool.