After upgrade to version 3.6.1 tests start failing with " CypressError: Timed out retrying: cy.click() failed because this element is detached from the DOM"

[mschaaf]

Current behavior:

After upgrade to 3.6.1 from 3.4.1 our cypress tests start to fail for the following constructs.

cy.get('fieldset > legend > i').should('be.visible').click()

fails with

     CypressError: Timed out retrying: cy.click() failed because this element is detached from the DOM.

<i expander="" id-to-expand="login-username-password-content" expanded="false" class="fa fa-plus-square ng-isolate-scope"></i>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

  > cy.should()

This DOM element likely became detached somewhere between the previous and current command.

Common situations why this happens:
  - Your JS framework re-rendered asynchronously
  - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

https://on.cypress.io/element-has-detached-from-dom
      at Object.cypressErr (/__cypress/runner/cypress_runner.js:104968:11)
      at Object.throwErr (/__cypress/runner/cypress_runner.js:104923:18)
      at Object.throwErrByPath (/__cypress/runner/cypress_runner.js:104955:17)
      at Object.retry (/__cypress/runner/cypress_runner.js:96290:16)
      at retryActionability (/__cypress/runner/cypress_runner.js:85007:19)
      at tryCatcher (/__cypress/runner/cypress_runner.js:139045:23)
      at Function.Promise.attempt.Promise.try (/__cypress/runner/cypress_runner.js:136320:29)
      at tryFn (/__cypress/runner/cypress_runner.js:96748:21)
      at whenStable (/__cypress/runner/cypress_runner.js:96783:12)
      at /__cypress/runner/cypress_runner.js:96333:16
      at tryCatcher (/__cypress/runner/cypress_runner.js:139045:23)
      at Promise._settlePromiseFromHandler (/__cypress/runner/cypress_runner.js:136981:31)
      at Promise._settlePromise (/__cypress/runner/cypress_runner.js:137038:18)
      at Promise._settlePromise0 (/__cypress/runner/cypress_runner.js:137083:10)
      at Promise._settlePromises (/__cypress/runner/cypress_runner.js:137162:18)
      at Promise._fulfill (/__cypress/runner/cypress_runner.js:137107:18)

We followed the link from the error message and tried to change code to:

cy.get('fieldset > legend > i').should('be.visible');
cy.get('fieldset > legend > i').click()

But this didn't change the behaviour. Also the element should be visibe from the beginning so not code is changing it in an async way.

Desired behavior:

Should not fail.

Steps to reproduce: (app code and test code)

For now we don't have them because not everytime the same tests fail. The only common thing between them is the same or similar click behavior.

These constructs were not failing with version 3.4.1.

Versions

Ubuntu 19.04
cypress 3.6.1
Electron 73

We run the tests via yarn cypress run

Any help to find the reason would be appreciated.

[jennifer-shehane]

Could you update to the current version of Cypress and let me know if this is still happening for you? Your issue may have already been fixed as I know we addressed an issue similar to this.

[chopraapooja]

Faced the same problem with latest version 3.8.1 on React SPA,

cy.get('.some-css-class').then(($el) => {
      console.log(Cypress.dom.isDetached($el)) // false
}).click();

Initially cy.get() is able to find the element, in-between React kicks rendering cycle and click() is not able to see the reference of the element. Any clue ?

[smart625]

@jennifer-shehane Faced the same issue with the latest version 3.8.1. Can you take a look at it. It blocked me for a while.

cy.get('#wact_rct_39').trigger('mouseover','bottom')
          .trigger('mousedown','bottom', {force: true}).wait(300)
          .trigger('mousemove', { clientX: 200, clientY: 630 })
         .trigger('mouseup', {force: true})

After trigger mousedown, there is a XHR request and then when execute mousemove, then error show on page.

[roblevintennis]

Not sure if it's helpful at all, but I found the error docs for this error quite enlightening and helpful. I literally fixed it by heeding the recommendations.

I'm sure your selectors will be different, but here's the diff that fixed my same issue:

When I read the docs it talked about how frameworks will mount/unmount behind the scenes in a way that's not visible to our naked eyes, and that really hit home. We too are using React. But probably would be same issue for Angular, Ember, etc., maybe.

Finding a way to simplify and break apart my query's made the tests pass for this one.

Hope it's somehow helpful even if pretty high level and hand wavy :)

[jennifer-shehane]

Yes, please read the recommendations from the error message for this error here: https://on.cypress.io/error-messages#cy-failed-because-the-element-you-are-chaining-off-of-has-become-detached-or-removed-from-the-dom

There's not much Cypress can do with an element that no longer exists in the DOM, so you will need to restructure your tests to account for this is your framework mounts/unmounts DOM elements.

[mschaaf]

@jennifer-shehane Please read the description of the issue. I wrote that we followed the advice and it didn't solve the issue. So if you close the issue I expect from you that you can show me where we didn't follow this advice. Thank you.

The comment from @roblevintennis seems unrelated and closing the issue because of it is wrong IMO.