Table of contents

Interacting with iframes

On this page

Puppeteer and Playwright enable us to access and interact with iframes.

Locate an iframe and its elements

To access iframe elements, locate the iframe and query the DOM elements as if you’re in the page context.

Playwright


const { chromium } = require('playwright')

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

  await page.goto('https://your-page-with-an-iframe.com')

  const header = await page.frameLocator('iframe').locator('h1')
  console.log(await header.innerText())

  await browser.close()
})()

Puppeteer


const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://your-page-with-an-iframe.com')

  const iframeHandle = await page.$('iframe')
  const iframe = await iframeHandle.contentFrame()
  const heading = await iframe.$('h1')

  console.log(await heading.evaluate((el) => el.innerText))

  await browser.close()
})()