How to handle an iframe in Selenium (Python)?

Image Source

What is an iframe?

An inline frame (iframe) is a HTML element that loads another HTML page within the document. An iframe is used in webpages where external content is displayed like vidoes, advertisements, Google Maps, etc.

iframe is supported by majority of the browsers: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Opera

The need to handle iframe separately

Let us try to print the text of <h4> tag text, shown below, using selenium.

Code Source

Selenium python code for the above query would be:

heading = driver.find_element(By.XPATH,"//h4[@class='output-heading']")
print(heading.text)

The expected output should be:

HTML Demo: <iframe>

But actually we will get an error, stated below:

Message: no such element: Unable to locate element: {"method":"xpath","selector":"//h4[@class='output-heading']"}
  (Session info: chrome=104.0.5112.20)
Stacktrace:
Backtrace:
	Ordinal0 [0x0030AF23+2207523]
	Ordinal0 [0x002A30E1+1781985].....

The error reports that, the code is not able to locate the element by the respective xpath. This is because the element which is represented by the xpath is not part of the current webpage. The <h4> tag is part of an iframe.

Here comes the need to switch from parent frame to the required iframe.

How to find a <iframe> tag on a webpage?

• Right-click on the webpage and click on Inspect. Press Ctrl + F and type ‘//iframe’.

• You will get the total number of <iframe> tags near the search bar. Current <iframe> will be highlighted in yellow. You can press Enter to iterate over all the <iframe> tags.

Code Source

How to switch to an iframe in Selenium

Approach #1: You can use the XPATH to locate a <iframe> tag

iframe = driver.find_element(By.XPATH, "<iframe> XPATH")

Then switch_to to <iframe>

driver.switch_to.frame(iframe)

Approach #2: Using Index

An index represents the position of a particular iframe on a HTML page. If we have 10 iframes, and we want to switch to first, then we can give 0 as index or position of that iframe.

driver.switch_to.frame(0)  # switching to first iframe
driver.switch_to.frame(1)  # switching to second iframe

Correctly fetching an element within iframe

Now that we know how to switch frames, let’s try again.

First we switch to the respective iframe, using XPATH.

iframe = driver.find_element(By.XPATH,"//iframe[contains(@class,'interactive')]")
driver.switch_to.frame(iframe)

Now, as we have switched to the iframe, we can print the text of the <h4> tag.

heading = driver.find_element(By.XPATH,"//h4[@class='output-heading']")
print(heading.text)

Output:

HTML Demo: <iframe>

How to switch back to parent iframe?

To switch back to the parent iframe you can use the following line of code:

driver.switch_to.parent_frame()

How to switch back to main web page?

To switch back to the main web page you can use the following line of code:

driver.switch_to.default_content()

How to handle dynamic iframe?

• iframe properties can change dynamically on some web pages, such as iframe id or iframe name every time we reload a webpage, but the position of an iframe remains the same.

<iframe id = ‘iframe_1234’>…</iframe>

• Here, ‘iframe_’ remains same but the numeric values may change with every page load.
• To tackle this problem we can use the iframe index or iframe xpath to uniquely identify an iframe. For example, the below xpath refers to an unique iframe.

//iframe[@owner='archetype']

Code Source

References

: The Inline Frame element - HTML: HyperText Markup Language | MDN

Handling iFrames in Selenium : Tutorial | BrowserStack

Conclusion

While scraping webpages, we may encounter with iframes, and without switching it is not possible to interact with an iframe in Selenium. So, it is important to know how to switch between iframes using Selenium Python.

Hope this article helped you in understanding iframe handling in selenium.