Esperando peticiones de red

Justo al inicio de la suite de pruebas existente hay espacio para mejoras.

Me refiero al siguiente fragmento de código:

beforeEach(() => {
  cy.visit('/')

  cy.assertLoadingIsShownAndHidden()
  cy.contains('button', 'More').should('be.visible')
})

Este código (a veces) funciona, pero no es como se comporta un usuario real al usar una aplicación web que realiza búsquedas. El usuario no espera primero a que el componente Loading ... esté visible, luego no visible, y después a que el botón de paginación esté visible.

Si nos ponemos en el lugar del usuario, después de visitar la aplicación simplemente esperamos que esté lista para recibir una nueva búsqueda. Nada más.

Con eso en mente, sería genial si pudiéramos interceptar la petición que la aplicación hace a la API de Hacker News, darle un alias y luego esperar a que esa petición termine antes de seguir adelante.

Por suerte, estamos usando Cypress para escribir nuestras pruebas. 🚀

Cypress ofrece un recurso llamado cy.intercept() que puede ayudarnos bastante. Defines una ruta que quieres que Cypress intercepte, proporcionas un alias con .as('alias'), luego realizas una acción que dispara la petición, y finalmente esperas por ella antes de continuar, usando el comando cy.wait('@alias').

Aquí tienes un ejemplo completo:

cy.intercept('GET', '**/search?query=React&page=0').as('getStories')
cy.visit('/') // This triggers the default search request defined above.
cy.wait('@getStories')

Visión general de los comandos 📖

cy.intercept()

Espía (y opcionalmente hace stub de) peticiones de red que corresponden a una ruta dada, para que puedas esperar por ellas, hacer aserciones sobre ellas o controlar su comportamiento.

Sintaxis:

cy.intercept(url)
cy.intercept(method, url)
cy.intercept(routeMatcher)

Ejemplo:

cy.intercept('GET', '**/search?query=React&page=0')

.as()

Asigna un alias a una ruta interceptada (o a cualquier subject), para que puedas referirte a ella más tarde por un nombre amigable.

Sintaxis:

.as(aliasName)

Ejemplo:

cy.intercept('GET', '**/search?query=React&page=0').as('getStories')

👨‍🏫 Un objeto routeMatcher te ofrece una forma más expresiva de corresponder peticiones. Por ejemplo:

cy.intercept({
  method: 'GET',
  pathname: '**/search',
  query: { query: 'React', page: '0' }
}).as('getStories')

cy.wait()

Espera a que ocurra una petición con alias antes de continuar, haciendo tus pruebas deterministas en vez de depender de elementos visibles/inexistentes o de esperas fijas arbitrarias.

Sintaxis:

cy.wait('@alias')

Ejemplo:

cy.wait('@getStories')

Contenido sugerido 📚

• cy.intercept() - documentación oficial
• cy.wait() - documentación oficial
• How to wait for a request to finish before moving on with Cypress (en inglés)

Ejercicio 1 🎯

Refactoriza el primer bloque beforeEach de la suite de pruebas para que, en vez de esperar a que los elementos estén visibles o no, espere una petición GET a **/search?query=React&page=0 antes de seguir adelante.

Ejercicio 2 🎯

Refactoriza el bloque beforeEach una vez más para que espere una petición GET al pathname **/search, pasando los valores de query y page como propiedades del objeto query aceptado por cy.intercept() (mira la nota del instructor de arriba).

Ejercicio 3 🎯

En las siguientes pruebas también se hacen peticiones GET a la API de Hacker News.

Refactorízalas usando uno de los enfoques anteriores, para que probemos la aplicación lo más cerca posible de cómo los usuarios reales interactúan con ella:

• shows 20 stories, then the next 20 after clicking "More"
• types and hits ENTER
• types and clicks the submit button
• searches via the last searched term
• shows a max of 5 buttons for the last searched terms

👨‍🏫 Cuando termines, ejecuta las pruebas (con npm test, o con la Cypress App ejecutando npm run cy:open) y asegúrate de que todas pasan antes de seguir adelante.

Muéstrale al mundo lo que aprendiste 🌎

Para mostrarle a tu red profesional lo que aprendiste en esta lección, publica lo siguiente en LinkedIn.

Estoy haciendo el curso "Cypress Interception" con @Walmyr Lima e Silva Filho en la @Talking About Testing School, donde aprendí a interceptar y esperar peticiones de red para hacer mis pruebas más confiables y más cercanas al comportamiento de un usuario real. #TalkingAboutTesting #TATSchool #CypressInterception #Cypress

👨‍🏫 Recuerda mencionarme en tu publicación. Aquí está mi perfil de LinkedIn.