Handling Frames and Iframes Using Playwright

When automating modern web applications, you’ll often come across frames or iframes—HTML elements used to embed another HTML document within the current page. If you're using Playwright for browser automation, knowing how to handle frames properly is crucial for interacting with elements inside them.

In this blog, we’ll walk through how to identify, access, and interact with frames and iframes using Playwright with code examples in JavaScript and Python.

🧾 What Are Frames and Iframes?

<frame>: Rarely used now; part of the outdated <frameset> HTML structure.

<iframe> (inline frame): Embeds another HTML page inside the current one. Common for third-party content like ads, maps, or payment gateways.

🎯 Why Frames Matter in Automation

Elements inside an iframe are not part of the main DOM, so trying to interact with them directly will result in errors unless you switch the context to the frame.

🔍 Locating an Iframe in Playwright

✅ JavaScript Example:

javascript

Copy

Edit

const { chromium } = require('playwright');

(async () => {

  const browser = await chromium.launch();

  const page = await browser.newPage();

  await page.goto('https://example.com');

  const frame = page.frame({ name: 'iframe-name' }); // By name

  // or

  const frame2 = page.frame({ url: /partial-url/ }); // By URL pattern

  const element = await frame.locator('#element-inside-iframe');

  await element.click();

  await browser.close();

})();

✅ Python Example:

python

Copy

Edit

from playwright.sync_api import sync_playwright

with sync_playwright() as p:

    browser = p.chromium.launch()

    page = browser.new_page()

    page.goto("https://example.com")

    frame = page.frame(name="iframe-name")  # By frame name

    # or

    frame2 = page.frame(url=r".*partial-url.*")  # By URL regex

    frame.locator("#element-inside-iframe").click()

    browser.close()

💡 Other Ways to Get a Frame

If the iframe doesn’t have a name or predictable URL, you can locate it like this:

JavaScript:

javascript

Copy

Edit

const elementHandle = await page.locator('iframe').elementHandle();

const frame = await elementHandle.contentFrame();

Python:

python

Copy

Edit

element_handle = page.locator('iframe').element_handle()

frame = element_handle.content_frame()

📥 Common Use Cases

Use Case How Playwright Helps

Click a button in iframe frame.locator('button').click()

Fill a form in iframe frame.fill('input#email', 'test@mail.com')

Extract iframe content frame.text_content('selector')

Wait for iframe to load page.wait_for_selector('iframe')

🧠 Pro Tips

Always wait for the iframe to load before accessing it.

Use page.frame() carefully; make sure the name or URL is unique.

For dynamic iframes, use contentFrame() to get a reference after ensuring the element exists.

Don’t forget to handle nested iframes (iframe inside another iframe).

🚫 Common Mistakes to Avoid

Trying to use page.locator() for elements inside iframes directly — always use frame.locator().

Ignoring time delays or dynamic loading of iframe content.

Not handling iframe visibility or detachment (which can throw errors during interaction).

✅ Conclusion

Frames and iframes can be tricky in browser automation, but Playwright provides clear, simple APIs to handle them. Whether you’re working on form submissions, third-party integrations, or embedded widgets, knowing how to work with frames ensures your tests stay stable and effective.

Want to try it yourself?

Spin up a small project with an iframe sample page and practice switching frames and interacting with elements inside them.

Learn Playwright Training Course in Hyderabad

Read More

Page Object Model (POM) with Playwright

Handling Different Selectors in Playwright

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions