QABattle

Playwright / Quiz

Beyond the DOM Wall

frameLocator, shadow-root piercing, and the two DOM boundaries where ordinary locators stop working: payment iframes and web components.

Difficulty
Hard
Format
Quiz
Points
200
Estimate
10 min

// MISSION BRIEF

Your Mission

The payment form lives in a Stripe iframe. The date picker is a web component behind a shadow root. Your beautiful getByRole locator times out against both, for two completely different reasons.

This quiz covers the boundary rules: what pierces shadow DOM, what does not, and how frames really work.

Speed bonus active.

// FIRST CONTACT

Battle teaser

The card number field sits inside <iframe id='payment'>. page.getByLabel('Card number') times out. The fix:

  1. Apage.getByLabel('Card number', { deep: true })
  2. BSwitch to XPath, it crosses iframe boundaries
  3. CIncrease the timeout, iframes just load slowly
  4. Dpage.frameLocator('#payment').getByLabel('Card number'), page locators do not reach into iframes
Answers, scoring, hints, and the full battle stay sealed.

// SKILL TAGS

playwrightiframesshadow-domweb-componentse2e-testing