+91 7387620624

iFrames

Introduction

An iFrame (Inline Frame) is an HTML element that embeds another HTML document inside the current webpage. Since the content inside an iframe belongs to a separate document, Selenium cannot directly access its elements from the main page.

Before interacting with elements inside an iframe, Selenium must switch its focus to the iframe. Once the required actions are completed, Selenium should switch back to the main webpage.

In this tutorial, you’ll learn how to automate iFrames using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What is an iFrame?

An iFrame is an HTML element that displays another webpage within the current webpage.

Example HTML:

<iframe id="editor" src="editor.html"></iframe>

Everything inside the iframe belongs to a separate HTML document.

Therefore, Selenium must switch into the iframe before interacting with its elements.

Why Automate iFrames?

Automating iFrames helps you:

  • Test embedded text editors.

  • Automate payment forms.

  • Test third-party widgets.

  • Verify embedded applications.

  • Improve automation coverage.

Ways to Switch to an iFrame

Selenium allows switching to an iframe using:

  • Frame Index

  • Frame Name or ID

  • WebElement

Example:

driver.switch_to.frame(0)

or

driver.switch_to.frame("frameName")

or

frame = driver.find_element(By.TAG_NAME, "iframe")
driver.switch_to.frame(frame)

Return to the Main Page

After completing work inside the iframe, return to the main webpage.

Example:

driver.switch_to.default_content()

Example

from selenium import webdriver
from selenium.webdriver.common.by import By


# Topic: 29. Alerts and Frames - iFrames
# Practice site: https://the-internet.herokuapp.com/iframe
# Run: pytest -s 29_examples/test_03_iframes.py
#
# An iframe embeds another HTML document inside the current page. Switch into
# the iframe, work with its elements, then switch back to the main page.


def test_type_inside_iframe_editor():
    driver = webdriver.Chrome()

    try:
        driver.get("https://the-internet.herokuapp.com/iframe")

        driver.switch_to.frame("mce_0_ifr")
        editor_body = driver.find_element(By.ID, "tinymce")
        editor_body.clear()
        editor_body.send_keys("Typing inside an iframe with Selenium.")

        assert "Selenium" in editor_body.text

        driver.switch_to.default_content()
        assert "An iFrame containing the TinyMCE" in driver.page_source
    finally:
        driver.quit()

Understanding the Code

Import Required Libraries

from selenium import webdriver
from selenium.webdriver.common.by import By

These modules are required to launch the browser and locate web elements.

Create a Chrome Browser Instance

driver = webdriver.Chrome()

Starts a new Chrome browser session.

Open the Practice Website

driver.get("https://the-internet.herokuapp.com/iframe")

Navigates to the iFrame practice page.

Switch to the iFrame

driver.switch_to.frame("mce_0_ifr")

Switches Selenium’s control from the main webpage to the iframe whose ID is mce_0_ifr.

Without this step, Selenium cannot locate elements inside the iframe.

Locate the Editor

editor_body = driver.find_element(By.ID, "tinymce")

Locates the TinyMCE editor inside the iframe.

Clear Existing Text

editor_body.clear()

Removes any existing text from the editor before entering new content.

Enter New Text

editor_body.send_keys("Typing inside an iframe with Selenium.")

Types the specified text into the editor.

Verify the Entered Text

assert "Selenium" in editor_body.text

Verifies that the word Selenium appears inside the editor, confirming that the text was entered successfully.

Return to the Main Webpage

driver.switch_to.default_content()

Switches Selenium’s focus back to the main webpage.

Verify the Main Page

assert "An iFrame containing the TinyMCE" in driver.page_source

Confirms that Selenium has successfully returned to the main page by checking that the expected page text is present.

Close the Browser

driver.quit()

Closes all browser windows and ends the WebDriver session.

Practical Example

Suppose a Content Management System (CMS) uses a rich text editor inside an iframe for creating blog posts.

The automation script:

  • Opens the editor.

  • Switches to the iframe.

  • Enters the article content.

  • Returns to the main page.

  • Clicks the Publish button.

Automation Testing Example

Consider an online email application.

The email body editor is embedded inside an iframe.

The automation script:

  • Opens the Compose Email page.

  • Switches to the editor iframe.

  • Types the email content.

  • Returns to the main page.

  • Clicks Send.

Real-World Example

iFrames are commonly used in:

  • Rich text editors (TinyMCE, CKEditor)

  • Payment gateways

  • Embedded videos

  • Online maps

  • Chat widgets

  • Third-party applications

  • Enterprise web applications

Examples include blog editors, email editors, payment forms, embedded YouTube videos, and customer support chat windows.

Advantages of Automating iFrames

  • Supports embedded applications.

  • Tests rich text editors.

  • Automates third-party widgets.

  • Improves automation coverage.

  • Simulates real user interactions.

Common Mistakes Beginners Make

Forgetting to Switch to the iFrame

Selenium cannot locate elements inside an iframe until you switch into it.

Always use:

driver.switch_to.frame(...)

Forgetting to Return to the Main Page

After completing work inside the iframe, return to the main page.

driver.switch_to.default_content()

Using the Wrong Frame Identifier

Verify the iframe’s ID, name, or locator before switching.

Trying to Access iFrame Elements Directly

Attempting to locate elements inside an iframe without switching first usually results in a NoSuchElementException.

Best Practices

  • Inspect the page to identify the correct iframe.

  • Switch into the iframe before interacting with its elements.

  • Return to the main page after completing iframe operations.

  • Use stable locators such as ID or Name whenever possible.

  • Use Explicit Wait if the iframe loads dynamically.

Conclusion

iFrames allow web applications to embed separate HTML documents within a webpage. Selenium requires switching into the iframe before interacting with its contents and switching back afterward to continue working with the main page. Mastering iframe handling is essential for automating rich text editors, payment gateways, embedded applications, and many modern web interfaces.

Frequently Asked Questions (FAQs)

What is an iFrame?

An iFrame is an HTML element that embeds another webpage inside the current webpage.

Why do I need to switch to an iFrame?

Because the iframe contains a separate HTML document, Selenium must switch into it before locating its elements.

How do I switch back to the main page?

Use:

driver.switch_to.default_content()

Can a webpage contain multiple iFrames?

Yes.

Many modern web applications contain multiple iframes, and Selenium must switch to the correct one before interacting with its elements.

Where are iFrames commonly used?

They are widely used in rich text editors, payment gateways, embedded videos, maps, chat widgets, and enterprise web applications.

Key Takeaways

  • An iframe contains a separate HTML document inside a webpage.

  • Selenium must switch into the iframe before accessing its elements.

  • Use driver.switch_to.frame() to enter an iframe.

  • Use driver.switch_to.default_content() to return to the main page.

  • Verify that Selenium has returned to the main page before continuing.

  • Proper iframe handling is essential for automating modern web applications.