Getting a screenshot of an iframe
This thread is trying to answer question "How can I take a screenshot of what's inside an iframe?"
Hi, since v1.17, dealing with frame objects directly should be avoided. Framelocators are more flake-resistant. Here's the release notes for that: https://playwright.dev/docs/next/release-notes#frame-locators
I think you can do something like
await page.frameLocator(...).locator('body').screenshot({ path: 'screenshot.png' });
https://playwright.dev/docs/api/class-framelocator https://playwright.dev/docs/screenshots#element-screenshot
Related Ask AI answer for "How do I capture a screenshot of an iframe using Playwright?".
Answer
Capturing Screenshots of iframes with Playwright
First, identify the iframe element using a unique identifier such as its class or label. For example, if the iframe has a class of "frame-class", you can locate it using Playwright's frameLocator method:
const frame = page.frameLocator('.frame-class');Next, interact with the iframe's elements. For instance, if there's an input field labeled "User Name", fill it in like so:
const username = await frame.getByLabel('User Name');
await username.fill('John');Now, let's capture a screenshot. Playwright offers various options for this. You can save it to a file or get it as a buffer for further processing.
To save the screenshot to a file named "screenshot.png", use:
await page.screenshot({ path: 'screenshot.png', fullPage: true });If you want the image as a buffer for further processing, use:
const buffer = await page.screenshot();You can then manipulate this buffer or pass it to third-party pixel diff facilities.
Remember, these instructions are specific to Playwright. For more tips on efficient Playwright test scripts, check out this blog post.
Related Discord Threads
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.