Frame practice · iframe + frameset

Frame handling practice

Two scenarios — a modern <iframe> hosting a registration form, and a classic <frameset> page with three named frames. Practise page.frameLocator(), page.frames(), and counting/iterating frame elements.

Vehicle registration · iframe practice

① Single iframe — fill the embedded form

The form below is loaded inside an iframe[id*='frame-one']. Practise page.frameLocator(...) to reach #RESULT_TextField-1 and the rest.

id=frame-one name=vehicle-form data-testid=iframe-form-card title-host=h3.details__form-preview-title

Selector matrix: iframe[id*='frame-one'] · iframe[name='vehicle-form'] · iframe[title*='Vehicle']

② Multi-frame frameset — named frames

A separate page renders three classic <frame> elements (main, side, footer). Open it in a new tab to use page.locator('//frame').all() and count page.frames().

Open multi-frames frameset 3 frames named main / side / footer · best opened in a new tab

frame[name='main'] frame[name='side'] frame[name='footer']

What students should practise

Reach #RESULT_TextField-1 via page.frameLocator("iframe[id*='frame-one']") and fill it.
Read the outer-page heading h3.details__form-preview-title and assert the page title.
On the frameset page, use frameLocator("[name='main']") and read its h2.
Count frames via page.locator('//frame').all() and page.frames().length.
Iterate frames and log each frame's name and src.

Playwright solution Both scenarios — iframe form fill and frameset enumeration. Show solution

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

(async () => {
  const browser: Browser = await chromium.launch({ headless: false, channel: 'chrome' });
  const page: Page = await browser.newPage();

  // 1) Single iframe — fill the embedded form
  await page.goto('/playwright/frames/index.html');
  const formFrame: FrameLocator = page.frameLocator("iframe[id*='frame-one']");
  await formFrame.locator('#RESULT_TextField-1').fill('Test Automation');

  const previewTitle = await page.locator('h3.details__form-preview-title').innerText();
  console.log(previewTitle);

  // 2) Multi-frame frameset
  await page.goto('/playwright/frames/multi-frames.html');
  const mainFrame: FrameLocator = page.frameLocator("[name='main']");
  const header = await mainFrame.locator('h2').innerText();
  console.log(header);

  // total number of <frame> elements on the page
  const allFrames: Locator[] = await page.locator('//frame').all();
  console.log('total number of frames: ' + allFrames.length);

  for (const frameEle of allFrames) {
    console.log(await frameEle.getAttribute('name'), ': ', await frameEle.getAttribute('src'));
  }

  // page.frames() includes the main page frame too
  console.log(page.frames().length);
})();