After using cy.wait() elements are still detached from the DOM.

Current behavior

After using cy.wait() to wait for ajax calls to complete, then continuing on with assertions, elements are still detached from the DOM.

Desired behavior

The element should not be detached from the DOM.

Test code to reproduce

This is some sample code I’m able to provide. The test will usually fail at any .click(), .type() or at the .select() call

// selecting designer
cy.get("[data-cy=designer]")
  .should("be.empty")
  .type(cyDesigner)
  .wait("@XHR3");

// a dropdown appears
cy.get("[data-cy=targetElement]")
  .should("contain.text", cyType)
  .click()
  .wait(["@XHR4", "@XHR2"]);

// selecting type
cy.get("[data-cy=type]")
  .should("be.empty")
  .type(cyType)
  .wait("@XHR3");

// a dropdown appears
cy.get("[data-cy=targetElement]")
  .should("contain.text", cyType)
  .click()
  .wait(["@XHR4", "@XHR2"]);

// selecting rate
cy.get("[data-cy=rate]")
  .should("contain.text", cyRate)
  .select(cyRate)
  .wait(["@XHR1", "@XHR2"]);

Cypress Version

8.0.0

Other

Summary

So I’m testing an application for a company I work for. The main issue I’m having with Cypress is that periodically (seemingly at random) after using cy.wait() elements will still be detached from the DOM. One weird thing that I’ve noticed is that when comparing the screenshots Cypress takes of when I’m clicking, getting or typing and XHR calls: Cypress is going off of the “request” version of the page (before the Ajax call completes) but the ajax call has been properly waited for by Cypress (as shown by the .wait() command continuing).

Possible Reasons

• Cypress isn’t waiting for the page to fully update with the XHR response data. (See new “Solutions” header)
• A timing error within my app (for whatever reason).
• Not an issue with there being too many XHR calls and Cypress simply isn’t handling them all.

Things I’ve tried:

• Adding duct tape
  • Adding a full one second delay after each cy.wait() statement (this seems to work but there’s about a 1% chance of failing)
  • Increasing the defaultCommandTimeout in the cypress.json file from 4s to 10s (usually works)
• Looked at and implemented the proper ways of using cy.wait() here when dealing with this error.
• I’ve looked at a bunch of other issues, especially the main one
• Tried to use Cypress.$, plugins like cy.waitUntil and community suggestions like cy.getAttached() or cy.getSettled()

Solution

• Switching to cy.route and cy.server from cy.intercept solved all of the issues I’ve been getting. Case in point, its probably something within cy.intercept that is causing these errors.

[RobertMartinGMSL]

I’m also seeing this on .click() (as mentioned above) as well as .tick(). Note that this does not occur when reverting to cy.server() and cy.route(), but is does occur using cy.intercept (currently using cy v8+)

Seems that the cy.wait is no longer waiting for the event it is waiting on to complete 🤷 I worked around this using the suggestion above

Adding a full one second delay after each cy.wait() statement

But as mentioned, there is a low chance of this not working on our CI (where the tests run slower)

this seems to work but there’s about a 1% chance of failing)

NB: for anybody experiencing this problem only in the CI, I managed to recreate locally by throttling Chrome using dev tools (F12) to “Fast 3G”.

[jennifer-shehane]

Duplicate of https://github.com/cypress-io/cypress/issues/7306