> ## Documentation Index
> Fetch the complete documentation index at: https://www.checklyhq.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Handle iFrames in Playwright

> Access and interact with iframe content in Playwright using frameLocator to query elements inside a frame as if you were in the page context.

> [!TIP]
>
> If you're using Playwright for end-to-end testing, you should check out [Playwright Check Suites](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/overview.md) 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.

```ts iframe-access.spec.ts theme={null}
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? ![Playwright logo](https://mintcdn.com/checkly-422f444a/EbiaOE1oHX_3_YEg/images/icons/playwright.svg?fit=max\&auto=format\&n=EbiaOE1oHX_3_YEg\&q=85\&s=7a281b91e55b4aa6c01bbb63be50402c)

[Sign up](https://app.checklyhq.com/signup) and start using Playwright for end-to-end monitoring with Checkly.

## Further reading

1. [Playwright's "Frames documentation"](https://playwright.dev/docs/frames)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.