← All questions

How do you assert on a row in a table without writing a CSS chain?

Then order "1042" should show status "Shipped"

this.page.locator('tbody tr:nth-child(3) td:nth-child(4)');

2 answers

• 26votes

  Page-object job, and the fix is to stop addressing the row by position and start addressing it by what is in it.

  tsCopy

  @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.

  RGanswered by Rafa Garrido12,996 · 28 Sept 2022
• 11votes

  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.

  Locator strategy

  LHanswered by Lena Hartwig10,388 · 4 Oct 2022