Playwright’s browser tools call the operation browser_take_screenshot, not browser.takeScreenshot. It captures the active page’s viewport by default; set fullPage: true for the scrollable page or provide target for an element. In a Node.js script, use page.screenshot() for a page or locator.screenshot() for an element. Use Playwright Test’s toHaveScreenshot() when you need to compare against a baseline rather than simply save an image.
Choose the Playwright screenshot interface
The right call depends on where your page is open and what you want the image to do. The browser-tool operation and Playwright’s Node.js APIs are related, but they do not share identical names or options.
- Page open in a Playwright browser-tool session: use
browser_take_screenshot. It captures the visible viewport unless you request a full-page capture or specify a target element. - Page controlled by your Node.js automation: use
page.screenshot(). Set a path to save an image; without a path, the call returns a buffer. - One element in a Node.js page: use
page.locator(selector).screenshot(). The locator method scrolls the element into view and performs actionability checks. - Visual regression test: use Playwright Test’s
toHaveScreenshot()assertion. It compares the page or an element with an expected screenshot; it is not merely a command to save an ad hoc image.
Do not substitute one interface’s parameters for another without checking that interface’s API. For example, the browser tool uses target for an element, while the Node.js API uses a locator method to capture one.
Capture the active browser-tool page
Call browser_take_screenshot in the environment that has the page open. With no scope option, the result is the current viewport. Add fullPage: true to capture the full scrollable page, or set target to an element reference or selector to capture one element. The tool accepts a filename; when you omit it, it returns the image inline as well as saving it to its output location.
#1 Best Overall
The browser tool supports PNG, JPEG, and WebP. You can set type, or let the tool infer the format from the filename extension. If neither a format nor a filename extension establishes one, PNG is the default. The scale option controls output sizing: 'css' produces CSS-pixel sizing and 'device' uses device-pixel ratio. Pick CSS scale when matching CSS-pixel dimensions matters, or device scale when you need the higher-resolution device-pixel output.
A full-page capture cannot be combined with an element target. Choose either a full-page image or a target-element image for a call. Also note the tool’s distinction between screenshot and interaction: screenshots are for looking at a page, not for obtaining interaction references. For browser interaction, use browser_snapshot to get refs.
Save a page screenshot in Node.js
Once your script has navigated to a page and has a Playwright page object, save the visible page with page.screenshot(). This example writes a PNG file:
await page.screenshot({ path: 'screenshot.png' });Set fullPage: true when the image should include the whole scrollable document:
await page.screenshot({ path: 'full-page.png', fullPage: true });If you do not provide path, the method returns an image buffer instead of writing a file. That is useful when the next step in your application consumes image bytes rather than a local filename. The capture API also supports image type and, for JPEG or WebP, quality; masking selected locators; and animation handling. Check the options for the Playwright version and API you are using before relying on an individual option, because exact availability varies by API.
Capture one element with a locator
Use the locator screenshot method when the output should be clipped to a matched element rather than the entire viewport:
await page.locator('.product-card').screenshot({ path: 'product-card.png' });Replace .product-card with a selector that identifies the intended element. The locator method scrolls the element into view and performs actionability checks before capturing it. If the element is detached from the DOM before the screenshot can be taken, the operation errors rather than producing a reliable capture.
An element screenshot includes the matched element, not everything inside a separate scrollable area beyond its current scroll position. If the target is covered by another element, it may not actually be visible in the image. For those cases, first decide whether the desired evidence is the element as currently rendered, the enclosing page, or content that requires a different page state.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use screenshot assertions for visual regression tests
A saved screenshot answers “what did this page look like?” A visual regression assertion answers “does this rendering match the expected image?” In Playwright Test, use toHaveScreenshot() for the latter. The assertion waits for two consecutive screenshots to match, then compares the last one with the expectation. That stabilization helps with transient changes, but it does not make different machines render identically.
Screenshot comparisons can vary with the host operating system, browser version, settings, hardware, power source, and headless mode. Generate and compare baselines in a consistent environment. When a change is intentional, review the new result before updating the reference image; otherwise, a changed baseline can conceal a real visual regression.
For dynamic pages, the Node page and locator screenshot APIs expose animation handling and masking controls. Those can help when motion or known changing regions make a capture unstable, but their exact options differ across APIs. Prefer controlling the page and test environment consistently rather than assuming an assertion will make every source of visual variation disappear.
Pick scope, output, and scale deliberately
| Need | Use | What to expect |
|---|---|---|
| What is visible now | Browser tool default or page.screenshot() |
Viewport capture unless you request otherwise |
| The complete scrollable document | Browser tool fullPage: true or Node.js page screenshot with fullPage: true |
A full-page capture; do not combine browser-tool full-page capture with an element target |
| A single matched element | Browser tool target or Node.js locator screenshot |
An element-focused capture; locator screenshots are clipped to the matched element |
| A file on disk | Browser-tool filename or Node.js path |
A named image file |
| Image data for another step | Node.js screenshot without path |
A returned buffer |
| Compare with a known-good rendering | Playwright Test toHaveScreenshot() |
An assertion against an expected screenshot, not an ad hoc save |
Use a format appropriate to the next consumer: the browser tool supports PNG, JPEG, or WebP and can infer type from a filename extension. Use CSS scale when CSS-pixel output sizing is the requirement; use device scale when device-pixel ratio is the requirement. For Node.js captures, check the options for your API and version rather than assuming the browser-tool scale option applies.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Troubleshoot common screenshot problems
The method or tool name is not recognized
browser.takeScreenshot is not the operation name in the Playwright browser tools described here. In that environment, call browser_take_screenshot. In a Node.js Playwright script, call page.screenshot() or a locator’s screenshot() method. Make sure you are using the interface that owns the page you want to capture.
The bottom of the page is missing
A normal page screenshot captures the viewport, not the entire scrollable document. Request fullPage: true for a full-page capture. If you only need one element, use a target or locator instead; a full-page browser-tool capture and an element target cannot be combined.
The element screenshot fails
Confirm the selector matches the intended element and that the element remains attached while the screenshot runs. Locator screenshots perform actionability checks, scroll the target into view, and error if it becomes detached. If another element covers it, the resulting image may not show it as expected.
The saved image has the wrong format or dimensions
For the browser tool, check the type and filename extension: the format can be inferred from the extension, and PNG is the default when neither specifies a format. Check whether scale is 'css' or 'device'; those produce different pixel sizing. Do not assume browser-tool options map directly to Node.js options.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The visual test is inconsistent across runs or machines
Keep the host operating system, browser version, settings, hardware, power source, and headless mode consistent between baseline generation and comparison. If the page includes animation or known changing regions, use the supported animation or masking controls for the screenshot API involved, and review changes before refreshing a baseline.
Or skip the browser setup
If you need a website screenshot without wiring up a browser session, ScreenshotNeo provides a one-request screenshot API and an MCP server for AI agents. Its cleanup 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 turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status in X-Page-Verdict and X-Billed headers. AI agents can use its MCP tools: take_screenshot, get_page_info, and capture_pdf.
Here is the documented cURL call, with the target URL set to Stripe:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpFor Python, the equivalent request is:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)For Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for API details. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for the free plan.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Frequently Asked Questions
Can a screenshot itself provide element references for browser actions?
No. In Playwright’s browser tools, use browser_snapshot when you need references for interaction; screenshots are visual output.
Should I update a visual-test baseline whenever the assertion changes?
Only after reviewing the new rendering and confirming the difference is intentional. An updated baseline changes what future assertions treat as expected.
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.
