The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Use a Playwright locator’s screenshot() method: await page.locator('.header').screenshot({ path: 'element.png' }); Playwright scrolls the matched element into view, checks that it is actionable, and saves an image clipped to its bounds. You can also omit path and use the returned buffer in memory.
Capture an element with a locator
Here is a runnable Node.js example using Playwright’s asynchronous API. Replace the URL and selector with the page and element you need:
As an Amazon Associate I earn from qualifying purchases.
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com');
await page.locator('.header').screenshot({ path: 'element.png' });
} finally {
await browser.close();
}
})();The filename extension determines the saved image format. Playwright supports PNG, JPEG, and WebP; PNG is the documented default when no type is specified. See the official Locator API and Screenshots guide.
Free tools Windows power users keep installed
One-click scans. No signup required.
Choose a locator that identifies the right element
A CSS selector works when it is specific and stable, such as .header. For interfaces with meaningful accessibility labels, a role-based locator can be clearer:
#1 Best Overall
await page.getByRole('link', { name: 'Pricing' }).screenshot({ path: 'pricing-link.png' });Locators are resolved when the screenshot action runs, so they can work with elements rendered after navigation. If the locator matches no element or the target disappears before capture, the operation cannot produce the requested image.
Save a file or use the image buffer
Providing path writes the screenshot to disk. Without it, locator.screenshot() returns a buffer, which is useful when you want to upload, inspect, or otherwise process the image without first saving a local file:
const image = await page.locator('.header').screenshot();
// image is a BufferThe returned buffer contains the image bytes. Choose the output type with the type option when needed; supported values are png, jpeg, and webp. When saving to a path, use a matching extension to make the intended format clear.
Control animation and pixel scale
For repeatable visual captures, disable motion and select an output scale explicitly:
await page.locator('.header').screenshot({
path: 'header.png',
animations: 'disabled',
scale: 'css'
});animations: 'disabled'disables CSS animations, transitions, and Web Animations for the capture. Finite animations are fast-forwarded to completion, firingtransitionend; infinite animations are canceled to their initial state for the screenshot and then resume afterward.scale: 'css'produces one output pixel per CSS pixel.scale: 'device'uses device pixels and can create a larger image on high-DPI displays. The documented default isdevice.styleaccepts CSS to apply during the screenshot. It can hide changing elements or otherwise make captures more consistent; the injected style pierces Shadow DOM and applies to inner frames.
Option defaults can differ by Playwright release or language binding. Check the Locator API documentation for the version installed in your project.
Understand what the element screenshot includes
The result is clipped to the matched element’s bounds, not a screenshot of the entire page. Playwright scrolls the element into view and performs actionability checks first. Content covered by another element remains covered in the image; this method does not reveal obscured content.
For a scrollable target, the image shows the portion currently scrolled into view. It does not capture every item in the element’s internal scroll area as one tall image. If the element is detached from the DOM during capture, Playwright throws an error.
Troubleshoot common capture failures
- The locator does not resolve: Check that the selector or accessible name matches the live page, and wait for the page’s rendering or the target element before calling
screenshot(). - The element disappears or is detached: A rerender may replace it between locating and capturing. Stabilize the page state and locate the element again immediately before the screenshot.
- The image shows only part of a scrollable element: This is expected: locator screenshots capture the currently visible portion of a scroll container, not all of its scroll contents.
- The target looks covered: Other page elements remain visible over it. A locator screenshot clips to bounds; it does not remove overlays or change stacking order automatically.
- The output is larger or smaller than expected: Set
scaleto'css'for CSS-pixel dimensions or'device'for device-pixel dimensions. - The screenshot varies between runs: Disable animations with
animations: 'disabled'and use thestyleoption to suppress known dynamic content.
Or skip the browser setup
If you need a screenshot from a URL rather than an element within a Playwright-controlled page, ScreenshotNeo provides a one-request screenshot API. This request saves a WebP image:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents using Claude, Cursor, or another MCP client. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo’s free plan: 1,000 screenshots a month, no card required.
Use the locator API, not the legacy element-handle method
Playwright marks ElementHandle.screenshot() as discouraged and recommends locator-based locator.screenshot() instead. Locators make the target identification part of the action and are the documented approach in the Screenshots guide. The locator screenshot method was added in Playwright v1.14; consult documentation matching your installed version if compatibility matters.
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.
