CODEWITHSUNDEEP
vue.jscypresse2e-testing
Alex T
Alex T

Reputation: 3754

Cypress wait for table to load

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.

Upvotes: 1

Views: 5038

Answers (3)

user8745435
user8745435

Reputation:

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()

Upvotes: 3

Alapan Das
Alapan Das

Reputation: 18624

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()

Upvotes: 1

Rosen Mihaylov
Rosen Mihaylov

Reputation: 1427

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()

Upvotes: 1

Related Questions