To capture a page beyond the visible viewport, navigate to it and call page.screenshot({ fullPage: true }). Add a path to save the image; omit it to receive image bytes you can process in code.
Capture the full page to a file
In Playwright, fullPage: true requests an image of the full scrollable page instead of just the current viewport. The default is false, so page.screenshot() alone captures only what is visible. See the Playwright Page API.
As an Amazon Associate I earn from qualifying purchases.
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();The file extension determines the image format. For a script that should clean up the browser even if navigation or capture fails, use try/finally:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsimport { chromium } from 'playwright';
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();
}Return the screenshot as bytes
If another part of your program needs the image rather than a file path, omit path. The screenshot method returns a buffer, which you can pass to image-processing code or a comparison tool.
#1 Best Overall
const image = await page.screenshot({ fullPage: true });
// Pass image to the next step, or write it to a file:
await import('node:fs/promises').then(({ writeFile }) =>
writeFile('screenshot.png', image)
);The Playwright Screenshots guide documents both file and buffer workflows.
Choose the right capture scope
Full scrollable page
Use fullPage: true when the output should include the page below the viewport. This requests the full scrollable page; it does not establish that every site-specific lazy-loading mechanism will be triggered.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
One element
For a single component, take a locator screenshot instead of capturing the entire page:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →await page.getByRole('main').screenshot({ path: 'main.png' });A locator screenshot is clipped to the element’s size and position. For a scrollable element, only its currently scrolled content is included; it does not automatically capture the element’s entire internal scroll area. Playwright recommends locator-based screenshots rather than elementHandle.screenshot(). See the ElementHandle API.
Rank #3
Specific rectangle
Use clip when you want a defined region rather than a full page or element. It accepts a rectangle to capture. Choose the scope that matches the output you need; these methods produce different image contents.
Options that affect image output
These options control dimensions, format, or the captured appearance. Check the Page API for the API details available to your installed Playwright version.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
| Option | Effect | When to consider it |
|---|---|---|
fullPage |
Captures the full scrollable page rather than only the viewport; defaults to false. |
When content below the fold belongs in the image. |
path |
Saves the screenshot to a file. The extension determines the image type. | For a direct file output; omit it to retain the returned buffer. |
scale |
css produces one image pixel per CSS pixel; device uses device pixels and can produce larger high-DPI output. |
Choose based on whether consistent CSS-sized output or device-pixel detail matters. |
type and quality |
Supported formats include JPEG and WebP, with quality controls where applicable. JPEG quality defaults to 80; PNG does not use the quality option. | When choosing output format and balancing image size and quality. |
animations |
Controls treatment of finite and infinite animations. | For more stable test images, while accounting for the fact that disabling animations changes the captured state. |
mask and maskColor |
Masks selected locator regions; the documented default mask color is pink. | When variable regions would otherwise make visual comparisons noisy. |
clip |
Limits the capture to a specified rectangle. | When only a particular page region is wanted. |
omitBackground |
Allows a transparent background where supported; it does not apply to JPEG. | When the image will be placed over another background. |
Handle pages that load content while scrolling
Some pages load images or additional items only as a visitor scrolls. The documented meaning of fullPage is to capture the full scrollable page; the API documentation does not promise that it will scroll through the page and trigger every site’s lazy loaders.
If content is missing, identify how that particular page loads it and make the loading behavior explicit before capture. For example, wait for a known selector or implement a site-specific scroll-and-wait sequence, then inspect the resulting image. There is no universal lazy-loading workaround guaranteed by the documented full-page option.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use screenshot assertions for visual tests
For a saved image, call page.screenshot(). For a Playwright Test visual assertion, use expect(page).toHaveScreenshot() instead:
import { test, expect } from '@playwright/test';
test('page matches its visual baseline', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot();
});The assertion waits for two consecutive page screenshots to match, then compares the last screenshot against the expectation. Rendering can vary with the operating system, browser version, settings, hardware, power source, headless mode and other conditions. Keep the environment consistent for baselines and review intentional screenshot changes. See Playwright’s PageAssertions API and Visual comparisons guide.
Troubleshoot common capture problems
- The image shows only the visible area: Set
fullPage: true; a plain screenshot defaults to the current viewport. - Images or items below the fold are absent: The page may load them only on scroll. Make that page’s loading behavior explicit and inspect the result rather than assuming full-page capture triggers it.
- A component image cuts off its contents: A locator screenshot captures the element’s bounds, and a scrollable element shows only its currently scrolled content. Scroll the element to the required position or use a page-level approach suited to the desired output.
- The image is much larger than expected: Check whether
scale: 'device'is producing device-pixel output; usescale: 'css'for one pixel per CSS pixel. - Visual tests vary between runs or machines: Check host operating system, browser version, browser settings and headless configuration, and run comparisons in a consistent environment.
- A transparent-background option has no effect:
omitBackgrounddoes not apply to JPEG; choose a supported format if transparency is needed.
Or skip the browser setup
ScreenshotNeo offers a one-request screenshot API. Its clean-shot steps can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers report the page verdict and billing status. An MCP server provides screenshot tools for AI agents, and the free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo also supports full-page captures with lazy images loaded, and can return PNG, JPEG, WebP or PDF. Learn more at ScreenshotNeo. Sign up for 1,000 free screenshots a month, with no card required.
Frequently Asked Questions
Does fullPage: true mean Playwright scrolls the page to trigger lazy loading?
The Page API describes capturing the full scrollable page but does not promise that every site’s lazy-loading behavior will be triggered. Verify pages that load content on scroll.
Should I use page.screenshot() or toHaveScreenshot()?
Use page.screenshot() to save or process an image. Use Playwright Test’s expect(page).toHaveScreenshot() for a visual assertion against a baseline.
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.
