How can I capture a screenshot of an entire webpage within an iframe using Playwright?


Capturing Full Page Screenshot of an Iframe with Playwright

First, ensure you've installed Playwright and set up your project.

Next, create a new instance of the Playwright browser and open a new page:

const { chromium } = require('playwright');

async function captureFullPageScreenshot() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://ray.run');
  await page.waitForSelector('iframe');

  const frameElementHandle = await page.$('iframe');
  const frame = await frameElementHandle.contentFrame();
  const screenshotBuffer = await frame.screenshot({ fullPage: true });

  await browser.close();


In this code, we're using chromium as our browser engine, but you can also use firefox or webkit if you prefer.

This code navigates to a webpage that contains an <iframe>. It waits for the <iframe> to load, then retrieves its handle.

Next, it switches to the context of that <iframe> using contentFrame(). This lets us interact with elements inside the <iframe>.

Finally, we call screenshot({ fullPage: true }) on the frame object to capture a full page screenshot of the iframe content. The screenshot is returned as a buffer, which you can save or process as needed.

Remember to handle any errors that may occur and adjust the code according to your specific use case.


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.