Por Guillem Barnolas

Publicado hace 1 año — 4 min de lectura

Los últimos test funcionales que estábamos haciendo hasta ahora los habíamos hecho con Behat. Behat es un framework de PHP para tests funcionales basados en descripción del comportamiento esperado en un lenguaje bastante natural. Tienes algo más de info en la propia web de Behat.

Con lenguaje bastante natural me refiero a que, sacado de su propia web, te quedan cosas así:

Feature: Product basket
In order to buy products
As a customer
I need to be able to put interesting products into a basket
Rules:
VAT is 20%
Delivery for basket under £10 is £3
Delivery for basket over £10 is £2
Scenario: Buying a single product under £10
Given there is a "Sith Lord Lightsaber", which costs £5
When I add the "Sith Lord Lightsaber" to the basket
Then I should have 1 product in the basket
And the overall basket price should be £9

Lo que ocurre en cada uno de esos contextos de cada escenario (es decir, qué pasa con el Given there is a....), se lo programas tú en unas clases especiales justo para eso. Behat ayuda bastante creando la estructura de las definiciones que falten por rellenar y luego tú solo tendrías que rellenarlas.

Pero oye, si justo el artículo va de Cypress y llevo un rato leyendo cosas de Behat y parece super molón, ¿en qué quedamos?

El tema es que Behat está pensado fundamentalmente desde el backend. Cypress ha sido diseñado con el frontend en mente. Esto facilita enormemente la tarea de escribir pruebas para aplicaciones web modernas, donde el frontend y el backend están fuertemente entrelazados y, aunque la tuya no sea una aplicación con mucho javascript, Cypress tiene algunas funcionalidades que facilitan muchísimo la creación de tests funcionales, su sintaxis y API son muy amigables, por lo que la curva de aprendizaje es relativamente baja.

Ejecución en Tiempo Real

Cypress permite ejecutar pruebas en tiempo real, lo que significa que puedes ver cómo se ejecutan tus pruebas en un navegador web en tiempo real. Esto es muy útil durante la fase de desarrollo de pruebas, ya que puedes ver exactamente qué está haciendo Cypress, qué elementos está interactuando y dónde podría estar fallando, aparte de que enseñarle estos vídeos a la gente en la que la máquina va interactuando sola con la aplicación, siempre queda molón y futurista 😎

Depuración Interactiva

Debido a que las pruebas se ejecutan en un navegador real, puedes usar herramientas de depuración del navegador como las DevTools de Chrome para inspeccionar el estado del DOM, evaluar el rendimiento, revisar las peticiones de red, etc., todo mientras la prueba está en ejecución. Esto facilita la tarea de depuración y mejora la eficiencia al escribir y mantener pruebas.

Time Travel

Una característica única de Cypress es su habilidad para "viajar en el tiempo". Cypress toma capturas automáticas del estado del DOM en cada acción o aserción. Esto te permite retroceder en el tiempo y entender qué estaba sucediendo en cada paso de tu prueba, lo que es invaluable para depuración.

Comandos Encadenados

Cypress utiliza un patrón de encadenamiento de comandos similar a jQuery para interactuar con los elementos del DOM, lo cual resulta muy familiar para quienes han trabajado con JavaScript y jQuery. Por ejemplo:

cy.get('.some-element') // busca un elemento con la clase "some-element"
  .should('be.visible') // asume que el elemento debería ser visible
  .click() // realiza un clic en el elemento

Estado de la Aplicación

Con Cypress puedes manipular el estado de tu aplicación directamente, lo que te permite crear pruebas que son más rápidas y menos frágiles. Por ejemplo, en lugar de realizar una serie de interacciones de usuario para iniciar sesión, podrías sobrescribir el estado de la aplicación para que se inicie una "sesión" automáticamente, permitiéndote ir directo al escenario que quieres probar.

Consola Interactiva

Cuando una prueba falla, puedes abrir la consola de Cypress para obtener información detallada sobre el fallo. La consola es interactiva, lo que significa que puedes hacer clic en cada paso de la prueba para ver qué estaba ocurriendo en ese momento específico.

Integración Continua

Aunque la capacidad de ejecutar pruebas en el navegador es una de las características más destacadas de Cypress, la herramienta también es apta para ser utilizada en entornos de integración continua. Cypress puede ser configurado para ejecutar pruebas en modo "headless" (sin interfaz gráfica), lo que facilita su integración con plataformas como Jenkins, Travis CI, o GitHub Actions.

Cypress Studio

Tanto si eres nuevo/a en esto de testing funcional como si llevas tiempo pero quieres arrancar una nueva suite de tests para un proyecto, una forma rapidísima de hacer tests con Cypress es usar Cypress Studio (es una funcionalidad experimental, pero a nosotros nos ha ido de lujo). En la configuración marcas que quieres usar Cypress Studio:

{
  e2e: {
    experimentalStudio: true
  }
}

Una vez hecho esto, cuando lances un test desde la consola podrás añadir acciones y Cypress Studio irá guardando todas esas interacciones que hagas con la aplicación en el test que hayas ejecutado. Esto facilita mucho arrancar una serie de tests y guardarlos, para luego editarlos desde tu IDE favorito y poder completarlos.

En resumen

Cypress ofrece un entorno de testing de extremo a extremo enfocado en el frontend que permite la ejecución en tiempo real de pruebas en un navegador real, facilitando la depuración y el mantenimiento con características como Time Travel, Cypress Studio, consola interactiva y una sintaxis amigable. Su capacidad para manipular directamente el estado de la aplicación y la integración sencilla con sistemas de integración continua hacen que sea una herramienta muy efectiva y versátil para asegurar la calidad de aplicaciones web modernas.

📫

Hasta aquí el artículo de hoy. ¡Si quieres puedes escribirnos por redes sociales como siempre, o a hola@softspring.es con cualquier duda o sugerencia!