Skip to Jobs

Iframe & shadow DOM

Same-origin iframe (HTTP embed + optional srcDoc), plus a shadow-root custom element. The HTTP embed loads /testing-tools/playground/embed/form; framing is allowed with X-Frame-Options: SAMEORIGIN on that path only.

Open editorial guide: xpath css selector practice

Challenge mode: append ?challenge=1 to this URL for harder selectors / no helper test ids where noted.

Interactive demo

Same-origin iframe (HTTP)

Loads /testing-tools/playground/embed/form — use frameLocator / switchTo.frame.

Inline iframe (srcDoc)

No second navigation — useful if you only need a nested document for selector practice.

Shadow DOM custom element

Use pierce APIs or keyboard focus into the shadow root per your framework.

Practice ideas

Manual testing

  • Switch into both iframes
  • Type in shadow input
  • Submit and handle alert

Automation

  • frameLocator in Playwright
  • WebDriver switchTo.frame
  • pierce shadow or keyboard focus

Locator hints (beginner)

  • [data-testid="pg-iframe-demo"]
  • [data-testid="pg-iframe-srcdoc"]
  • shadow: [data-testid="pg-shadow-input"]