How to Handle iFrames in Selenium and Playwright

Introduction

An iFrame (Inline Frame) is an HTML element that embeds another HTML document inside the current page. Automation tools treat the iframe content as a separate browsing context — you must switch into it before interacting with elements inside.

Common iFrame scenarios:

Switch into an iframe by index, name/id, or WebElement
Interact with elements inside the iframe
Switch back to the main page
Handle nested iFrames

Key Methods Summary

Action	Selenium (Java)	Playwright (JS)	Playwright (Python)
Switch by index	`switchTo().frame(0)`	`frameLocator("iframe").nth(0)`	`frame_locator("iframe").nth(0)`
Switch by name/id	`switchTo().frame("frameName")`	`frameLocator("#frameId")`	`frame_locator("#frameId")`
Switch by element	`switchTo().frame(webElement)`	`frameLocator(...)`	`frame_locator(...)`
Back to main	`switchTo().defaultContent()`	No switch needed	No switch needed
Nested iframe	switch twice	chain frameLocator	chain frame_locator

1. Switch into an iframe by index

Selenium (Java)

// Switch to first iframe on the page (0-based index)
driver.switchTo().frame(0);
 
// Now interact with elements inside the iframe
driver.findElement(By.id("iframeInput")).sendKeys("Hello from iframe");
 
// Switch back to main page
driver.switchTo().defaultContent();

Playwright (JS)

// Playwright uses frameLocator — no explicit switch needed
const frame = page.frameLocator("iframe").first();
await frame.locator("#iframeInput").fill("Hello from iframe");
// No need to switch back — frame is scoped

Playwright (Python)

frame = page.frame_locator("iframe").first
frame.locator("#iframeInput").fill("Hello from iframe")

2. Switch into an iframe by name or id

Selenium (Java)

driver.switchTo().frame("myFrame"); // by name attribute
// or
driver.switchTo().frame("frameId"); // by id attribute
 
WebElement btn = driver.findElement(By.id("frameBtn"));
btn.click();
 
driver.switchTo().defaultContent();

Playwright (JS)

const frame = page.frameLocator("#frameId");
await frame.locator("#frameBtn").click();

Playwright (Python)

frame = page.frame_locator("#frameId")
frame.locator("#frameBtn").click()

3. Switch into an iframe by WebElement

Selenium (Java)

WebElement iframeEl = driver.findElement(By.cssSelector("iframe.practice-frame"));
driver.switchTo().frame(iframeEl);
 
String text = driver.findElement(By.id("frameText")).getText();
System.out.println(text);
 
driver.switchTo().defaultContent();

Playwright (JS)

const frame = page.frameLocator("iframe.practice-frame");
const text = await frame.locator("#frameText").textContent();
console.log(text);

Playwright (Python)

frame = page.frame_locator("iframe.practice-frame")
text = frame.locator("#frameText").text_content()
print(text)

4. Handle nested iFrames

Selenium (Java)

// Switch into outer iframe first
driver.switchTo().frame("outerFrame");
 
// Then switch into inner iframe
driver.switchTo().frame("innerFrame");
 
driver.findElement(By.id("deepElement")).click();
 
// Return to main page in one step
driver.switchTo().defaultContent();

Playwright (JS)

// Chain frameLocator for nested iframes
const innerFrame = page.frameLocator("#outerFrame").frameLocator("#innerFrame");
await innerFrame.locator("#deepElement").click();

Playwright (Python)

inner_frame = page.frame_locator("#outerFrame").frame_locator("#innerFrame")
inner_frame.locator("#deepElement").click()

5. Wait for iframe to be available

Selenium (Java)

WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("dynamicFrame")));
 
driver.findElement(By.id("frameContent")).click();
driver.switchTo().defaultContent();

Playwright (JS)

// Playwright auto-waits for the frame to be ready
const frame = page.frameLocator("#dynamicFrame");
await frame.locator("#frameContent").click(); // waits automatically

Playwright (Python)

frame = page.frame_locator("#dynamicFrame")
frame.locator("#frameContent").click()  # auto-waits

📄 Also Read: Top 10 Best Automation Practice Website