Embed

Iframes

Advanced

Parent counter: 0

Live widget · interact freely

Manual test goal

Reach into an iframe, fill a form inside it, and verify the parent receives the submission via postMessage.

Expected result

Submitting inside the frame updates a counter on the parent page.

Stable selectors

Embedded form[data-testid="frame-host"]
Parent counter[data-testid="frame-counter"]

Reference Playwright spec

iframes.spec.ts

import { test, expect } from '@playwright/test';

test('interact across iframe boundary', async ({ page }) => {
  await page.goto('https://lab.hakdogan.com/practice/iframes');

  const frame = page.frameLocator('[data-testid="frame-host"] iframe');
  await frame.getByTestId('frame-input').fill('cross-frame value');
  await frame.getByTestId('frame-submit').click();

  await expect(page.getByTestId('frame-counter')).toContainText('1');
});

Demo Simulator

Simulated Playwright run · no real browser is launched

Idleiframes.spec.ts

https://lab.hakdogan.com/practice/iframes

# console output will stream here