Test passing locally but not in CI - cypress

Question

I have this code:

<div class="input-group" data-cy="k-item">
  <input type="text" placeholder="my_placeholder" value="my_value">
  <div data-cy="delete-field" role="button" tabindex="-1" class="r_field">
    <i class="close"></i>
  </div>
</div>

I have my cypress code for clicking on "close" and check that the item when submit is deleted in the table:

cy.getBySel('k-item').within(() => {
    cy.getBySel('delete-field').click().click()
   })
 cy.getBySel('register').click()
 cy.intercept('GET', 'route_intercepted').as('getRoute')
 cy.wait('@getRoute')
 cy.get('table').should('not.contain', 'my_item')
})

The test is passing in my local and even in headless mode but when in pipeline it is failing saying:

AssertionError: Timed out retrying after 4000ms: Expected not to find content: 'my_item' within the selector: 'table' but continuously found it.

I think the item is not getting deleted after the submit. I am experiencing the same issue with force:true. Have anyone experienced this issue please and also is there any other way to make the same tests more robust.

Answer 1

You have to wait the response on the wait call and just then you can check your element:

cy.getBySel('k-item').within(() => {
    cy.getBySel('delete-field').click().click();
})
cy.getBySel('register').click();
cy.intercept('GET', 'route_intercepted').as('getRoute');
cy.wait('@getRoute').then(()=>{ //wait the response of your GET, then check
    cy.get('table').should('not.contain', 'my_item');
   })
})

Answer 2

Add another assertion for an element on the page that is not delayed in rendering. This could be a header, spinner, etc. but must be something immediately rendered, not something async as this list of items appears to be.

cy.wait('@getRoute')
// add another assertion here
cy.get('table').should('not.contain', 'my_item')

Answer 3

Try moving the intercept to the top of the test. It's a "listener" so it should be set up before the delete event is triggered.

cy.intercept('GET', 'route_intercepted').as('getRoute')

cy.getBySel('k-item').within(() => {

  cy.getBySel('delete-field').click()
  cy.getBySel('register').click()

  cy.wait('@getRoute')
  cy.get('table').should('not.contain', 'my_item')
})

Also the alias wait needs an @, but I presume that was a typo.

Answer 4

How about you increase the timeout to 7 seconds and try. Mostly in CI systems since the resources are shared so the execution speed might vary, If the line below works locally then my best guess is increasing the timeout should do the job.

cy.get('table', {timeout: 7000}).should('not.contain', 'my_item')