Loading…

Choose a resilient locator for this product card

This is the actual rendered markup of a Practice Hub product card:

html

<article class="product-card" data-testid="product-card">
  <h3>Standing Desk Converter</h3>
  <p class="sku">SKU-1042</p>
  <div class="product-meta">
    <shadow-price value="129.99"></shadow-price>
    <span>14 in stock</span>
  </div>
  <button class="btn btn-primary css-1x9fj2">Add to cart</button>
</article>

A colleague has proposed five locators for the "Add to cart" button of a specific product:

text

A. //div[@id='root']/div/main/section[2]/article[3]/button
B. .css-1x9fj2
C. //button[text()='Add to cart']
D. page.getByTestId('product-card').nth(2).getByRole('button', { name: 'Add to cart' })
E. page.getByRole('article').filter({ hasText: 'Standing Desk Converter' }).getByRole('button', { name: 'Add to cart' })

Your task: rank them, and justify the ranking by naming the specific change that breaks each one. Then state which you would use and what you would ask the developer for.