Answer

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();
}

captureFullPageScreenshot();

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.