Acceder a una nueva ventana – cypress.io

No dejes de divulgar nuestros tutoriales y códigos en tus redes sociales, ayúdanos a ampliar esta comunidad.

Solución:

El acceso a nuevas ventanas a través de Cypress no se admite intencionalmente.

Sin embargo, ahora hay muchas formas en que se puede probar esta funcionalidad en Cypress. Puede dividir sus pruebas en partes separadas y aún así tener la confianza de que su aplicación está cubierta.

1. Escribe una prueba para verificar que al realizar la acción en tu aplicación, el window.open el evento se llama usando cy.spy() para escuchar un window.open evento.

cy.visit('http://localhost:3000', 
  onBeforeLoad(win) 
    cy.stub(win, 'open')
  
)

// Do the action in your app like cy.get('.open-window-btn').click()

cy.window().its('open').should('be.called')

2. En una nueva prueba, utilice cy.visit() para ir a la URL que se habría abierto en la nueva ventana, complete los campos y haga clic en los botones como lo haría en una prueba de Cypress.

cy.visit('http://localhost:3000/new-window')

// Do the actions you want to test in the new window

Puede encontrar un ejemplo de prueba totalmente funcional aquí.

No soy un experto en ciprés, recién comencé a usarlo hace unos días, pero descubrí esta solución amable para una aplicación con estado con enlace dinámico:

// Get window object
cy.window().then((win) => 
  // Replace window.open(url, target)-function with our own arrow function
  cy.stub(win, 'open', url => 
  
    // change window location to be same as the popup url
    win.location.href = Cypress.config().baseUrl + url;
  ).as("popup") // alias it with popup, so we can wait refer it with @popup
)

// Click button which triggers javascript's window.open() call
cy.get("#buttonWhichOpensPopupWithDynamicUrl").click()

// Make sure that it triggered window.open function call
cy.get("@popup").should("be.called")

// Now we can continue integration testing for the new "popup tab" inside the same tab

¿Hay alguna manera mejor de hacer esto?

Aquí hay una solución que estoy usando en mi proyecto basada en “Cypress usando una ventana secundaria”

Cypress Window Helpers (también conocido como Cypress Tab Helpers) En realidad son ventanas emergentes o ventanas secundarias, pero las llamo pestañas por brevedad de API

cy.openTab(url, opts)
cy.tabVisit(url, window_name)
cy.switchToTab(tab_name)
cy.closeTab(index_or_name) - pass nothing to close active tab
cy.closeAllTabs() - except main root window

Aquí tienes las comentarios y valoraciones

Al final de la post puedes encontrar las interpretaciones de otros desarrolladores, tú también eres capaz mostrar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador