Frame practice · Nested iframes

Three deeply nested iframes

iframe#pact1 contains iframe#pact2, which contains iframe#pact3 — each level has its own input. Practise chained page.frameLocator().frameLocator()... calls and assert the values at every depth.

Outer page · level 0

id=pact1 · pact2 · pact3 input ids=#inp_val · #jex · #glaf outer header=h3

Selector chain: page.frameLocator('#pact1').frameLocator('#pact2').frameLocator('#pact3').locator('#glaf')

What students should practise

Chain three frameLocator calls to reach the deepest input.
Fill each level with a different value and assert the values back.
Read the outer page's h3 and confirm it didn't change.
Refill all three inputs with new values and assert again.

Playwright solution Chained frameLocator() across three levels. Show solution

import { Browser, chromium, FrameLocator, Page, expect } from '@playwright/test';

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();
  await page.goto('/playwright/frames/nested-iframes.html');

  const frame1: FrameLocator = page.frameLocator('#pact1');
  const frame2: FrameLocator = frame1.frameLocator('#pact2');
  const frame3: FrameLocator = frame2.frameLocator('#pact3');

  await frame1.locator('#inp_val').fill('Testing');
  await frame2.locator('#jex').fill('Selenium');
  await frame3.locator('#glaf').fill('Playwright');

  await frame1.locator('#inp_val').fill('Automation');
  await frame2.locator('#jex').fill('Cypress');
  await frame3.locator('#glaf').fill('Typescript');

  const header = await page.locator('h3').innerText();
  console.log(header);
})();