Skip to main content
SeleniumDecoded

Interact With an Element Inside an iFrame and Return

Switch into a frame by element, act, and switch back safely, with a helper that guarantees the return even when an assertion fails.

Stable Verified against Selenium 4.48.0

Problem

The card number field lives in a payment provider’s iframe. findElement from the main document cannot see it, and after switching in, forgetting to switch back makes every later locator fail with NoSuchElement.

Solution

Locate the frame element, switch by element, do the work inside a try/finally that switches back to the default content (or parent frame).

Scoped frame interaction
Selenium 3 & 4 Stable 
public static <T> T inFrame(WebDriver driver, By frameLocator, Function<WebDriver, T> work) {
  WebElement frame = new WebDriverWait(driver, Duration.ofSeconds(10))
      .until(ExpectedConditions.presenceOfElementLocated(frameLocator));
  driver.switchTo().frame(frame);
  try {
      return work.apply(driver);
  } finally {
      driver.switchTo().defaultContent();     // or parentFrame() for nested frames
  }
}


inFrame(driver, By.cssSelector("iframe[name='card-number']"), d -> {
  d.findElement(By.id("cardNumber")).sendKeys("4242424242424242");
  return null;
});
inFrame(driver, By.cssSelector("iframe[name='card-expiry']"), d -> {
  d.findElement(By.id("expiry")).sendKeys("12/30");
  return null;
});
driver.findElement(By.id("pay")).click();     // back in the main document
from contextlib import contextmanager


@contextmanager
def in_frame(driver, frame_locator):
  frame = WebDriverWait(driver, 10).until(EC.presence_of_element_located(frame_locator))
  driver.switch_to.frame(frame)
  try:
      yield driver
  finally:
      driver.switch_to.default_content()


with in_frame(driver, (By.CSS_SELECTOR, "iframe[name='card-number']")) as d:
  d.find_element(By.ID, "cardNumber").send_keys("4242424242424242")
with in_frame(driver, (By.CSS_SELECTOR, "iframe[name='card-expiry']")) as d:
  d.find_element(By.ID, "expiry").send_keys("12/30")
driver.find_element(By.ID, "pay").click()
async function inFrame(driver, frameLocator, work) {
const frame = await driver.wait(until.elementLocated(frameLocator), 10000);
await driver.switchTo().frame(frame);
try {
  return await work(driver);
} finally {
  await driver.switchTo().defaultContent();
}
}


await inFrame(driver, By.css("iframe[name='card-number']"), (d) => d.findElement(By.id('cardNumber')).sendKeys('4242424242424242'));
await inFrame(driver, By.css("iframe[name='card-expiry']"), (d) => d.findElement(By.id('expiry')).sendKeys('12/30'));
await driver.findElement(By.id('pay')).click();
public static T InFrame<T>(IWebDriver driver, By frameLocator, Func<IWebDriver, T> work)
{
  var frame = new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(d => d.FindElement(frameLocator));
  driver.SwitchTo().Frame(frame);
  try { return work(driver); }
  finally { driver.SwitchTo().DefaultContent(); }
}


InFrame(driver, By.CssSelector("iframe[name='card-number']"), d => { d.FindElement(By.Id("cardNumber")).SendKeys("4242424242424242"); return 0; });
InFrame(driver, By.CssSelector("iframe[name='card-expiry']"), d => { d.FindElement(By.Id("expiry")).SendKeys("12/30"); return 0; });
driver.FindElement(By.Id("pay")).Click();

Why It Works

A frame is a separate document; the driver’s search context must be switched to it explicitly. Switching by WebElement is robust to frame order and naming changes, and finally guarantees the driver is back in the main document even when the work throws.

Gotchas

  • Nested frames: switch to the outer, then the inner; use parentFrame() to go up one level instead of defaultContent() when you want to stay in the outer frame.
  • Cross-origin frames (payment providers) are fine for WebDriver, unlike JavaScript; you can type into them but cannot run scripts that reach across.
  • frameToBeAvailableAndSwitchToIt combines the wait and switch in Java and Python; the helper above is clearer when you need the guaranteed return.

Learn the theory