XPath where CSS cannot reach

intermediate CSS vs XPath Challenge 8 of 22

The pricing page lists four plans. Each card has an h3 heading and a price paragraph, and none of them has an id or test id. Write a Playwright locator that uses XPath to select the price of the Pro plan.

Requirements

Use page.locator('xpath=...') (a selector starting with // also counts as XPath).
Identify the plan by its heading text, not by its position. “Pro Plus” must not match.
Resolve to exactly one element, the price paragraph.
Do not use indexes such as [2], position(), :nth-child() or .nth().

Expected output

Resolves to exactly 1 element: the "$29" price paragraph of the Pro plan.

Checks (4)

○Resolves to exactly the intended element(s)
○Uses an XPath locator
○Matches the plan by its heading text
○Does not rely on position

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

<section class="pricing">
  <div class="plan">
    <h3>Starter</h3>
    <p class="price">$0</p>
    <p class="note">For personal projects</p>
    <a class="btn" href="/signup?plan=starter">Choose</a>
  </div>
  <div class="plan">
    <h3>
      Pro
    </h3>
    <p class="price highlight">$29</p>
    <p class="note">Billed monthly</p>
    <a class="btn" href="/signup?plan=pro">Choose</a>
  </div>
  <div class="plan">
    <h3>Pro Plus</h3>
    <p class="price">$59</p>
    <p class="note">Includes priority support</p>
    <a class="btn" href="/signup?plan=pro-plus">Choose</a>
  </div>
  <div class="plan">
    <h3>Enterprise</h3>
    <p class="price">Contact us</p>
    <a class="btn" href="/contact">Talk to sales</a>
  </div>
</section>