Estoy tratando de ejecutar pruebas de Cypress para una interfaz basada en Angular. En esta aplicación hay un componente de lista que incluye varios elementos de lista de mensajes. El problema al que me enfrento actualmente es que Cypress no reconoce todos los elementos de la lista de mensajes que se muestran. Quiero comparar la cantidad esperada de mensajes con la cantidad real de mensajes que se muestran. Por el momento no entiendo el comportamiento de Cypress. A veces, Cypress reconoce todos los elementos de la lista de mensajes y, a veces, se omite un solo mensaje (totalmente aleatorio cuál). En el HTML existe el elemento de la lista de mensajes y puedo ver que el elemento de la lista de mensajes también se está procesando. Cypress simplemente no lo resalta ni lo reconoce en absoluto.
Aquí hay una captura de pantalla del elemento de la lista de mensajes en HTML Elementos de la lista de mensajes HTML disponibles
Una captura de pantalla de los registros de Cypress Salida del registro de Cypress
El código para acceder a los elementos de la lista de mensajes:
cy.wait(2000).then(() => cy.get('message-list') .each(($el, index) => { cy.wrap($el).then(() => (resultCounter += 1)); }) .then(() => expect(resultCounter).equals( expectedMessageCounter ) ) );¿Alguien se enfrentó al mismo problema? ¡Gracias por adelantado!
La forma más fácil de hacer esto sin ningún resultado escamoso es
cy.get('message-list-item') .should('have.length', expectedMessageCounter) Debido a que tiene un .should() , Cypress volverá a intentarlo hasta 4 segundos para obtener la longitud correcta.
No necesita .each() .