Cypress wait for table to load

Question

I'm trying to test and click the table row that appears after I type text in the input component. The table loads after delay (after getting response from external API). What woroked is using timeout that waits until certain element is loaded:

cy.get('[data-cy=searchBar]').type("Name")
cy.get('[data-cy=dataTable]').get('tbody').contains("td", "Result of name search",  {timeout: 15000}).click()

So cypress waits until there is such row with given value, but the value my change and wont always be the same so is there a way to do exatcly same thing as above but selecting second row after table loads? (by default there are no items in the table)

I tried using this:

cy.get('[data-cy=searchBar]').type("Name")
cy.get('[data-cy=dataTable]').get('tbody').get("tr").eq(2, {timeout: 15000}).click()

But it seems cypress loads the table after checking for the second tr which fails the test.

Answer 1

See Cypress - how to wait for second of two elements to appear, you can add a should() to check the row length

cy.get('[data-cy=dataTable]')
  .find('tbody tr')              // ignore thead rows
  .should('have.length', 3)      // retries above cy.find() until true
  .eq(2)
  .click()

I'm not sure if you want to click the row (tr) or the cell (td). Looking at your first example (the one that works), it's the cell you want to click.

So you can add a cell selector

cy.get('[data-cy=dataTable]')
  .find('tbody tr')              // ignore thead rows
  .should('have.length', 3)      // retries above cy.find() until true
  .eq(2)                         // take 3rd row
  .find('td').eq(5)              // take 6th cell
  .click()

Answer 2

Cypress requires parameter values to be in quotation marks also if you know exactly the text you will find I suggest the following approach that is working for me:

cy.get('[data-cy="searchBar"]').type("Name")
cy.contains('[data-cy="dataTable"] td', "Result of name search")
    .should('be.visible')
    .click()

Answer 3

One way to make sure that cypress waits till the timeout, is to add the nth location of tr inside cy.get(), something like:

cy.get('[data-cy=dataTable] > tbody > tr:nth-child(3)', {timeout: 15000}).click()