Working with IFrames and frames
Frames are a now deprecated means of building a site layout from multiple documents on the same domain. You are unlikely to work with them unless you are working with an pre HTML5 webapp. Iframes allow the insertion of a document from an entirely different domain, and are still commonly used.
If you need to work with frames or iframes, WebDriver allows you to work with them in the same way. Consider a button within an iframe. If we inspect the element using the browser development tools, we might see the following:
<div id="modal">
<iframe id="buttonframe" name="myframe" src="https://seleniumhq.github.io">
<button>Click here</button>
</iframe>
</div>
If it was not for the iframe we would expect to click on the button using something like:
//This won't work
driver.findElement(By.tagName("button")).click();
# This Wont work
driver.find_element(By.TAG_NAME, 'button').click()
//This won't work
driver.FindElement(By.TagName("button")).Click();
# This won't work
driver.find_element(:tag_name,'button').click
// This won't work
await driver.findElement(By.css('button')).click();
//This won't work
driver.findElement(By.tagName("button")).click()
However, if there are no buttons outside of the iframe, you might instead get a no such element error. This happens because Selenium is only aware of the elements in the top level document. To interact with the button, we will need to first switch to the frame, in a similar way to how we switch windows. WebDriver offers three ways of switching to a frame. Following example code shows how we can do that, using a live web example.
Using a WebElement
Switching using a WebElement is the most flexible option. You can find the frame using your preferred selector and switch to it.
//switch To IFrame using Web Element
WebElement iframe = driver.findElement(By.id("iframe1"));
//Switch to the frame
driver.switchTo().frame(iframe);
assertEquals(true, driver.getPageSource().contains("We Leave From Here"));
//Now we can type text into email field
WebElement emailE= driver.findElement(By.id("email"));
emailE.sendKeys("admin@selenium.dev");
emailE.clear(); # Store iframe web element
iframe = driver.find_element(By.CSS_SELECTOR, "#modal > iframe")
# switch to selected iframe
driver.switch_to.frame(iframe)
# Now click on button
driver.find_element(By.TAG_NAME, 'button').click()
//Store the web element
IWebElement iframe = driver.FindElement(By.CssSelector("#modal>iframe"));
//Switch to the frame
driver.SwitchTo().Frame(iframe);
//Now we can click the button
driver.FindElement(By.TagName("button")).Click();
# Store iframe web element
iframe = driver.find_element(:css,'#modal > iframe')
# Switch to the frame
driver.switch_to.frame iframe
# Now, Click on the button
driver.find_element(:tag_name,'button').click
// Store the web element
const iframe = driver.findElement(By.css('#modal > iframe'));
// Switch to the frame
await driver.switchTo().frame(iframe);
// Now we can click the button
await driver.findElement(By.css('button')).click();
//Store the web element
val iframe = driver.findElement(By.cssSelector("#modal>iframe"))
//Switch to the frame
driver.switchTo().frame(iframe)
//Now we can click the button
driver.findElement(By.tagName("button")).click()
Using a name or ID
If your frame or iframe has an id or name attribute, this can be used instead. If the name or ID is not unique on the page, then the first one found will be switched to.
//switch To IFrame using name or id
driver.findElement(By.name("iframe1-name"));
//Switch to the frame
driver.switchTo().frame(iframe);
assertEquals(true, driver.getPageSource().contains("We Leave From Here"));
WebElement email=driver.findElement(By.id("email"));
//Now we can type text into email field
email.sendKeys("admin@selenium.dev");
email.clear(); # Switch frame by id
driver.switch_to.frame('buttonframe')
# Now, Click on the button
driver.find_element(By.TAG_NAME, 'button').click()
//Using the ID
driver.SwitchTo().Frame("buttonframe");
//Or using the name instead
driver.SwitchTo().Frame("myframe");
//Now we can click the button
driver.FindElement(By.TagName("button")).Click();
# Switch by ID
driver.switch_to.frame 'buttonframe'
# Now, Click on the button
driver.find_element(:tag_name,'button').click
// Using the ID
await driver.switchTo().frame('buttonframe');
// Or using the name instead
await driver.switchTo().frame('myframe');
// Now we can click the button
await driver.findElement(By.css('button')).click();
//Using the ID
driver.switchTo().frame("buttonframe")
//Or using the name instead
driver.switchTo().frame("myframe")
//Now we can click the button
driver.findElement(By.tagName("button")).click()
Using an index
It is also possible to use the index of the frame, such as can be queried using window.frames in JavaScript.
//switch To IFrame using index
driver.switchTo().frame(0); # Switch to the second frame
driver.switch_to.frame(1)
// Switches to the second frame
driver.SwitchTo().Frame(1);
# switching to second iframe based on index
iframe = driver.find_elements(By.TAG_NAME,'iframe')[1]
# switch to selected iframe
driver.switch_to.frame(iframe)
// Switches to the second frame
await driver.switchTo().frame(1);
// Switches to the second frame
driver.switchTo().frame(1)
Leaving a frame
To leave an iframe or frameset, switch back to the default content like so:
//leave frame
driver.switchTo().defaultContent(); # switch back to default content
driver.switch_to.default_content()
// Return to the top level
driver.SwitchTo().DefaultContent();
# Return to the top level
driver.switch_to.default_content
// Return to the top level
await driver.switchTo().defaultContent();
// Return to the top level
driver.switchTo().defaultContent()
