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.
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.
Now, scroll up the HTML tree until you see the <iframe> tag. That's your 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.
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!
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.
