Trazando el camino con Cypress

Actualmente existen muchos framework para realizar pruebas end-to-end en  aplicaciones web y a continuación hablaremos sobre una herramienta que está tomando fuerza.

Cypress no entrega una interfaz amigable y con grandes capacidades para interactuar con una aplicación de la misma forma como lo haría un usuario final.

¿Por qué usar Cypress?

Si quieres hacer pruebas end-to-end a una aplicación web puedes elegir Cypress como herramienta de automatización ya que está diseñada específicamente para este tipo de pruebas, las ejecuta en tiempo real en el navegador lo cual facilita la visualización de acciones mientras ocurren y su depuración.

Tiene una configuración sencilla que no toma mucho tiempo, se desarrolla con JavaScript y tiene una sintaxis clara que ayuda a los desarrolladores en la creación y mantenimiento de un set de pruebas. 

Se puede integrar fácilmente con flujos de trabajo CI/CD y consta de una comunidad amplia y de una documentación detallada que nos permite resolver problemas con facilidad y mejorar las habilidades.

Tips.

• Separa tus pruebas en carpetas lógicas según las funcionalidades de la aplicación.

• Usa archivos de configuración para almacenar y compartir variables que uses en las diferentes pruebas.

• Recuerda siempre utilizar correcta y oportunamente las esperas según tú necesidad cómo:

cy.wait()
cy.get.should(‘exist’)
cy.sleep()

• Maneja tus datos de pruebas desde archivos externos que te faciliten la reutilización y manejo de datos.

• Cypress permite configuración para capturar de manera automática captura de pantalla en caso de que se presente algún fallo, también puedes hacer capturas de pantalla en puntos claves durante la automatización con:

cy.screenshot()

• Es importante tener en cuenta que para CI/CD se debe utilizar el modo headless que permite la optimización de tiempo de ejecución.

• Es recomendable tener siempre actualizada la versión de Cypress y sus dependencias para aprovechar todo lo que nos ofrece y corregir posibles errores.

Pasos de instalación.

Con el fin de poder iniciar con la aventura de aprender y utilizar Cypress te comparto los pasos para su instalación.

Importante.

Cómo prerrequisito necesitas tener instalado Node.js que podrás encontrar en el siguiente enlace Instalación de node.js

Paso 1: Instalación de Cypress

Instala Cypress como dependencia de desarrollo: 

npm install cypress --save-dev

Paso 2: Configuración de Cypress

Agrega las siguientes líneas de código a tu package.json

"scripts": {
  "cypress:open": "cypress open",
  "cypress:run": "cypress run"
}

Paso 3: Ejecuta Cypress por primera vez.

npm run cypress:open

Esto abrirá la interfaz de usuario de Cypress donde podrás escoger que tipo de pruebas vas a ejecutar (E2E o Componentes); Puedes escoger la opción E2E y finalizar escogiendo el navegador de tu preferencia.

Cypress nos proporciona unos archivos con pruebas de ejemplo que podrás ejecutar.

Intenta crear tu primera prueba.

A continuación te compartiré unas líneas básicas de código para que arranques con tu primera prueba.

describe('Mi Primera Prueba', () => {
  it('Debe cargar la página principal', () => {
    cy.visit('https://www.ejemplo.com');
    cy.title().should('include', 'Página de Inicio');
  });
});

Y para ejecutarlo utilizas el siguiente comando.

npm run cypress:run

Si deseas continuar y aprender más de este mundo puedes utilizar el siguiente enlace Primera prueba E2E

Comandos más utilizados.

Compartiré un pequeño listado de los comando más usado en Cypress, si quieres saber más sobre cómo interactúa Cypress con los elementos de DOM te comparto el siguiente enlace Interacción con elementos.

Navegación y acciones.

• Visitar una página.

cy.visit(url)

• Elegir un elemento y dar click.

cy.get(selector).click()

• Elegir un elemento para escribir en él.

cy.type(text)

• Borrar el contenido de un elemento.

cy.clear()

• Seleccionar un elemento que tiene algún texto especificado.

cy.contains(text)

Realizar Aserciones.

• Realizar aserción en un elemento.

cy.should('condition')

Condition ejemplo.
'be.visible'
'have.length'

• Realizar aserción con alguna condición.

cy.expect(subject).to.eq(value)

Estos son solo algunos ejemplos. Cypress proporciona muchos más comandos y opciones que puedes explorar en su documentación oficial. La flexibilidad y potencia de Cypress hacen que sea una herramienta eficaz para automatizar pruebas en aplicaciones web.

¡Gracias por leer!