Click a button in a table row
intermediate Locators Challenge 6 of 22
The orders table has a Refund button in every row, plus a “Refund all” button below it. Write a locator for the Refund button of Order #1042 only.
Requirements
- Scope to the row first with
page.getByRole('row')(filter it, or give it aname). - Chain
.getByRole('button', ...)from the row. - Resolve to exactly one element.
- Do not use
.nth(),.first()or.last().
Expected output
Resolves to exactly 1 element: the Refund button in the Order #1042 row.
Checks (4)
- ○Resolves to exactly the intended element(s)
- ○Scopes to the row with getByRole('row')
- ○Chains a button locator inside the row
- ○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
<section class="orders">
<h2>Recent orders</h2>
<table id="orders">
<thead>
<tr><th>Order</th><th>Customer</th><th>Total</th><th>Actions</th></tr>
</thead>
<tbody>
<tr>
<td>Order #1041</td><td>Priya Shah</td><td>$54.00</td>
<td><button type="button">View</button> <button type="button">Refund</button></td>
</tr>
<tr>
<td>Order #1042</td><td>Tom Becker</td><td>$120.50</td>
<td><button type="button">View</button> <button type="button">Refund</button></td>
</tr>
<tr>
<td>Order #1043</td><td>Ana Lima</td><td>$18.99</td>
<td><button type="button">View</button> <button type="button" disabled>Refund</button></td>
</tr>
</tbody>
</table>
<button type="button" class="bulk">Refund all</button>
</section>