Pick the right heading level

beginner Locators Challenge 2 of 22

The checkout page uses the word “Shipping” in five places. Write a locator for the level 2 heading “Shipping” that introduces the shipping section.

Requirements

Use getByRole('heading', ...) with the level option.
Resolve to exactly one element. The h3 headings, the “Shipping and returns” footer heading and the paragraph styled as a title must not match.
Do not use .nth(), .first() or .last().

Expected output

Resolves to exactly 1 element: the h2 "Shipping" that starts the shipping section.

Checks (4)

○Resolves to exactly the intended element(s)
○Uses getByRole('heading', ...)
○Uses the level option
○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 green

View page HTML

<main class="checkout">
  <h1>Checkout</h1>
  <section class="shipping" aria-labelledby="ship-h">
    <h2 id="ship-h">Shipping</h2>
    <h3>Shipping address</h3>
    <p>12 Market Street, Leeds LS1 6AA</p>
    <h3>Shipping method</h3>
    <p>Standard delivery (3 to 5 days)</p>
  </section>
  <section class="payment">
    <h2>Payment</h2>
    <p class="title">Shipping</p>
    <p>Billing address is the same as shipping.</p>
  </section>
  <aside class="summary">
    <h3>Shipping</h3>
    <p>Free</p>
  </aside>
  <footer>
    <h2>Shipping and returns</h2>
    <a href="/policy">Read the policy</a>
  </footer>
</main>

Pick the right heading level

Requirements

Expected output

Checks (4)

Related interview questions