Skip to content

Accessing content in iframes

Sometimes you keep trying to click a button or grab some content, but no mattery what selector you try it just keeps coming back with a TimeoutError!

TimeoutError: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for locator("text=Building 2")

One reason might be the content is inside of an iframe.

iframe content

If you'd like to follow along, we're going to be using this Palm Beach County property information page

Selecting content in iframes

You can't just use page.locator if your content is in an iframe. Instead, you need to use page.frame_locator to specify which iframe you want to access, then .locator to select the content you want.

# Find the link inside of the iframe and click it
await page.frame_locator("#MainContent_Iframe7").locator("text=Building 2").click()

Accessing an iframe's HTML

If you're someone who enjoys using BeautifulSoup for your parsing and selecting instead of straight Playwright, you can select the full content of the iframe with Playwright then feed it into BeautifulSoup.

# The iframe has an id of MainContent_Iframe7
html = await page.frame_locator("#MainContent_Iframe7").locator("html").inner_html()
doc = BeautifulSoup(html, "html.parser")

Then you can use doc to select the content you're interested in scraping.

Finding the iframe

Before you select content in an iframe, you need to find the iframe itself! There are two ways to do this.

Manual method

First, right-click/inspect the element you want to access.

iframe content


Now, scroll up the HTML tree until you see the <iframe> tag. That's your iframe!

scroll up to the iframe

Alternative JavaScript method

Sometimes it's hard to read the element tree to find the iframe. Let's try another more fun method!

It starts like the above version: right-click/inspect the element you want to access. Make sure your element of interest is selected in the Elements tab.

element selected

Once it's selected, move to the Console tab and run the following code:


The result that is displayed is the iframe your element is hiding inside of!

result of ownerDocument frameElement with the dom element

In the console, $0 is a way to reference the currently selected element in the Elements tab. The ownerDocument.defaultView.frameElement portion digs around in the document tree to select the iframe an object is in.

If this command displays null, then the element is not in an iframe.

If you need more information than the console can provide, you can also right-click and select Reveal in Elements Panel to see the iframe in the Elements tab.

reveal in elements panel