Full-Page Website Screenshots: Capture Entire Pages

A full-page website screenshot captures the whole scrollable document, including content below the browser’s visible window. For a quick manual capture, Firefox Developer Tools has an entire-page screenshot control. For repeatable work, use Playwright’s fullPage: true screenshot option or its command-line interface. If you only need one component, capture that element instead of the whole page.

Choose a workflow based on whether you need a one-off image or a repeatable capture, and whether the target is the whole page or one element. Full-page capture is useful for documenting a bug, reviewing a long layout, or keeping a visual record. It does not by itself inspect the page’s structure or tell you what its text means.

1. Choose the right full-page screenshot method

Need	Use	Why
One screenshot by hand	Firefox Developer Tools	Built-in entire-page capture without writing code.
Repeated or scripted screenshots	Playwright API	Capture from a browser automation script and save to a chosen path.
Capture from a terminal	Playwright CLI	Run a screenshot command with a full-page option.
One component, not the page	Firefox Screenshot Node or a targeted automation capture	A whole-page image can make a small component difficult to inspect.

The official workflows covered here are documented for Firefox and Playwright. They do not establish a feature comparison across every browser and operating system, so use the workflow available in your environment and inspect the resulting image.

2. Take an entire-page screenshot in Firefox

1. Open the page you want to capture.
2. Open Firefox Developer Tools.
3. Open Developer Tools settings and find “Available Toolbox Buttons.”
4. Enable “Take a screenshot of the entire page.”
5. Use the screenshot icon in the Developer Tools toolbar to capture the page.
6. Find the saved image in the browser’s Downloads directory and inspect it.

Firefox also documents a separate “Screenshot Node” action for capturing one inspected element. Use that when the question is about a specific card, navigation bar, or other component rather than the entire scrollable page.

When the manual workflow fits

Use Firefox’s built-in control for occasional captures, bug reports, or a visual check where you do not need to repeat the same operation at scale. It avoids setting up a script. If the capture becomes a recurring task, scripting makes the target URL, output filename, and capture behavior easier to repeat consistently.

3. Capture a full page with Playwright

Playwright’s screenshot API accepts fullPage: true. The option captures the full scrollable page as though it fit on a very tall screen. A minimal example for an existing Playwright project is:

await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png', fullPage: true });

Here is a complete Node.js example using Playwright’s library. Install the package and browser first, then save the script as full-page.js and run it with Node.js.

npm install playwright
npx playwright install chromium

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

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

The viewport sets the browser’s initial width and height, which can affect responsive layout. fullPage: true changes the screenshot extent to the full scrollable page. Set the viewport to the width you want to document; a narrow viewport can trigger a mobile layout, while a wider one may expose desktop navigation.

Use a selector when the page is not the target

A full-page capture is not always the most useful output. If you need one inspected element, use the browser’s element capture or target the component with the automation approach you use. Be explicit about the target: a full-page image answers “what does the whole document look like?” while a component image answers “what does this part look like?”

4. Run a full-page capture from the command line

Playwright’s CLI includes a screenshot command with a --full-page option. For example:

npx playwright screenshot --full-page --filename=full-page.png https://example.com

The CLI screenshot command also documents format selection and a high-resolution option. Use the filename extension and any supported CLI flags to match the output you need. This workflow is convenient for a one-off terminal capture or for a small script that invokes a command. Use the API when your job needs browser setup, navigation choices, or other programmatic control.

5. Make captures of dynamic pages more dependable

A full-page option defines the capture extent; it does not guarantee that every site has finished rendering all of its content. Some pages reveal content as you scroll, load images lazily, or update after the initial navigation. The documented API example establishes how to request a full-page capture, but it does not establish universal behavior for every dynamic site.

• Inspect the saved image. Check the top, middle, and bottom for missing sections, unexpected gaps, or a layout that differs from the page.
• Use the expected layout width. Set an intentional viewport so responsive breakpoints do not change the page unexpectedly.
• Wait for the content you care about. When a page has a known section that appears after navigation, wait for that section in your automation before taking the screenshot.
• Consider scroll-revealed content. If images or sections load only as the visitor scrolls, a single full-page call may not produce the result you expect. Check the output and adjust your capture flow for that site.
• Capture only what you need. Very long documents produce tall images that can be unwieldy to view, share, or compare. A specific element or a smaller page region may be easier to review.

6. Troubleshooting full-page screenshots

Symptom	Likely cause	What to try
The image shows only the visible window	The capture used the default viewport screenshot behavior.	In Playwright, set fullPage: true; with the CLI, include --full-page. In Firefox, enable and use the entire-page screenshot control.
Content below the fold is missing	The content may not have loaded yet or may appear only after scrolling.	Inspect the page behavior, wait for the relevant content, capture again, and examine the output.
The page looks like the wrong layout	The chosen viewport width triggered a different responsive breakpoint.	Choose a viewport width that matches the layout you intend to document.
The output is too tall to use	The page has a large scrollable document.	Capture the relevant element or document a smaller target when the full document is not necessary.
A component is hard to read in the full-page image	The image scales the whole document into one view.	Capture that component by itself, such as with Firefox’s Screenshot Node action.
The CLI command does not run	Playwright or its browser installation may not be available in the project environment.	Install Playwright and the browser required by your setup, then retry the documented CLI command.

7. Performance, reliability, and output considerations

A full-page screenshot has to represent more of the document than a viewport capture, so the output can be very tall. That affects how practical the image is to open, share, compare, or attach to a report. Decide whether reviewers need the entire document at once or a few focused captures.

For repeatability, keep the URL, viewport, browser choice, and output filename explicit in your script. Those choices make it easier to understand why two captures differ. A successful command is not proof that all deferred content appeared; visual inspection remains important, especially on pages that reveal content as the visitor scrolls.

The cited browser and Playwright documentation describes available capture workflows, not a universal reliability guarantee or a benchmark across sites. Test the target pages that matter to your own workflow and account for pages that require interaction, authentication, or delayed rendering.

8. Or skip the browser setup

If you need a repeatable capture without installing and maintaining browser automation, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns an image or PDF. See the API documentation for request options.

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

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)

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

• Cookie banners, popups, and chat widgets are removed before the shot.
• Bot checks, blank pages, and failed loads are never billed.
• An MCP server lets AI agents take screenshots.
• 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.

Sign up free for 1,000 screenshots a month, with no card required.

9. Frequently asked questions

What is a full-page screenshot?

It is an image of the page’s full scrollable document, including content below the visible browser window.

Can I capture just one element?

Yes. Firefox Developer Tools documents a Screenshot Node action for the inspected element. Element capture is a better fit when the whole page would make the subject too small.

Can a full-page screenshot include content that appears on scroll?

It depends on how the site loads and reveals that content. Inspect the result and adapt the capture flow for pages that load content as the visitor scrolls.

Which workflow should I use for repeated screenshots?

Use Playwright’s API or CLI when you need a repeatable, scripted capture. Use Firefox Developer Tools for a quick one-off screenshot.