Menu
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?
230
The "element is detached from DOM" is a sign of a problem, not the problem itself! There is a variety of ways the test can observe the application and wait for it to be ready. You can observe the DOM itself, the network traffic, listen for events, even reach into the code to spy on method calls.
For handling the hidden elements, Cypress takes the help of the jQuery method show. It has to be invoked with the help of the Cypress command (invoke['show']).
Tip: if a Cypress test fails with "element is not visible" error, but you are sure the element should be visible, you can debug the visibility check yourself by stepping through the Cypress. dom. isVisible code, see Debug the Element Visibility Problems in Cypress.
CypressTest AutomationSoftware Testing. Cypress has a list of common assertions that can be applied to any element on the browser. Assertions are the checkpoints that confirm if a test step of the automated test case passed or failed. Thus it checks the expected state of the application under test.
This could be bad advice, but can you try the following?
cy.findAllByRole('rowheader').eq(2).click({force: true})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
