The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Use Playwright’s Locator.screenshot() method to capture one matched element rather than the whole page. In synchronous Python, call locator.screenshot(path="element.png"); in asynchronous Python, use await locator.screenshot(path="element.png"). The method waits for the locator’s actionability checks and scrolls the element into view, but it captures only the element’s visible rendered area—not hidden content in a scrollable container.
Install Playwright and its browser
Install the Python package and the browser binaries Playwright uses. The installation guide describes support for Chromium, WebKit, and Firefox, as well as synchronous and asynchronous Python APIs. Playwright installation guide
python -m pip install playwright
playwright installFor a pytest workflow, install the separate plugin with python -m pip install pytest-playwright. It is optional; the standalone examples below do not require pytest.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCapture a single element
First navigate to the page, choose a locator for the element, and call its screenshot() method. The simplest synchronous example is:
#1 Best Overall
from pathlib import Path
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto("https://example.com")
element = page.locator(".header")
element.screenshot(path="header.png")
browser.close()Replace https://example.com and .header with the page and target you need. The output path’s extension determines the image format: .png, .jpeg, or .webp. The Locator API also accepts an explicit type option.
Use a locator that identifies the intended UI
Playwright recommends user-facing locators such as role, text, label, placeholder, alt text, title, and test ID. These tend to express what the interface element is, rather than how its markup happens to be nested. For example:
summary = page.get_by_role("article", name="Order summary")
summary.screenshot(path="order-summary.png")Other useful choices include page.get_by_text("Order summary"), page.get_by_label("Email address"), and page.get_by_test_id("order-summary"). Use a CSS selector when it is the clearest stable contract available, but avoid long chains tied to incidental page structure. Playwright locator guide
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Capture with the asynchronous API
In an async program, use Playwright’s async package and await navigation and the screenshot call:
import asyncio
from playwright.async_api import async_playwright
async def main():
async with async_playwright() as p:
browser = await p.chromium.launch()
page = await browser.new_page()
await page.goto("https://example.com")
element = page.get_by_role("article", name="Order summary")
await element.screenshot(path="order-summary.png")
await browser.close()
asyncio.run(main())Do not mix sync and async calls in the same Playwright flow. Choose the API style that fits the rest of your application.
What an element screenshot includes
Locator.screenshot() captures the matched element and clips the image to it. Playwright performs locator actionability checks and scrolls the element into view if needed. That is useful for automation, but it does not mean every pixel you expect is necessarily visible:
- If an overlay covers part of the element, the covered pixels may not appear as you expect; dismiss or hide the overlay before capture.
- If the element is inside a scrollable container, the capture reflects that container’s current scroll position. Scroll the container first if the desired content is outside its visible portion.
- If the DOM element is detached before capture completes, the method throws. Reacquire the locator after the page settles.
An element screenshot is different from a full-page screenshot. page.screenshot(full_page=True) targets the full scrollable page, while the locator method targets one element. The Playwright screenshots guide also documents returning screenshot bytes for workflows that process an image in memory. Playwright screenshots guide
Make captures more reproducible
For visual tests, repeated captures should use the same target, page state, viewport, and rendering options. Locator screenshots support several controls for reducing variation and choosing output behavior. Locator screenshot API reference
| Option | What it does | When to use it |
|---|---|---|
animations="disabled" |
Disables CSS animations, transitions, and Web Animations during capture. Finite animations are fast-forwarded; infinite animations are canceled to their initial state and replayed afterward. | When movement causes inconsistent visual output. |
mask=[locator] |
Overlays matching regions; the default mask color is pink (#FF00FF). Set mask_color to change it. |
When a changing region should be obscured in a comparison. |
style="..." |
Applies a temporary stylesheet for the capture, including through Shadow DOM and inner frames. | When you need to hide a dynamic item or otherwise adjust presentation temporarily. |
scale="css" |
Produces one output pixel per CSS pixel. The default, "device", preserves device-pixel scaling. |
When consistent CSS-pixel dimensions matter more than device-pixel density. |
omit_background=True |
Allows a transparent background; it does not apply to JPEG. | When the chosen output format and downstream workflow support transparency. |
type="png", "jpeg", or "webp" |
Selects the image format explicitly. Otherwise, Playwright infers it from the path extension. | When you want the format to be explicit rather than inferred. |
timeout |
Sets the maximum operation time; the documented Python Locator API default is 30,000 ms. | When a page’s expected readiness time differs from the default. |
caret="hide" |
Hides the text caret; this is the default. | Usually no change is needed unless caret visibility is part of the case being captured. |
Example using several options together:
card = page.get_by_role("article", name="Order summary")
card.screenshot(
path="order-summary.png",
animations="disabled",
scale="css",
mask=[page.get_by_test_id("live-timestamp")],
)Use masking or a temporary style deliberately: a mask changes the visible image, and a style can change the page presentation. For pixel comparisons, ensure that the same options and page state are used in each run.
Wait for the page state you actually need
Locator screenshot actionability checks help ensure that the target can be acted on, but they do not know when your application’s data, fonts, or a particular asynchronous component has reached the state your test intends to capture. Navigate and then wait for a meaningful condition tied to that state before taking the screenshot. For example, wait for a result panel to become visible:
page.goto("https://example.com")
results = page.get_by_role("region", name="Search results")
results.wait_for(state="visible")
results.screenshot(path="results.png", animations="disabled")Prefer an explicit page or application condition over an arbitrary delay when one is available. If the page’s expected state is not represented in the DOM, a deliberate wait may be appropriate, but a fixed delay alone can be both slow and unreliable: it may be too short on a slow run and waste time on a fast one.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated 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 matchSave to a file or work with image bytes
Passing path writes the capture to a file, which is convenient for artifacts and debugging. The screenshots guide also describes capturing bytes in memory, useful when you want to post-process an image or pass it directly into a pixel-diff workflow without first saving it. Follow the guide’s bytes example when choosing that route. Playwright screenshots guide
For predictable output, choose an explicit file extension or screenshot type, and keep the viewport and scale consistent across runs. If the target is larger than expected, check whether CSS sizing, device scale, or the selected element is responsible before changing the capture method.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common element screenshot problems
The screenshot is of the wrong element
The locator may match an unexpected node or be too dependent on markup structure. Prefer a role and accessible name, label, text, or test ID that identifies the intended UI. If multiple elements could match, narrow the locator based on a meaningful parent or improve the page’s test contract. Playwright locator guide
The element is missing or the call times out
The target may not yet exist, may not be visible, or may not satisfy actionability checks. Wait for the meaningful application state, confirm the locator matches the current page, and check whether navigation or a prior interaction failed. The screenshot operation’s documented timeout default is 30,000 ms; increasing it is not a substitute for fixing a locator or waiting on the right state. Locator screenshot API reference
Part of the target is hidden
A consent dialog, modal, sticky header, or other overlay can cover the target. Close or dismiss the overlay when that is part of the intended user flow; otherwise hide it deliberately with an appropriate temporary style. Covered pixels may not be visible in the screenshot.
The image omits content in a scrollable area
Element screenshots reflect the scroll state of a scrollable container; they do not automatically expand that container to capture every item it could scroll through. Scroll the relevant container to the content you need before capturing, or choose a page-level approach if the requirement is a full-page image.
The screenshot changes between runs
Disable animations, mask changing regions such as clocks or timestamps, and wait for a stable application state. Keep viewport, device scale, and screenshot options fixed. If the target itself is replaced during rendering, reacquire the locator after the page settles.
The call fails because the element detached
A framework may rerender the component between locating it and capturing it. Locate the element again after the update and take the screenshot once the intended state is present. Locators are designed to support auto-waiting and retry-ability, but a detached target still causes the screenshot operation to fail.
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 →Or skip the browser setup
ScreenshotNeo offers a website screenshot API and an MCP server for developers. For a one-call capture, send a GET request with the target URL and your access key:
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 the request options. ScreenshotNeo accepts 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 and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
The free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 screenshots. Learn about ScreenshotNeo, or sign up for 1,000 free screenshots a month, no card required.
FAQ
Can I screenshot an element selected by CSS?
Yes. Create a locator with page.locator(".your-selector") and call its screenshot() method. Prefer a user-facing locator when one identifies the intended element more clearly.
Does an element screenshot include everything inside a scrollable element?
No. It captures the currently scrolled visible content. Scroll the container to the required content before capture.
Can I make the screenshot transparent?
Use omit_background=True with a format that supports transparency. This option does not apply to JPEG.
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.
