How to Take Full-Page Website Screenshots with Playwright in Node.js

To capture an entire webpage with Playwright in Node.js, navigate to it and set fullPage: true in page.screenshot(). The option captures the full scrollable page instead of only the visible viewport. [Playwright Page API]

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'screenshot.png', fullPage: true });
  } finally {
    await browser.close();
  }
})();

This is a complete CommonJS script. It saves screenshot.png in the current directory and closes the browser even if navigation or capture fails. Install Playwright and its browser before running it:

npm install playwright
npx playwright install chromium

Use import { chromium } from 'playwright'; instead of require in an ES module project. Playwright supports Node.js JavaScript and TypeScript; choose the syntax that matches your project. [Supported languages]

1. What fullPage does

By default, a screenshot covers the current viewport. Setting fullPage: true captures the full scrollable page. It does not mean that every site-specific lazy-loaded item, infinite-scroll result, or asynchronously rendered section is guaranteed to appear: those behaviors may need preparation specific to the page. [Playwright Page API]

The basic sequence is:

Launch a browser.
Create a page and navigate to the target URL.
Wait for any content your target page needs to render.
Capture with fullPage: true.
Close the browser in a finally block.

2. Save to a file or return an image buffer

The path option writes the screenshot to disk. Playwright infers the image format from the filename extension. If you omit path, page.screenshot() returns a buffer, which is useful when you need to send the image to another function or service.

const image = await page.screenshot({ fullPage: true });
// image is a Buffer

PNG, JPEG, and WebP are supported. JPEG quality can be configured; quality does not apply to PNG. Choose PNG when you want lossless output, or JPEG/WebP when a smaller image is useful and their encoding characteristics suit your use case. Confirm the receiving system supports the format you choose.

3. Configure screenshot output

Option	Effect	When to use it
`fullPage`	Captures the full scrollable page when `true`; defaults to `false`.	Use for a whole-page image rather than a viewport capture.
`path`	Writes the image to a file; the extension determines the format. Omit it to receive a buffer.	Use a path for a saved artifact, or a buffer for further processing.
`type`	Selects PNG, JPEG, or WebP output.	Specify the format when it should not be inferred from the path.
`quality`	Sets JPEG quality. It has no effect on PNG.	Use when tuning JPEG size and visual quality.
`scale`	`'css'` creates one image pixel per CSS pixel; `'device'` uses device pixels and may produce a larger high-DPI image.	Choose based on desired dimensions and pixel density.
`animations`	Controls CSS and Web Animations during capture. Finite animations are fast-forwarded; infinite animations are canceled to their initial state for capture and played afterward.	Use to reduce animation-related variation when that behavior fits the page.
`mask`	Covers elements matching specified locators with a colored overlay.	Use to obscure dynamic or sensitive regions in the output.
`style`	Applies a stylesheet during capture.	Use to hide or adjust page elements for a capture.
`omitBackground`	Allows transparency for formats that support it; it does not apply to JPEG.	Use when a transparent background is needed.
`timeout`	Sets the maximum screenshot operation time. The screenshot option documents a default of zero, with the effective default adjustable through page or context timeout configuration.	Set deliberately for your capture environment and page complexity.

These controls affect capture output but do not guarantee identical images across runs or websites. Content and site behavior can change. See the Page screenshot API for the complete option details.

For a basic page, page.goto() followed by a screenshot is often enough. Playwright documents that explicitly calling page.waitForLoadState() is usually unnecessary in most cases. A load state also cannot guarantee that a site has finished every application-specific update. [BrowserContext API]

If the screenshot misses content, first identify how that page reveals it. It may load after a selector appears, after an asynchronous update, or only as the user scrolls. Add a targeted wait or page-specific scrolling/preparation where needed, then inspect the resulting image. There is no universal wait that reliably handles every lazy-loading or infinite-scroll implementation.

5. Full runnable example with output settings

This version specifies a WebP output path, full-page capture, CSS-pixel scaling, and disabled animations. Remove or change options that do not fit your capture; for example, use PNG if you need PNG output.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  try {
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.screenshot({
      path: 'page.webp',
      fullPage: true,
      type: 'webp',
      scale: 'css',
      animations: 'disabled'
    });
  } finally {
    await browser.close();
  }
})();

6. Use the right workflow for one-off capture or tests

A standalone script is suitable for a one-off image capture. If screenshots are part of repeatable UI checks, Playwright for Node.js also includes a test runner with parallelization, screenshot assertions, an HTML reporter, and automatic tracing. Capturing a page image and asserting against a screenshot are related, but distinct tasks. [Playwright supported languages and test runner overview]

7. Troubleshooting

Symptom	Likely cause	What to do
Only the visible area appears	`fullPage` is omitted or false.	Set `fullPage: true` in the screenshot options.
No image file appears	No `path` was supplied, or the path points somewhere unexpected.	Set an explicit path. If you omitted it intentionally, use the returned buffer.
The script cannot launch a browser	The browser binary may not be installed for the Playwright package.	Install the browser required by your script with Playwright’s browser installation command.
The page is blank or incomplete	Navigation failed, content is asynchronous, or the page requires site-specific interaction or scrolling.	Check the target URL and navigation outcome, then add a targeted wait or preparation for the missing content and inspect the result.
The screenshot differs between runs	Dynamic content, animation, or page state changed.	Use animation controls, a capture stylesheet, or a mask when appropriate, and make page setup repeatable. These options do not guarantee identical output.
Output is unexpectedly large	Device-pixel scaling or a large full-page image increases pixel dimensions.	Consider `scale: 'css'` or JPEG/WebP where suitable, and check the output dimensions and format requirements.
Transparent background is missing	The selected format may not support the requested transparency; JPEG does not support `omitBackground`.	Choose a format that supports transparency and set `omitBackground: true`.

8. Performance, reliability, and cost

A full-page image contains more pixels than a viewport image when the page is tall, so it can take more time to encode and use more memory or storage. Device-pixel scale can increase image dimensions further. Pick the smallest scale and image format that meet the output requirements, and avoid capturing pages or running parallel browser work beyond what your environment can handle.

Reliability depends on browser startup, successful navigation, and the target site’s rendering behavior. Close the browser in a finally block so it is cleaned up after success or failure. A context can also be closed to close its pages. [BrowserContext API]

Playwright is software you run in your own environment; this workflow does not introduce a per-screenshot ScreenshotNeo charge. Your costs are the compute, storage, and operational resources you use to run and retain captures.

9. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns an image or PDF. See the ScreenshotNeo API documentation.

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

10. FAQ

Can I use Firefox or WebKit instead of Chromium?

Yes. The Page API documents the same screenshot workflow with WebKit and notes that Chromium or Firefox can also be used. Pick the browser that matches your needs. [Page API]

Does a full-page screenshot scroll the page like a person?

The documented option captures the full scrollable page. Do not assume that this alone triggers every site’s scroll-dependent loading behavior.

Can I capture just one element?

The title’s workflow is for a full-page capture. If you need a different capture scope, consult the Page API for screenshot options and locator methods.

Can I save the screenshot without writing to disk?

Yes. Omit path and use the buffer returned by page.screenshot().