Reach into a payment iframe
intermediate Frames Challenge 7 of 22
The checkout page embeds the card form from a payment provider in an iframe with id="payment". Write a locator for the Card number input inside that iframe.
Requirements
- Enter the iframe with
page.frameLocator(...)(orpage.locator(...).contentFrame()). - Use
getByLabelfor the input. - Resolve to exactly one element. The “Gift card number” field in the main page must not match.
- Do not use
.nth(),.first()or.last().
Expected output
Resolves to exactly 1 element: the "Card number" input inside the #payment iframe.
Checks (4)
- ○Resolves to exactly the intended element(s)
- ○Enters the iframe with frameLocator or contentFrame
- ○Uses getByLabel for the input
- ○Does not rely on position (nth, first or last)
example.spec.tsLocator engine · not a real Playwright run
Ctrl/⌘ + Enter to check locator · your code is saved in this browser
Results
Check your locator to see which elements it resolves to.
Page under test
matches are outlined in greenView page HTML
<main class="checkout">
<h1>Payment</h1>
<form class="gift-card">
<label for="gift">Gift card number</label>
<input id="gift" name="gift" inputmode="numeric">
<button type="button">Apply</button>
</form>
<iframe id="payment" title="Secure card payment" srcdoc="
<form>
<label for="cc">Card number</label>
<input id="cc" name="cardnumber" autocomplete="cc-number">
<label for="exp">Expiry date</label>
<input id="exp" name="exp" placeholder="MM/YY">
<label for="cvc">CVC</label>
<input id="cvc" name="cvc">
</form>"></iframe>
<iframe id="offers" title="Offers" srcdoc="<p>Get 2% back when you add a new card number.</p>"></iframe>
<button type="submit">Pay $42.00</button>
</main>