How to Take a Full-Page Screenshot of Any Website

"How do I screenshot an entire web page?" is one of the most common browser questions there is. The usual screenshot shortcut only captures what fits on the screen, so a long landing page, a checkout flow, or a documentation article gets cut off at the fold.

The good news: every major browser can capture a full scrolling page without installing anything. And when you need hundreds of screenshots, or fresh screenshots on every release, you can automate the whole job with a script or an API.

In this guide you will learn:

• the fastest built-in method for Chrome, Firefox, Edge, Safari, iPhone, and Android;
• the keyboard shortcuts for Windows and Mac in one table;
• why full-page screenshots sometimes come out blank or broken, and how to fix them;
• how to automate captures with Playwright or a screenshot API;
• how QA teams use full-page screenshots as release evidence.

Quick answer: how do you take a full-page screenshot?

To take a full-page screenshot in Google Chrome without an extension:

1. Open the page and press F12 (Windows) or Cmd + Option + I (Mac) to open DevTools.
2. Press Ctrl + Shift + P (Windows) or Cmd + Shift + P (Mac) to open the Command Menu.
3. Type screenshot and choose Capture full size screenshot.
4. Chrome saves a PNG of the entire page, from header to footer, to your Downloads folder.

In Firefox, press Ctrl + Shift + S (Cmd + Shift + S on Mac) and click Save full page. In Microsoft Edge, press Ctrl + Shift + S and choose Capture full page. To capture pages automatically, use a headless browser such as Playwright with fullPage: true, or a screenshot API.

What is a full-page screenshot?

A full-page screenshot is a single image of the entire web page, including everything below the fold that you would normally have to scroll to see. It is sometimes called a scrolling screenshot or a long screenshot.

There are three types of browser capture, and it helps to know which one you need:

Full-page screenshot methods at a glance

Full-page screenshot shortcuts for Windows and Mac

Note: the operating system shortcuts, Win + Shift + S on Windows and Cmd + Shift + 4 / 5 on Mac, capture only the visible screen. They do not scroll.

How to take a full-page screenshot in Chrome

Chrome hides its full-page capture inside DevTools, but it works on almost every site.

1. Open the page you want to capture and let it finish loading.
2. Open DevTools with F12, Ctrl + Shift + I (Windows/Linux), or Cmd + Option + I (Mac).
3. Open the Command Menu with Ctrl + Shift + P or Cmd + Shift + P.
4. Type screenshot and pick Capture full size screenshot.

Other screenshot commands in Chrome DevTools

• Capture screenshot: only the visible viewport.
• Capture node screenshot: one selected element, such as a pricing table or hero section.
• Capture area screenshot: drag to select a custom region.

Capture the mobile version of a page from desktop

Turn on the device toolbar (Ctrl + Shift + M / Cmd + Shift + M), pick a phone preset, and run Capture full size screenshot. You get the full mobile layout without touching a phone, which is handy for responsive design reviews.

How to take a full-page screenshot in Firefox

Firefox has the most direct built-in option:

1. Press Ctrl + Shift + S (Windows/Linux) or Cmd + Shift + S (Mac), or right-click the page and choose Take Screenshot.
2. Click Save full page in the top-right corner.
3. Choose Download or Copy.

You can also hover over a block of the page and click it to capture only that element.

How to take a full-page screenshot in Microsoft Edge

1. Press Ctrl + Shift + S, or open the … menu and choose Screenshot.
2. Select Capture full page.
3. Save, copy, or draw on the result.

Edge is built on Chromium, so the Chrome DevTools method works here too.

How to take a full-page screenshot in Safari on Mac

Safari on macOS has no one-click full-page button, but the Web Inspector can do it:

1. Enable developer tools: Safari → Settings → Advanced → Show features for web developers.
2. Open the page and press Cmd + Option + I.
3. In the Elements tab, right-click the <html> element and select Capture Screenshot.

If you need a document rather than an image, File → Export as PDF saves the whole page as a single PDF.

How to take a full-page screenshot on iPhone and iPad

1. Open the page in Safari.
2. Take a normal screenshot: Side button + Volume up (or Home + Side/Top button on devices with a Home button).
3. Tap the preview thumbnail in the corner.
4. Switch to the Full Page tab at the top.
5. Tap Done and choose Save PDF to Files.

iOS saves full-page captures as PDF, not PNG. If you need an image, use a desktop browser or an API instead.

How to take a scrolling screenshot on Android

On most phones running Android 12 or newer:

1. Take a normal screenshot (Power + Volume down).
2. Tap Capture more (Pixel) or the scroll capture icon (Samsung and other brands).
3. Drag the crop handle down to include the whole page, then save.

Which image format should you save?

For anything you plan to compare later, PNG is the safest choice. Lossy compression creates tiny pixel differences that make visual diffs noisy.

Why full-page screenshots sometimes look broken

If a capture has blank areas, repeated headers, or missing images, the page is usually the cause, not the tool.

These are the same problems QA teams fight in visual testing: a screenshot is only useful as evidence when it is stable and repeatable.

How to automate full-page screenshots with code

Manual captures are fine for one page. They do not scale when you need screenshots of every page after each deploy, desktop and mobile versions of the same flow, or visual proof attached to a failed test.

With Playwright, the capture itself is a single option, fullPage: true:

import { chromium } from 'playwright';

const browser = await chromium.launch();
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 });
await browser.close();

Puppeteer uses the same option: page.screenshot({ path: 'full-page.png', fullPage: true }).

The catch is everything around that call. Someone has to:

• install and update browser binaries;
• run them on a server or in CI with enough memory;
• handle timeouts, retries, and custom fonts;
• dismiss cookie banners and popups;
• store, name, and clean up thousands of images.

For many teams that infrastructure costs more time than the screenshots are worth.

Use a website screenshot API when you need scale

A screenshot API moves the headless browser to a service. You send a URL and a few options, and you get an image or PDF back. No browser fleet to maintain.

For example, SnapshotFlow is a website screenshot API built on Puppeteer that captures pages as PNG, JPEG, WebP, or PDF. A full-page capture is one authenticated request:

GET https://api.snapshotflow.com/screenshot?url=https://example.com&full_page=true&format=png&width=1440

Beyond basic captures, it covers jobs that usually need custom scripts:

• Batch capture of up to 10 URLs in parallel with one request.
• Visual diffs that compare two page versions pixel by pixel and report what changed.
• Content extraction that returns Markdown, HTML, or text alongside the image.
• Mobile and dark-mode emulation, plus ad, tracker, and cookie-banner blocking.
• Async jobs with webhooks for long pages and large batches.
• An MCP server, so AI assistants such as Claude can take screenshots and run visual diffs as tools.

Manual vs. script vs. API

What to check when choosing a screenshot API

Well-known options in this category include ScreenshotOne, Urlbox, ApiFlash, and CaptureKit. Whichever you evaluate, check:

1. Rendering quality on real single-page apps, custom fonts, and lazy-loaded content.
2. Full-page reliability on very tall pages and sticky layouts.
3. Blocking options for cookie banners, ads, and chat widgets.
4. Output formats: PNG, JPEG, WebP, and PDF.
5. Visual diff support if you want to detect changes, not just store images.
6. Async and batch support for many URLs.
7. AI agent integration through MCP if your team works with Claude or Cursor.
8. Price per screenshot at your real volume, not at the free tier.

Full-page screenshots in QA and E2E testing

Screenshots are not only for marketing pages and bug reports. In browser testing they are a core part of release evidence.

Screenshot API or E2E testing tool?

A practical split many teams use:

• Screenshot API for broad visual monitoring of many public URLs: marketing pages, docs, competitor pages, SEO audits.
• E2E testing tool for logged-in user flows such as signup, checkout, and settings, where the test must click, type, and assert before a screenshot means anything.

E2Easy records those critical flows without code and keeps screenshots and run history for every step, so a failed run already contains the evidence your team needs. If you work with AI assistants, the E2Easy MCP server lets Claude create and run browser tests from chat.

Full-page screenshot checklist

Before you share or compare a screenshot, confirm:

• the page fully loaded, including lazy images;
• cookie banners and popups are dismissed or blocked;
• the viewport width matches the device you care about;
• animations are paused and test data is stable;
• the file is PNG if you will diff it later;
• the file name includes the page, viewport, and date.

FAQ

Can I take a full-page screenshot without an extension?

Yes. Chrome and Edge include full-page capture in DevTools, Firefox and Edge have a built-in screenshot tool with a full-page option, Safari can capture the html element in Web Inspector, and iPhone and Android support scrolling screenshots natively.

What is the shortcut for a full-page screenshot in Chrome?

There is no single shortcut. Press F12 then Ctrl + Shift + P on Windows (or Cmd + Option + I then Cmd + Shift + P on Mac), type screenshot, and choose Capture full size screenshot.

Why is my full-page screenshot blank at the bottom?

The page most likely uses lazy loading, so images below the fold had not loaded yet. Scroll to the end of the page before capturing, or wait for the network to go idle in an automated script.

How do I take a full-page screenshot on Windows 11?

Windows' built-in Snipping Tool (Win + Shift + S) cannot scroll. Use the browser instead: Ctrl + Shift + S in Edge or Firefox, or the DevTools command in Chrome.

How do I take full-page screenshots of many websites at once?

Use a Playwright or Puppeteer script, or a screenshot API with batch support. An API is usually faster to set up because you do not host and maintain browsers yourself.

Is a screenshot API better than Playwright?

It depends on the job. A screenshot API is simpler for capturing public URLs at scale. Playwright or an E2E testing tool is better when you need to log in, interact with the page, and assert results before capturing.

Can full-page screenshots be used for visual regression testing?

Yes. Capture the same page before and after a change with identical viewport, data, and blocking settings, then compare them with a visual diff. Stable inputs matter more than the capture tool.

Capture once, or capture every release

For a one-off capture, the browser you already use is enough: DevTools in Chrome, Save full page in Firefox, Capture full page in Edge, or the Full Page tab on iPhone.

When screenshots become part of how you ship, automate them. Use a screenshot API for wide visual coverage, and an E2E testing tool to record your critical user flows and keep screenshot evidence for every test run.