What can be done to fix the element is detached from the DOM issue?

[vpkhachane]

Hello Folks,

I am facing following issue sometimes. Need help to fix it permanently.

Cypress version: 10.3.1

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

<button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-edgeEnd MuiIconButton-sizeSmall css-10hw16t" tabindex="0" type="button" aria-label="more" data-cy="role-expand-icon-button">...</button>

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.Learn more
image

[jjhelguero]

Your web app is rerendering the DOM at some point between your element query and when you send the click to it. It would be a bit tough to see what long term solution can be provided without knowing more about your app and test code. A suggestion would be to wait for network idle before you query and click on the element.