Rayrun
← Back to Discord Forum

how to get full page screenshot of iframe

chaitanya_kposted in #help-playwright
Open in Discord

Hi, working on e2e tests for a extension in iframe and wondering on how to get the full page screenshot for the page.

This thread is trying to answer question "How to get a full page screenshot of a page with an iframe while working on e2e tests for an extension?"

3 replies

I think the way to do this is targeting the iframe as a frame object and then screenshotting the iframe object directly

chaitanya_k

I tried using frame locator and trying to grab screenshot from that but doesn’t include the complete page

Think an iframe will be limited to itself more for security issues...

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.

TwitterGitHubLinkedIn
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.