Orders table, and the scenario I want reads:
Then order "1042" should show status "Shipped"What I have in the page object is this, which works until someone sorts the table or the row moves to page two:
this.page.locator('tbody tr:nth-child(3) td:nth-child(4)');Is there a table-aware step I have missed, or is this a page-object job?
Page-object job, and the fix is to stop addressing the row by position and start addressing it by what is in it.
@Fixture<typeof test>('ordersPage')
export class OrdersPage extends BasePage {
row(order: string) {
return this.page.getByRole('row', { name: new RegExp(order) });
}
@Then('order {string} should show status {string}')
async status(order: string, status: string) {
await expect(this.row(this.render(order)).getByRole('cell', { name: status })).toBeVisible();
}
}nth-child encodes the sort order of the table into your test, so the test fails when the sort changes and passes when the wrong row happens to land in position three. The row helper is worth having as a method because you will want it again for actions inside the row.
this.render() is there so order "{{orderId}}" works when the id came from an earlier API step.
One thing not to do here, which I learned the slow way: do not wrap the row locator in a heal context.
A heal context is supposed to identify one element, and text: '1042' in a table matches the row, the cell and probably a total somewhere. Ambiguity lowers the score and the healer can resolve to the wrong element, which in a table means a green test asserting on the wrong order.
Heal the container and the controls around it; keep the row addressing plain.
Have a different question? Ask it.