How do I capture a screenshot of an iframe using Playwright?


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.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

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.