Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsTo screenshot content inside an iframe, enter the frame with Playwright’s frameLocator(), locate the element inside it, and call screenshot() on that locator. For example: await page.frameLocator('#my-iframe').getByRole('button', { name: 'Submit' }).screenshot({ path: 'submit-button.png' }); This captures the button’s bounds, not the whole page. Choose a page screenshot or the iframe element’s own locator when you need a different capture area.
Capture an element inside an iframe
A page locator searches the main document. An iframe has its own document, so first select the frame and then select the target inside it. Playwright’s frameLocator() lets you build that chain without switching to a separate page object.
await page
.frameLocator('#my-iframe')
.getByRole('button', { name: 'Submit' })
.screenshot({ path: 'submit-button.png' });The example assumes the page contains one iframe matching #my-iframe and a button named “Submit” inside it. Replace the selector and accessible name with ones that identify your actual frame and target. The saved image contains the matched button’s visible bounds; it is not a screenshot of the entire iframe document.
Runnable Node.js example
Install Playwright and its Chromium browser in a project, then save the following as capture-iframe.js. The example uses a page you control; replace the URL, frame selector, and target locator with values from your page.
Recommended Free Tools
#1 Best Overall
npm init -y
npm install playwright
npx playwright install chromiumconst { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
const submitButton = page
.frameLocator('#my-iframe')
.getByRole('button', { name: 'Submit' });
await submitButton.screenshot({ path: 'submit-button.png' });
console.log('Saved submit-button.png');
} finally {
await browser.close();
}
})();Run it with node capture-iframe.js. The iframe selector and button locator must match the site’s markup. Locator screenshots perform actionability checks and scroll the target into view; if the frame or target never appears, or the target detaches before capture, the operation fails rather than producing a reliable image. See Playwright’s Locator API and FrameLocator API.
Start with an iframe locator when useful
If you already have a locator for the iframe, convert it to a frame locator with contentFrame() and then locate the content inside:
const iframe = page.locator('iframe[name="embedded"]');
const target = iframe.contentFrame().getByRole('button', { name: 'Submit' });
await target.screenshot({ path: 'submit-button.png' });This is useful when your frame is identified by an attribute other than an ID, or when you want to keep the iframe locator in a variable. The conversion changes the search context for the next locator; it does not capture the iframe by itself. Check the installed Playwright version’s documentation if you are using an older version or need a specific screenshot option.
Choose the screenshot area you actually need
“Screenshot the iframe” can mean several different things. Pick the method by the desired image bounds:
| What you need | Playwright method | What the image covers |
|---|---|---|
| One element inside the iframe | page.frameLocator('iframe selector').locator('target selector').screenshot() |
The target element’s bounds inside the frame. |
| The iframe element’s box | page.locator('iframe selector').screenshot() |
The iframe owner element’s box. It is not a separate full-document rendering of the embedded content. |
| The visible browser page | page.screenshot() |
The page viewport, using the page screenshot API. |
| The full scrollable page | page.screenshot({ fullPage: true }) |
The full page capture supported by the page screenshot API. |
A locator screenshot is clipped to the matched element’s size and position. It does not expand the capture to reveal content outside the target’s bounds. If the target is inside a scrollable area, the image reflects the current scroll position; if another element covers it, the covered part is not made visible by taking the screenshot. For page-level options and examples, see Playwright’s Page API and Screenshots guide.
Make the capture dependable
Use a unique frame and target
Frame locators are strict: an operation fails if the frame selector matches multiple iframes. Make the selector specific enough to identify one frame, such as a stable ID, name, or other page-specific attribute. Then use a target locator that identifies the intended element rather than a broad selector that may match several items. If the page contains repeated embeds, narrow the selection using the surrounding page structure or a distinguishing iframe attribute.
Let locator behavior handle ordinary readiness
A locator screenshot waits for actionability checks and scrolls its target into view. This is generally preferable to adding a fixed sleep: a hard-coded delay can waste time on fast runs and still be too short on slow ones. Use stable locators and let Playwright resolve them when the screenshot action runs. If the element appears only after a known application event, wait for that event or for the relevant locator to become ready before capturing. An element that detaches during the operation can still cause the capture to fail.
Control visual variation when it matters
Animated elements, blinking carets, dynamic content, and changing page state can make successive images differ. Locator screenshot options include animation handling, caret behavior, masking, and applying a stylesheet. These controls can help reduce noise in a capture, but use options supported by the Playwright version installed in your project. The Locator API documentation lists the documented options.
Troubleshooting iframe screenshots
The operation says the frame selector is not unique
Cause: The selector identifies more than one iframe, and frame locators require an unambiguous frame for the operation.
Fix: Inspect the page’s iframe attributes and narrow the selector to the intended embed. If several frames are expected, explicitly select the intended one using a page-specific locator rather than assuming the first match is the right target. See the FrameLocator API.
The target cannot be found or the screenshot times out
Cause: The frame selector, target locator, or accessible name does not match the rendered page; the iframe may not have loaded its content yet; or the target may not become actionable.
Fix: Confirm that the iframe selector is correct, then check the target locator against the content inside that frame. Make sure the page reaches the state in which the embed is present, and avoid relying on a guessed fixed delay. If the page changes the target during rendering, use a stable locator and wait for a meaningful page or application condition before capturing.
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 reinstallThe image is cropped, incomplete, or shows an overlay
Cause: A locator screenshot captures the matched element’s bounds, not everything the element might contain beyond its visible area. Scroll position and overlays affect what is visible.
Fix: Decide whether you need the target element, iframe box, viewport, or full page, then use the matching screenshot scope above. If you need a scrollable target’s different content, put the relevant container at the desired scroll position before capture. A locator screenshot does not reveal pixels hidden behind an overlay.
The capture differs on each run
Cause: Page state, animation, a caret, or dynamic content may change between captures.
Fix: Make the page state deterministic where possible, and use the locator screenshot options for animation handling, caret behavior, masking, or stylesheet injection when appropriate. For visual regression work, use a screenshot assertion rather than treating one saved image as proof of stability.
An older example uses ElementHandle
Cause: Older snippets may use ElementHandle.screenshot().
Fix: Prefer the locator-based workflow above. Playwright marks the ElementHandle screenshot method as discouraged and recommends locator.screenshot(); see the ElementHandle API.
Screenshot files versus visual regression assertions
Saving a screenshot produces an image; checking whether an image matches an expectation is a separate task. In Playwright Test, expect(locator).toHaveScreenshot() is a visual assertion. It waits for two consecutive locator screenshots to match, then compares the final screenshot with the expectation. The documented screenshot assertion is available with the Playwright test runner, not as a general replacement for saving an image in every script. See the LocatorAssertions API.
Use locator.screenshot() when the immediate goal is to save a capture, including a one-off iframe element image. Use toHaveScreenshot() when your goal is to test visual stability against an expected image in a Playwright Test workflow.
Free tools Windows power users keep installed
One-click scans. No signup required.
Or skip the browser setup
If you need a clean screenshot of a webpage rather than a Playwright locator screenshot of a specific element inside an iframe, ScreenshotNeo offers a one-request website screenshot API. It does not replace the frame-aware locator chain above when your requirement is to target content inside an iframe.
For example, this cURL request saves a WebP screenshot of Stripe:
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 parameters and response details. Its clean-shot workflow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses indicate the page verdict and billing status in headers. ScreenshotNeo also offers an MCP server with take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
The free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 screenshots. Sign up for ScreenshotNeo’s free plan.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Frequently Asked Questions
Can I save the screenshot as a buffer instead of a file?
Yes. Locator screenshots return a buffer; supplying the path option also writes the image to a file.
Does toHaveScreenshot() work in a regular Playwright script?
The documented visual screenshot assertion works with the Playwright Test runner.
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.
