← Back to Discord Forum

Getting a screenshot of an iframe

I've been having trouble trying to take a screenshot of only what's inside an iframe. I can access items inside the frame by using:

const frame = this.page.frame({ name: "frame1", url: this.regex });

But after that nothing works. Does anyone know how to do this?

This thread is trying to answer question "How can I take a screenshot of what's inside an iframe?"

1 reply

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


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

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

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.