Estoy escribiendo Cypress-tests en un sitio que tiene varios modales (suscripciones a boletines dentro de iframe), ventanas emergentes ("Recuerde envío gratis si X, Y y Z") y superposiciones.
Estos elementos son un gran problema, ya que hace que sea imposible 'hacer clic en el campo A' y completarlo con el texto: abcd . Dado que las superposiciones se abren encima de todo.
Pregunta general: ¿Cómo me deshago de estos modales, ventanas emergentes y superposiciones, para poder interactuar con la página?
beforeEach , con display: none;Me imaginaba algo como esto:
cy.get('head').then( (head) => { let gottenHead = document.head; let styles = document.createElement('style'); styles.type = 'text/css'; styles.innerHTML = '.iframes-container { display: none !important; }' gottenHead.appendChild( styles ); // Doesnt work, head.appendChild( styles ); // Doesnt work }); O [esta esencia aquí], pero eso tampoco funciona, arrojando el error: "No se pueden leer las propiedades de undefined (leyendo 'appendChild')" para esta línea: doc.body.head.appendChild($style); .
Agregar un observador de mutación , verificando si alguno de los elementos de envoltura se agrega al dom. Y si lo hacen, quítelos de nuevo.
Esto solo de nuevo, no parece 'The Cypress Way'. Así que no he probado esto todavía.
Este parece ser el enfoque más orgánico. Pero en realidad preferiría tener una opción perezosa, que simplemente los oculte a todos, siempre que se esté ejecutando Cypress.
Pero el problema con esto es que el botón 'cerrar' está dentro de un iframe, con el que a Cypress no le gusta interactuar .
Revisé la documentación de Cypress , pero no pude encontrar ninguna guía sobre cómo omitir estos modales y ventanas emergentes, por extraño que parezca.
Actualización 1: Agoff preguntó de qué realiza un seguimiento, si deberían mostrarse las ventanas emergentes/modales. Intenté verificar si se configuró una cookie, una variable de sesión o algún almacenamiento local. Pero no pude ver que se agregara nada, después de 'hacer clic en ellos'. :-/
Eliminar el elemento
cy.get('modal-top-element') .then($modal => $modal[0].remove)Si aparece en su propio iframe (parece dudoso), elimine el iframe.
Al final, demostró que @agoff tenía razón. Se guardó en el almacenamiento local.
Escribí estos comandos que uso para mostrar, guardar y configurar localStorage (usando el paquete cypress-localstorage-commands ):
En Comandos:
import "cypress-localstorage-commands" Cypress.Commands.add( "displayPopupLocalStorage", () => { cy.getLocalStorage('THECUSTOMLOCALSTORAGEKEY').then( (localStorageContents) => { cy.log( "THECUSTOMLOCALSTORAGEKEY contents: "); cy.log( localStorageContents ); }) }); Cypress.Commands.add( "savePopupLocalStorage", () => { cy.getLocalStorage('THECUSTOMLOCALSTORAGEKEY').then( (localStorageContents) => { cy.writeFile( "cypress/fixtures/tmp/popup-local-storage.json", localStorageContents ); }) }); Cypress.Commands.add( "setPopupLocalStorage", () => { cy.fixture( "tmp/popup-local-storage.json", 'utf8' ) .then( (localStorageContents) => { cy.setLocalStorage('THECUSTOMLOCALSTORAGEKEY', JSON.stringify( localStorageContents ) ); }); });Pruebas
it( 'Accept and save pop-up cookies', () => { cy.visit( "https://example.org" ); // Close popup and save local storage cy.get( '.popup-wrapper .close-form' ).click() cy.wait( 500 ); // Needed for the animation to finish, so the localStorage is set cy.savePopupLocalStorage(); }); it( 'Sets popup cookies and check that header is clickable', () => { cy.setPopupLocalStorage(); cy.visit( "https://example.org" ); cy.get('.popup-wrapper', { timeout: 10000 }).should('not.exist'); // Verify that it works, by going to a page and ensure that the something is clickable cy.get( '#header .logo > a' ).then( ($logo) => { Cypress.dom.isFocusable( $logo ); }); });