La respuesta a su pregunta está escrita en el mensaje de error que recibió:

Se agotó el tiempo de reintento: cy.click() falló porque este elemento está separado del DOM.

...

Cypress requiere elementos adjuntos en el DOM para interactuar con ellos.

El comando anterior que se ejecutó fue:

cy.eq()

Este elemento DOM probablemente se separó en algún lugar entre el comando anterior y el actual.

Obtener este error significa que ha intentado interactuar con un elemento DOM "muerto", lo que significa que se ha separado o eliminado por completo del DOM. Entonces, en ese momento, Cypress está a punto de hacer clic en el elemento eq() que se separó o eliminó del DOM.

En los marcos de JavaScript modernos, los elementos DOM se vuelven a renderizar regularmente, lo que significa que el elemento antiguo se desecha y se coloca uno nuevo en su lugar. Debido a que esto sucede tan rápido, puede parecer que nada ha cambiado visiblemente para el usuario. Pero si está ejecutando comandos de prueba, es posible que el elemento con el que está interactuando esté "muerto". Para hacer frente a esta situación debes:

• Entiende cuándo se vuelve a renderizar tu aplicación
• Vuelva a consultar los elementos DOM recién agregados
• Evite que Cypress ejecute comandos hasta que se cumpla una condición específica

Cuando decimos guardia, esto generalmente significa:

• Escribir una afirmación
• Esperando en un XHR

Puede leer más en Cypress docs y en elblog oficial de Cypress .

Solución: asegúrese de que sus elementos estén cargados y visibles primero y luego realice el click()

 cy.findAllByRole('rowheader').eq(2).should('be.visible').click();

Estoy corriendo en el mismo problema, obtengo el mismo error mientras ejecuto:

 cy.get('<elementId>').should('be.visible').click();

Puedo ver a medida que se ejecuta la prueba que encuentra el elemento (y lo resalta), la afirmación se valida y luego, de alguna manera, .click() no puede encontrar el elemento a pesar de que está encadenado.

Descubrí que agregar una espera estática antes de esta línea durante un par de segundos soluciona el problema, pero no estoy seguro de por qué tendría que hacer eso y realmente no quiero usar una espera estática.

No hay tareas asincrónicas en ejecución, por lo que no hay forma de hacer una espera dinámica.

Sin un ejemplo reproducible, es especulativo, pero intente agregar un guardia antes del clic usando Cypress.dom.isDetached

 cy.findAllByRole('rowheader').eq(2) .should($el => { expect(Cypress.dom.isDetached($el).to.eq(false) }) .click()

Si la expectativa falla, entonces una línea anterior está provocando la separación y cy.findAllByRole no vuelve a consultar el elemento correctamente.

Si es así, es posible que pueda sustituirlo por un simple cy.get() .

También me gusta la idea de @AntonyFuentesArtavia de usar un alias, porque el mecanismo de alias guarda la consulta original y específicamente vuelve a consultar el DOM cuando descubre que su tema está desconectado.

Mira mi respuesta aquí

De la fuente del ciprés

 const resolveAlias = () => { // if this is a DOM element if ($dom.isElement(subject)) { let replayFrom = false const replay = () => { cy.replayCommandsFrom(command) // its important to return undefined // here else we trick cypress into thinking // we have a promise violation return undefined } // if we're missing any element // within our subject then filter out // anything not currently in the DOM if ($dom.isDetached(subject)) { subject = subject.filter((index, el) => $dom.isAttached(el)) // if we have nothing left // just go replay the commands if (!subject.length) { return replay() } }

Esto sucede porque React vuelve a renderizar la página completa. Intenta encontrar el elemento con un comando :

 // do this cy.get('[role="rowheader"]:nth-ckild(2)').click(); // instead of this cy.findAllByRole('rowheader').eq(2).should('be.visible').click();

El uso de un solo comando soluciona el hecho de que Cypress vuelve a intentar solo el último comando antes del comando should . Entonces, anteriormente, solo se volverá a intentar el .eq(2) . Mientras que, también necesita que se vuelva a intentar cy.findAllByRole('rowheader') .

Cypress sugiere otra solución de alternancia de comandos y aserciones . A mi no me funcionó pero puedes intentarlo:

 cy.findAllByRole('rowheader').should('be.visible').eq(2).should('be.visible').click();

Aquí hay algo que me ayudó a evitar ese problema separado. Uso de alias de Cypress y la capacidad de reintento de aserción incorporada.

Ejemplo:

 cy.get('some locator').first().find('another locator').eq(1).as('element'); cy.get('@element').should(***some assertion to be retried until met***);

Entonces, aunque estoy atravesando un montón de elementos (lo que podría generar problemas porque uno de los padres podría separarse), al final, cuando coloco un alias encima, estoy agregando un enlace directo al elemento final que se produjo al final de la cadena. Luego, cuando me refiero a ese alias, Cypress volverá a consultar el elemento final y lo volverá a intentar según sea necesario en función de las afirmaciones agregadas encima. Lo que de hecho me ayudó mucho a prevenir ese problema separado.

Este podría ser un mal consejo, pero ¿puedes intentar lo siguiente?

 cy.findAllByRole('rowheader').eq(2).click({force: true})

No se pudo editar la respuesta de "Ε Г И І И О" porque la cola de edición está llena, pero creo que es importante complementar la respuesta para futuros estudiantes.

 cy.findAllByRole('rowheader').eq(2).click({force: true})

Usar { force: true } al hacer clic funciona debido a la naturaleza del ciprés. Según su documentación, el argumento force "Fuerza la acción, deshabilita la espera de accionabilidad".

En cuanto a "esperar la capacidad de acción", hace referencia a la sección de afirmaciones que establece:

• .click() esperará automáticamente a que el elemento alcance un estado accionable
• .click() volverá a intentarlo automáticamente hasta que hayan pasado todas las afirmaciones encadenadas

Entonces, esto básicamente deshabilita lo anterior, y es por eso que funciona. Uno probablemente encontrará esto útil en algunas bibliotecas/marcos que administran la representación del sitio web (como React y Angular).

Tengo el mismo problema que el título de la pregunta durante una prueba de ciprés, que intenta hacer clic en una opción particular de una lista desplegable.

Durante la prueba, hace clic en este elemento del menú desplegable y luego intenta obtener la opción requerida.

Apliqué algunas sugerencias afirmativas proporcionadas aquí como se menciona a continuación. Todos fueron aprobados, pero la opción de la lista desplegable, en la que quería hacer clic, no se realizó durante la prueba.

• esperar (5000)
• should($item => { expect(Cypress.dom.isDetached($item)).to.equal(false); })
• debería('ser.visible')
• clic ({ fuerza: verdadero })

Aún así, la prueba me da el mismo error que antes. ¿Algún tipo de ayuda aquí de alguien?

Recibí este error cuando estaba usando la declaración siguiente: cy.wrap($e1).click() Entonces la siguiente declaración funcionó para mí: $e1.click() funcionó para mí sin usar ningún método de ajuste.