Full Page Screenshots: Every Method Tested on One Page

A full page screenshot captures the whole scrollable document, not only the part in the browser window. Every major tool has a one-line way to do it:

// Puppeteer
await page.screenshot({ path: 'full-page.png', fullPage: true });
// Playwright
await page.screenshot({ path: 'full-page.png', fullPage: true });

# Selenium with Firefox
driver.get_full_page_screenshot_as_file('full-page.png')

The one-liners work on short pages. On long pages they fail in three ways that this guide measures: the image repeats its top after a size limit, lazy images stay blank, and fixed headers or cookie bars land in the wrong place. We built three test pages for this, ran every method against them, and recorded what came out. RenderScreenshot is a screenshot API, so the last section shows the same capture as one request, but the rest of the guide works without it.

Tested on 2026-10-15 on macOS 27.0.1 (Apple Silicon) with Node 22.18.0, Puppeteer 25.14.0 (Chrome for Testing 155.0.8059.79), Playwright 1.64.1 (Chromium 156.0.8078.4, Firefox 157.0, WebKit 27.2), Google Chrome 155.0.8059.40, Python 3.14.8 with Selenium 4.51.0, Firefox 158.0 and geckodriver 0.37.1. Times are the median of 3 runs on one machine against a local server, so they show relative cost, not what you will see over a network.

The test pages

All numbers in this guide come from three pages served from a local Node server:

A script reads pixels from each output: the center of every band, the center of every image slot, and colored rows of the header and the cookie bar. "Complete" means every check passed.

Results on the 20,000 px page

The most surprising row is the first group. Full Chrome returned an image of the right size, but after 16,384 device pixels it drew the top of the page again. There is no error and no warning. Your monitoring sees a 20,000 px PNG and moves on.

How tall can a full page screenshot be?

We repeated the long page at heights from 8,000 to 150,000 px:

The limit counts device pixels, not CSS pixels. At deviceScaleFactor: 2, Puppeteer's default Chrome already repeated content on an 8,500 CSS px page, because 8,500 x 2 is more than 16,384.

Three ways to stay below the limit in Chrome:

1. Use chrome-headless-shell. Puppeteer launches it with headless: 'shell' after npx puppeteer browsers install chrome-headless-shell. Playwright uses it by default in headless mode.
2. Capture clips of at most 8,000 CSS px with captureBeyondViewport and join them. The Puppeteer full page guide has a complete script that does this with sharp, and the Selenium guide does the same with Pillow.
3. Resize the window to the page height. It worked in the Chrome command line, but through Selenium it took 21 seconds and cut 143 px, because the window size includes browser UI.

Lazy images: the most common failure

A full-page capture does not scroll. The browser draws the whole document at once, but images that wait for scroll position or an IntersectionObserver never start to load. On our lazy page, with images that take 800 ms to arrive:

Playwright Chromium, Firefox and WebKit gave the same pattern within 15 points. Two lessons:

• Scrolling alone is not enough. The scroll finished before the last images arrived, so 40% stayed grey. You need the wait.
• Jumping straight to the bottom triggers almost nothing. Observers only see the element that is on screen at the moment they check.

This browser-side helper worked in Puppeteer, Playwright and Selenium (pass it to page.evaluate or execute_script):

// Runs inside the page. Returns when lazy images have loaded or after `timeout`.
async function preloadLazyContent({ pause = 150, maxHeight = 16000, timeout = 15000 } = {}) {
  const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
  for (const img of document.querySelectorAll('img[loading="lazy"]')) img.loading = 'eager';
  let y = 0;
  while (y < Math.min(document.documentElement.scrollHeight, maxHeight)) {
    y += window.innerHeight;
    window.scrollTo(0, y);
    await sleep(pause);
  }
  window.scrollTo(0, 0);
  const pending = [...document.images].filter((img) => img.getAttribute('src') && !img.complete);
  await Promise.race([
    Promise.all(pending.map((img) => img.decode().catch(() => {}))),
    sleep(timeout),
  ]);
}

One trap we hit while writing it: our first version filtered on img.currentSrc. An image whose src was set a moment before has an empty currentSrc, so the helper did not wait for it and the capture lost 2 of 20 images. Filter on the src attribute. The lazy-loading guide covers background images, infinite scroll and the cases this helper does not fix.

Fixed headers, cookie bars and 100vh heroes

Each capture method treats fixed elements differently. On the sticky page:

The fix is to change the page before the capture: pin fixed elements to the top of the document, drop bars anchored to the bottom, make sticky elements static, and freeze anything sized from the viewport height. This function did all four on our sticky page in every engine:

// Runs inside the page, after the page is scrolled to the top.
function neutralizeFixedElements() {
  window.scrollTo(0, 0);
  const vh = window.innerHeight;
  const boxes = [...document.querySelectorAll('body *')]
    .map((el) => [el, getComputedStyle(el).position, el.getBoundingClientRect()]);
  for (const [el, position, box] of boxes) {
    if (Math.abs(box.height - vh) < 2) el.style.setProperty('height', `${vh}px`, 'important');
    if (position === 'fixed') {
      if (box.top > vh / 2) el.style.setProperty('display', 'none', 'important');
      else el.style.setProperty('position', 'absolute', 'important');
    } else if (position === 'sticky') {
      el.style.setProperty('position', 'static', 'important');
    }
  }
}

It reads every layout box before it writes any style, so the page does not reflow once per element. On a real site, prefer exact selectors when you know them; the sticky header guide explains when the generic version hides too much.

Method by method

In the browser, by hand

• Chrome: open DevTools, press Cmd+Shift+P (macOS) or Ctrl+Shift+P, type "full size" and run Capture full size screenshot. It sends Page.captureScreenshot with captureBeyondViewport: true (we read this in the DevTools frontend source), so it shares the 16,384 px limit. The Chrome guide has a Console snippet that loads lazy images first.
• Firefox: right-click the page, choose Take Screenshot, then Save full page. The DevTools console command :screenshot --fullpage does the same from the keyboard. See the Firefox guide.
• Safari: in Web Inspector, right-click the <html> node and choose Capture Screenshot, or use File > Export as PDF. The Safari guide covers macOS and iPhone.

From the command line

# Chrome: the window height decides the image height
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless \
  --screenshot=page.png --window-size=1280,20000 --hide-scrollbars https://example.com

# Firefox: give only a width and it captures the whole page
firefox --headless --screenshot page.png --window-size=1280 https://example.com

Chrome needs you to know the height in advance; extra height becomes white space, and a 100vh hero grows with it. Firefox measured the page itself and captured our 40,000 px page correctly.

Puppeteer

import puppeteer from 'puppeteer';

const url = process.argv[2] ?? 'https://example.com';
const browser = await puppeteer.launch();
try {
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  await page.goto(url, { waitUntil: 'networkidle2' });
  await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
  await browser.close();
}

Add headless: 'shell' to launch() for pages taller than 16,384 device pixels, or use the clip-and-join script in the Puppeteer guide.

Playwright

import { chromium } from 'playwright';

const url = process.argv[2] ?? 'https://example.com';
const browser = await chromium.launch();
try {
  const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
  await page.goto(url, { waitUntil: 'load' });
  await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
  await browser.close();
}

Playwright's style option applies CSS only while the screenshot is taken, which is the cleanest way to hide a cookie bar. Its Firefox engine stops at 32,767 px. The Playwright guide has the full recipe.

Selenium

import sys

from selenium import webdriver

url = sys.argv[1] if len(sys.argv) > 1 else 'https://example.com'
options = webdriver.FirefoxOptions()
options.add_argument('-headless')
driver = webdriver.Firefox(options=options)
try:
    driver.set_window_size(1280, 800)
    driver.get(url)
    driver.get_full_page_screenshot_as_file('full-page.png')
finally:
    driver.quit()

get_full_page_screenshot_as_file exists only for Firefox. With Chrome, Selenium's save_screenshot returns the viewport, so you call the DevTools protocol yourself; the Selenium guide shows how to do that without hitting the 16,384 px limit.

Troubleshooting

The same capture with one API request

If you capture pages you do not control, the preparation code above becomes maintenance. RenderScreenshot runs the scroll for you when you use the full_page preset:

curl -G "https://api.renderscreenshot.com/v1/screenshot" \
  -H "Authorization: Bearer $RS_API_KEY" \
  --data-urlencode "url=https://example.com" \
  --data-urlencode "preset=full_page" \
  --data-urlencode "format=webp" \
  -o full-page.webp

To tune the scroll and remove a cookie bar, use POST:

curl -X POST https://api.renderscreenshot.com/v1/screenshot \
  -H "Authorization: Bearer $RS_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "capture": {
      "mode": "full_page",
      "scroll": { "simulate": true, "step": 800, "delay": 600, "max_height": 16000 }
    },
    "page": { "remove": ["#cookie-banner"] },
    "output": { "format": "webp", "quality": 80 }
  }' \
  -o full-page.webp

capture.scroll.max_height defaults to 16,000 px, which is below the 16,384 px point where our Chrome tests started to repeat content. We did not run the API in this test series, and its default cap would cut our 20,000 px page; if you raise max_height, check the bottom of the result. The full-page screenshot API guide lists every scroll parameter and the SDK calls, and capture parameters is the reference. You can create a free account and try the same URL; plan limits are on the pricing page.

Related guides

• Puppeteer full page screenshot: clip-and-join script, captureBeyondViewport, measured limits
• Playwright full page screenshot: style option, wheel scrolling, Firefox limit
• Selenium full page screenshot: Firefox native vs Chrome CDP vs stitching
• Screenshots of lazy-loaded images: five strategies measured
• Full page screenshots with sticky headers: four failure modes and the CSS fix