Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
With Playwright, set fullPage: true in page.screenshot():
await page.screenshot({ path: 'full-page.png', fullPage: true });That captures the full scrollable page rather than just the visible viewport. Puppeteer uses the same option. Below are complete TypeScript examples, guidance for choosing the capture area and handling output, and practical fixes for pages that are not ready when the screenshot runs.
Take a full-page screenshot with Playwright
A full-page screenshot is a capture of the page content across its scrollable height, not a picture of the browser window. In Playwright, the fullPage screenshot option defaults to false, which captures the current viewport. Set it to true when the entire page is needed.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallThis standalone TypeScript example launches Chromium, opens a page, navigates to a URL, writes a PNG, and closes the browser even if navigation or capture fails:
#1 Best Overall
import { chromium } from 'playwright';
async function main(): Promise<void> {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
await browser.close();
}
}
main().catch((error: unknown) => {
console.error(error);
process.exitCode = 1;
});Replace https://example.com with the page to capture. The output filename ends in .png, so Playwright infers PNG from the path. This example uses the Chromium launcher; Playwright’s API also provides browser launchers for Firefox and WebKit. Match the import and module syntax to the Playwright package and TypeScript configuration in your project.
Navigation and capture are separate steps
page.goto() navigates the page; page.screenshot() captures it. Keeping them in that order is the minimum workflow, but a completed navigation does not establish that every page-specific element—especially dynamically loaded or below-the-fold content—is ready to appear in the image. If the target depends on application data, animations, lazy loading, or user interaction, define readiness for that page and wait for it before taking the screenshot. Then inspect the image rather than assuming that the capture call confirms all content loaded.
Use Puppeteer instead
Puppeteer also supports fullPage: true; its option defaults to false. The capture call has the same shape, while the browser setup uses Puppeteer’s API:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
import puppeteer from 'puppeteer';
async function main(): Promise<void> {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'full-page.png', fullPage: true });
} finally {
await browser.close();
}
}
main().catch((error: unknown) => {
console.error(error);
process.exitCode = 1;
});As with Playwright, replace the example URL, and arrange any page-specific readiness before capturing. For projects already using one of these libraries, the simplest choice is usually to use that library’s existing browser and page rather than introduce a second automation stack just for one screenshot option.
Choose the capture area
| What you need | Playwright | Puppeteer |
|---|---|---|
| The visible viewport | Call page.screenshot() without fullPage; the default is false. |
Call page.screenshot() without fullPage; the default is false. |
| The full scrollable page | Call page.screenshot({ fullPage: true }). |
Call page.screenshot({ fullPage: true }). |
| One component or element | Use locator.screenshot(). |
Use ElementHandle.screenshot(). |
Use a viewport capture when the task is to record what fits on screen at a particular moment. Choose a full-page capture for a page-length record, such as a whole article. Choose an element capture when the deliverable should be one component rather than the whole document. These APIs capture page contents; they do not capture the browser’s URL bar or other application chrome.
Control the viewport and page state
The screenshot captures the page as rendered under the browser context’s viewport and current page state. Set the viewport before navigation when the page’s responsive layout matters. Puppeteer’s Page documentation notes that changing the viewport can cause a reload in some cases and recommends setting it before navigation for sites that do not expect mobile properties to change.
For example, create a page with a chosen viewport before visiting the site:
const page = await browser.newPage({
viewport: { width: 1440, height: 900 }
});
await page.goto('https://example.com');
await page.screenshot({ path: 'desktop-full-page.png', fullPage: true });The example sets dimensions, not a guarantee that the site will render identically across machines or browser versions. If the target layout depends on a device profile or other context settings, configure those in the browser context before navigation and keep them consistent in repeat captures. A full-page option changes the captured extent; it does not itself decide which responsive layout the site uses.
Save to a file or keep the image in memory
In Playwright, setting path saves the screenshot to that file. If you omit path, the call returns screenshot data as a buffer, which you can pass to another part of your Node.js or TypeScript program instead of writing it directly to disk:
const image = await page.screenshot({ fullPage: true });
// image is screenshot data; pass it to your storage or processing code.For file output, the filename extension determines the screenshot type in Playwright. Use a matching extension for the intended image format. The API also exposes other screenshot options, including clipping, animation behavior, caret visibility, masking locators, background handling, and scale controls. Their availability and defaults can vary with the installed version, so check the API reference for the Playwright version used by your project before relying on a particular option.
Puppeteer’s screenshot options include path, type, encoding, clip, omitBackground, and fullPage. Consult the Puppeteer API documentation corresponding to your installed package version for exact option behavior and defaults.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsCapture one element instead of the whole page
A full-page image can include large areas irrelevant to the task. If you need a single chart, card, or other component, use the library’s element-specific screenshot API instead of capturing the entire document. In Playwright, that is locator.screenshot(); Puppeteer provides ElementHandle.screenshot(). The element must be identifiable in the page and ready to capture. If it is not present or visible when the call runs, address that in the page-specific setup rather than assuming a full-page screenshot option will target it.
Best Value
Use screenshots for visual checks
If the goal is visual regression testing rather than simply producing an image file, Playwright Test includes screenshot assertions and supports full-page screenshot configuration. Those screenshot assertions are for the Playwright test runner; they are not a generic assertion API for any script that happens to import Playwright. Use the test runner’s documented workflow when you want a screenshot comparison as part of a Playwright test.
Common problems and practical fixes
- The image only shows the top of the page. Check that the call includes
fullPage: true. If it is omitted, the documented default is a viewport capture. - The screenshot is missing content lower on the page. A full-page capture does not establish that lazy-loaded or other dynamic content has finished loading. Add an application-specific readiness step before capture, and examine the resulting file.
- The layout is the wrong size or breakpoint. Set the viewport before navigation when dimensions affect the responsive layout. In Puppeteer, viewport changes can reload a page in some cases.
- The file is not where you expect. Check the value of
pathand the process’s working directory. When using Playwright, make sure the filename extension matches the format you want, because it is inferred from the filename. - You need an image for another function rather than a file. In Playwright, omit
pathand use the returned buffer. Ensure the downstream code accepts the binary screenshot data. - You expected the address bar in the image. These APIs capture page contents, not browser chrome. A page screenshot is not a screenshot of the whole desktop or browser window.
- The screenshot call or an option behaves differently in another project. Verify the installed library version and consult its matching API reference. Do not assume option defaults or availability from documentation for a different release.
- The browser stays open after a failure. Put browser cleanup in a
finallyblock, as in the examples, so the close call runs whether navigation and capture succeed or throw.
Or skip the browser setup
If you want a full-page screenshot from a request instead of managing a browser in your TypeScript application, ScreenshotNeo offers a website screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP, or PDF. The API accepts the target URL and returns a clean screenshot; see the ScreenshotNeo API documentation for request options and response details.
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Use your API key in place of YOUR_API_KEY. In a TypeScript project, the JavaScript shown is valid TypeScript syntax; add your application’s response handling to save or process the returned result. The one-call example uses the API base directly; configure further capture options according to the documentation.
ScreenshotNeo’s stated differentiators are practical for unattended captures: it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture, with each step independently switchable. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots. See ScreenshotNeo for product details, or sign up free to start with 1,000 screenshots a month and no card.
Which approach should you use?
Use Playwright or Puppeteer when the screenshot belongs in an existing browser-automation workflow, when you need direct access to the browser page, or when you are building a test around that page. Set fullPage: true for the full scrollable document, and use an element screenshot when only one component is needed. A screenshot API is an alternative when you want to make a request rather than launch and manage browser automation in your own code.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
