How to Handle iFrames in Playwright

If you’re using Playwright for end-to-end testing, you should check out Playwright Check Suites and start testing in production.

Playwright enables 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.

iframe-access.spec.ts

import { test } from '@playwright/test'

test('access iframe content', async ({ page }) => {
  await page.goto('https://your-page-with-an-iframe.com')
  const header = await page.frameLocator('iframe').locator('h1')
  console.log(await header.innerText())
})

Bugs don’t stop at CI/CD. Why would Playwright?

Sign up and start using Playwright for end-to-end monitoring with Checkly.

Further reading

1. Playwright’s “Frames documentation”