Why is Cypress saying my element is detached after just running a get command?

Objective: I want to click on a particular element on the page using an accessibility selector with cypress

Code

cy.findAllByRole('rowheader').eq(2).click();  

Error

Timed out retrying: cy.click() failed because this element is detached from the DOM.    <th scope="row" data-automation-id="taskItem" aria-invalid="false" tabindex="-1" class="css-5xw9jq">...</th>    Cypress requires elements be attached in the DOM to interact with them.    The previous command that ran was:      > cy.eq()    This DOM element likely became detached somewhere between the previous and current command.  

Question: I can see in the DOM that this element is still present - there is no logic that will detach this element from the DOM, and the eq method certainly wouldn't do that. Additionally, the findAllByRow method is clearly working as it has found the correct th element I want to click on. How come its saying the element is detached? Is there a workaround for this situation?

https://stackoverflow.com/questions/67391770/why-is-cypress-saying-my-element-is-detached-after-just-running-a-get-command May 05, 2021 at 04:28AM