TESTHEON Practice Lab

Component Lab G · Browsing contexts

Frames and Windows Lab

Practise same-origin frames, nested documents, dynamic iframes, tabs, popups, and safe postMessage flows without third-party content.

Start the fixtureRead the E2E guide

PRACTICE FIXTURE — intentionally built for automation practice

Single frame and frame form

Two titled same-origin frames expose stable text and a complete form workflow.

Nested and multiple frames

The parent contains a second iframe, while adjacent frames require explicit scoping by title.

Dynamically loaded iframe

The iframe is created after a controlled delay and exposes a visible ready state.

Dynamic frame not loaded.

Tabs, popups, and parent communication

Each same-origin child has a named purpose and can return a deterministic result to this parent.

Open new tab fixture

No child window result received.

Passing examples

Start with observable behavior

These snippets match executable tests stored inexamples/playwright-ts/.

Frame locator example
const formFrame = page.frameLocator('iframe[title="Frame with form"]');
await formFrame.getByLabel('Project name').fill('Phoenix');
await formFrame.getByRole('button', { name: 'Save frame form' }).click();
await expect(formFrame.getByRole('status')).toHaveText('Frame form saved: Phoenix.');
New page example
const newPagePromise = context.waitForEvent('page');
await page.getByRole('link', { name: 'Open new tab fixture' }).click();
const child = await newPagePromise;
await expect(child.getByRole('heading', { name: 'New tab fixture' })).toBeVisible();