What is iFrame ?
We can handle frames/iframes present in the webpage using driver.switch_to Command in selenium python. Frame/iFrame is nothing but another webelement in the HTML page, which displays another part of the webpage.
If you take a look at the DOM structure of a page that contains an iframe, you will never find the inner content of the iframe. And you won't be able to interact with it via the DOM. We have to switch into the frame to see the elements present in the frame.
In this Selenium Python tutorial, we’ll learn to switch between IFrames. An IFrame (Inline Frame) is an HTML element that allows rendering a document within another HTML document on a webpage.
We prefer to use IFrames when we aspire to host content from an external source on our webpage. It could be an image, a video, advertisements from other vendors, to highlight some information, etc.
HTML provides “< iframe > < /iframe >” tags to identify an IFrame inside an HTML document.
Switch Between IFrames Using Selenium Python
If a webpage contains multiple IFrames, then we will need to switch between them. Selenium Python API provides “switch_to.iframe (self, frame_reference)” method to move to a particular IFrame.
driver.switch_to.iframe(self,frame reference)Where,
the “<frame_reference>” parameter is the locator used to identify the IFrame.
Let’s take a sample HTML code that will create multiple IFrames in the web page.
<!DOCTYPE html>
<html>
<head>
<title>Switching Between IFrames Demo</title>
</head>
<body>
<h1>Welcome Viewers</h1>
<iframe name="frame1" id="FR1" src="//www.techbeamers.com" height="500" width="400"> </iframe>
<iframe name="frame2" id="FR2" height="500" width="400" src="http://www.seleniumhq.org"> </iframe>
</body>
</html>There are two IFrames embedded in this web page. To perform switching between the above IFrames first, we have to locate them on the web page. Take a look at the code; it provides three different mechanisms by which we can do this. They are.
– By using the tag name ( in this case ‘iframe’)
– By using the Id of IFrame
– By using the name of IFrame
Here is the specified code snippet to perform switching between frames.
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
import time
driver = webdriver.Firefox()
driver.maximize_window()
location = "file://<Specify Path to IFrame.HTML>"
driver.get(location)
########Section-1
# get the list of iframes present on the web page using tag "iframe"
seq = driver.find_elements_by_tag_name('iframe')
print("No of frames present in the web page are: ", len(seq))
#switching between the iframes based on index
for index in range(len(seq)):
driver.switch_to_default_content()
iframe = driver.find_elements_by_tag_name('iframe')[index]
driver.switch_to.frame(iframe)
driver.implicitly_wait(30)
#highlight the contents of the selected iframe
driver.find_element_by_tag_name('a').send_keys(Keys.CONTROL, 'a')
time.sleep(2)
# undo the selection within the iframe
driver.find_element_by_tag_name('p').click()
driver.implicitly_wait(30)
driver.switch_to.default_content()
########Section-2
#switch to a specific iframe (First frame) using Id as locator
iframe = driver.find_element_by_id('FR1')
driver.switch_to.frame(iframe)
time.sleep(2)
driver.find_element_by_id('s').send_keys("Selected")
driver.switch_to.default_content()
########Section-3
#switch to a specific iframe (Second frame) using name as locator
iframe = driver.find_element_by_name('frame2')
driver.switch_to.frame(iframe)
time.sleep(2)
driver.find_element_by_tag_name('a').send_keys(Keys.CONTROL, 'a')Let’s analyze the above code step by step.
1) First of all, you must save the HTML code, given above as IFrame.HTML on your machine.
2) Next, you must provide the correct path in the placeholder given in the above snippet. You must use forward slash while specifying the file-path of the web page. Otherwise, it may not work accurately. For example, here I have given the path of the file as.
location = "file://C:/Users/Automation-Dev/Desktop/selenium/IFrame.HTML"3) In Section-1 of the code,
seq= driver.find_elements_by_tag_name('iframe')provides the list of IFrames present on the web page.
4) We do the switching between the IFrames by traversing through this list using the following step.
iframe = driver.find_elements_by_tag_name('iframe')[index]
driver.switch_to.frame(iframe)5) Every time you need to move back from an IFrame to the parent HTML. Selenium Webdriver provides the following method.
driver.switch_to.default_content()6) In Section-2, we switch to a specific IFrame using the locator as ‘id.’
iframe = driver.find_element_by_id('FR1')7) In Section-3, we switch to a specific IFrame using the locator as ‘name.’
iframe = driver.find_element_by_name('frame2')Quick Wrapup – Switch Between IFrames
It is essential to understand how to use Selenium Python to switch between IFrames. You can re-use this technique to solve real-time use cases in your projects.
For more updates on Selenium Python tutorials, do follow our social media (Facebook/Twitter) accounts.
