Nested iFrames in Selenium Python - Build an Automation Script

Verify content inside nested iFrames

Preconditions (2)

Step 1: Open the web page URL 'https://example.com/nested-iframes'

Step 2: Switch to the outer iFrame using its id 'outer-frame'

Step 3: Within the outer iFrame, switch to the inner iFrame using its name 'inner-frame'

Step 4: Locate the paragraph element with id 'inner-text' inside the inner iFrame

Step 5: Verify that the paragraph text is exactly 'Hello from nested iFrame!'

✅ Expected Result: The paragraph inside the nested inner iFrame displays the text 'Hello from nested iFrame!'

Automation Requirements - Selenium with Python

Assertions Needed:

Assert that the paragraph text inside the nested iFrame matches 'Hello from nested iFrame!'

Best Practices:

Use explicit waits to wait for iFrames and elements to be available

Use By.ID and By.NAME locators for iFrames and elements

Switch back to the default content after test steps

Handle NoSuchFrameException if iFrame is not found

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.common.exceptions import NoSuchFrameException, TimeoutException

def test_nested_iframes():
    driver = webdriver.Chrome()
    wait = WebDriverWait(driver, 10)
    try:
        driver.get('https://example.com/nested-iframes')

        # Wait and switch to outer iFrame by ID
        wait.until(EC.frame_to_be_available_and_switch_to_it((By.ID, 'outer-frame')))

        # Wait and switch to inner iFrame by NAME
        wait.until(EC.frame_to_be_available_and_switch_to_it((By.NAME, 'inner-frame')))

        # Wait for the paragraph element inside inner iFrame
        paragraph = wait.until(EC.visibility_of_element_located((By.ID, 'inner-text')))

        # Assert the paragraph text
        assert paragraph.text == 'Hello from nested iFrame!', f"Expected text not found, got: {paragraph.text}"

    except (NoSuchFrameException, TimeoutException) as e:
        assert False, f"Test failed due to missing frame or element: {e}"
    finally:
        # Always switch back to default content
        driver.switch_to.default_content()
        driver.quit()

if __name__ == '__main__':
    test_nested_iframes()

This test script opens the target web page with nested iFrames.

It uses explicit waits to ensure the outer iFrame is available, then switches to it by its ID 'outer-frame'.

Next, it waits for the inner iFrame by its name 'inner-frame' and switches to it.

Inside the inner iFrame, it waits for the paragraph element with ID 'inner-text' to be visible.

It asserts that the paragraph text exactly matches 'Hello from nested iFrame!'.

If any frame or element is missing, it catches exceptions and fails the test with a clear message.

Finally, it switches back to the main page content and closes the browser to clean up.

Common Mistakes - 4 Pitfalls

Not switching back to default content after working inside iFrames

Using time.sleep() instead of explicit waits

Using incorrect locators like XPath with absolute paths for iFrames

Not handling exceptions when iFrames or elements are missing

Bonus Challenge

Now add data-driven testing to verify paragraph text inside nested iFrames for 3 different URLs and expected texts.

Show Hint

Practice

1. What is the correct way to access an element inside a nested iframe using Selenium in Python?

easy

A. Switch to the outer iframe first, then switch to the inner iframe before accessing the element.

B. Directly access the element inside the inner iframe without switching frames.

C. Switch to the inner iframe first, then switch to the outer iframe.

D. Use driver.switch_to.default_content() to access elements inside nested iframes.

Solution

1. Step 1: Switch to the outer iframe first

   To access nested iframes, you must first switch to the outer iframe using driver.switch_to.frame().

2. Step 2: Switch to the inner iframe inside the outer iframe

   After switching to the outer iframe, switch again to the inner iframe before accessing elements inside it.

3. Final Answer:

   Switch to the outer iframe first, then switch to the inner iframe before accessing the element. -> Option A

4. Quick Check:

   Nested iframe access = switch step-by-step [OK]

Hint: Always switch frames stepwise from outer to inner [OK]

Common Mistakes:

• Trying to access inner iframe elements without switching frames
• Switching frames in wrong order
• Using default_content() before switching frames

2. Which of the following is the correct syntax to switch to an iframe named 'frame2' in Selenium Python?

easy

A. driver.switch_to.frame_by_name('frame2')

B. driver.switchTo().frame('frame2')

C. driver.switch_to.default_content('frame2')

D. driver.switch_to.frame('frame2')

Solution

1. Step 1: Use the correct Selenium Python syntax

   In Selenium Python, switching to a frame uses driver.switch_to.frame() with the frame name as argument.

2. Step 2: Identify the correct method call

   driver.switch_to.frame('frame2') uses the correct method and argument format to switch to the iframe named 'frame2'.

3. Final Answer:

   driver.switch_to.frame('frame2') -> Option D

4. Quick Check:

   Correct method is switch_to.frame() [OK]

Hint: Use driver.switch_to.frame('frame_name') to switch frames [OK]

Common Mistakes:

• Using Java syntax like switchTo() in Python
• Trying to pass frame name to default_content()
• Using non-existent methods like frame_by_name()

3. Given the following code snippet, what will be printed?

driver.switch_to.frame('outerFrame')
driver.switch_to.frame('innerFrame')
element = driver.find_element(By.ID, 'text')
print(element.text)
driver.switch_to.default_content()

medium

A. The text inside the element with ID 'text' inside innerFrame.

B. An error because you cannot switch frames twice.

C. The text inside the element with ID 'text' inside outerFrame only.

D. An error because default_content() should be called before accessing element.

Solution

1. Step 1: Switch to outerFrame then innerFrame

   The code correctly switches first to 'outerFrame' then to 'innerFrame', so the context is inside the inner iframe.

2. Step 2: Find element inside innerFrame and print text

   Finding element by ID 'text' inside innerFrame is valid, so printing element.text outputs the text inside that element.

3. Final Answer:

   The text inside the element with ID 'text' inside innerFrame. -> Option A

4. Quick Check:

   Switch frames stepwise = correct element access [OK]

Hint: Switch frames stepwise before accessing nested elements [OK]

Common Mistakes:

• Assuming switching frames twice causes error
• Expecting element from outerFrame after switching to innerFrame
• Calling default_content() too early

4. What is wrong with the following Selenium Python code to access an element inside a nested iframe?

driver.switch_to.frame('innerFrame')
element = driver.find_element(By.ID, 'submit')

medium

A. You should call driver.switch_to.default_content() before switching frames.

B. The method find_element should be find_elements.

C. You must switch to the outer iframe before switching to the inner iframe.

D. The frame name 'innerFrame' is invalid syntax.

Solution

1. Step 1: Understand nested iframe switching order

   To access an element inside a nested iframe, you must first switch to the outer iframe, then to the inner iframe.

2. Step 2: Identify missing outer frame switch

   The code switches directly to 'innerFrame' without switching to its parent outer iframe, causing failure to find the element.

3. Final Answer:

   You must switch to the outer iframe before switching to the inner iframe. -> Option C

4. Quick Check:

   Switch frames stepwise to avoid errors [OK]

Hint: Always switch outer frame before inner frame [OK]

Common Mistakes:

• Skipping outer frame switch
• Confusing find_element with find_elements
• Calling default_content() unnecessarily

5. You have a webpage with three nested iframes: outerFrame, middleFrame inside outerFrame, and innerFrame inside middleFrame. You want to click a button with ID 'confirmBtn' inside innerFrame. Which sequence of Selenium Python commands correctly performs this action?

hard

A. driver.switch_to.default_content()\ndriver.switch_to.frame('outerFrame')\ndriver.find_element(By.ID, 'confirmBtn').click()\ndriver.switch_to.default_content()

B. driver.switch_to.frame('outerFrame')\ndriver.switch_to.frame('middleFrame')\ndriver.switch_to.frame('innerFrame')\ndriver.find_element(By.ID, 'confirmBtn').click()\ndriver.switch_to.default_content()

C. driver.switch_to.frame('innerFrame')\ndriver.switch_to.frame('middleFrame')\ndriver.switch_to.frame('outerFrame')\ndriver.find_element(By.ID, 'confirmBtn').click()\ndriver.switch_to.default_content()

D. driver.find_element(By.ID, 'confirmBtn').click()\ndriver.switch_to.frame('outerFrame')\ndriver.switch_to.frame('middleFrame')\ndriver.switch_to.frame('innerFrame')

Solution

1. Step 1: Switch frames in correct nested order

   To reach the button inside innerFrame, switch first to outerFrame, then middleFrame, then innerFrame step-by-step.

2. Step 2: Find and click the button, then return to main page

   After switching to innerFrame, find the button by ID and click it. Then use driver.switch_to.default_content() to return to the main page.

3. Final Answer:

   Switch outerFrame -> middleFrame -> innerFrame, click button, then default_content() -> Option B

4. Quick Check:

   Nested frames require stepwise switching [OK]

Hint: Switch frames outer to inner, then act, then default_content() [OK]

Common Mistakes:

• Switching frames in reverse order
• Clicking element without switching frames
• Not returning to default content after action