Skip to content
QA Knowledge Hub

Iframes and nested iframes

Intermediate

An element inside an iframe and a second iframe nested inside the first.

Practice area

Frame 1

Nested frames

Outside the frames

Tasks to automate

  1. Type text into the input inside the first iframe and click its button; assert the message inside that frame.
  2. Switch back to the main page and click the button outside the frame.
  3. Read the heading of the nested iframe (two levels deep).
  4. Try to find the inner input without switching frames and note the exception you get.

Model solutions

Try the tasks first. These show one good way, not the only way.

Selenium (Java)
driver.switchTo().frame("pg-frame-1");              // by id or name
driver.findElement(By.id("inner-input")).sendKeys("hello");
driver.findElement(By.id("inner-btn")).click();
String msg = driver.findElement(By.id("inner-msg")).getText();
driver.switchTo().defaultContent();                 // back to the main page

// Nested: outer first, then inner
driver.switchTo().frame("pg-frame-outer");
driver.switchTo().frame("pg-frame-inner");
String heading = driver.findElement(By.tagName("h3")).getText();
driver.switchTo().defaultContent();
Playwright (TypeScript)
const frame = page.frameLocator('#pg-frame-1');
await frame.locator('#inner-input').fill('hello');
await frame.locator('#inner-btn').click();
await expect(frame.locator('#inner-msg')).toContainText('hello');

const inner = page.frameLocator('#pg-frame-outer').frameLocator('#pg-frame-inner');
await expect(inner.locator('h3')).toHaveText('Nested frame');

Element IDs on this page are stable and will not change. Nothing you do here is sent to a server.