Guía práctica: Cómo usar Cypress con Angular

Cypress es una herramienta moderna y potente para realizar pruebas end-to-end (E2E), diseñada para aplicaciones web. Su capacidad para interactuar con el navegador en tiempo real y sus características como la recarga automática, un conjunto robusto de API y un entorno de pruebas integrado, lo convierten en una elección popular para desarrolladores de frontend. Si estás desarrollando aplicaciones con Angular, combinar Angular y Cypress puede mejorar significativamente la calidad y confiabilidad de tus pruebas.

A continuación, te mostraremos cómo usar Cypress con Angular, desde la instalación hasta la creación de pruebas básicas.

#Ad https://amzn.to/4dKVIGt

1. ¿Qué es Cypress?

Cypress es un framework de pruebas E2E que se ejecuta directamente en el navegador, interactuando con tu aplicación como lo haría un usuario real. A diferencia de otras herramientas como Selenium, Cypress ofrece una experiencia más amigable con los desarrolladores debido a sus características de depuración, tiempo real y su configuración sencilla.

Ventajas de usar Cypress:

Rápido y confiable: Las pruebas son rápidas porque se ejecutan en el mismo contexto que la aplicación.
Depuración fácil: Cypress ofrece una visualización clara de las pruebas y la capacidad de hacer depuración directamente desde el navegador.
API intuitiva: Su API es simple, lo que facilita la escritura y el mantenimiento de pruebas.

2. Configuración de Cypress en un Proyecto Angular

Paso 1: Crear una Aplicación Angular

Si aún no tienes una aplicación Angular, comienza creando una:

ng new angular-cypress-app
cd angular-cypress-app

Paso 2: Instalar Cypress

Angular utiliza por defecto Protractor para pruebas E2E, pero puedes integrar Cypress fácilmente. Primero, necesitas instalar Cypress en tu proyecto Angular:

npm install cypress --save-dev

Paso 3: Configurar Cypress

Una vez instalado, puedes inicializar Cypress ejecutando el siguiente comando:

npx cypress open

Este comando abrirá la interfaz gráfica de Cypress y generará un conjunto básico de archivos de configuración en una carpeta llamada cypress dentro de tu proyecto. Además, se creará un archivo de configuración cypress.json en la raíz del proyecto. Aquí es donde puedes modificar diversas configuraciones, como la URL base de la aplicación o los tiempos de espera predeterminados.

Puedes añadir lo siguiente a tu archivo cypress.json para definir la URL base de tu aplicación Angular (esto es opcional, pero recomendable):

{
  "baseUrl": "http://localhost:4200",
  "viewportWidth": 1280,
  "viewportHeight": 720
}

Esto establece la URL predeterminada a la que se apuntará durante las pruebas, que en Angular generalmente será http://localhost:4200.

Paso 4: Ajustar el script de pruebas en `package.json`

A continuación, ajusta los scripts en tu package.json para poder ejecutar Cypress fácilmente:

{
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "start": "ng serve"
  }
}

Ahora, puedes abrir Cypress usando:

npm run cy:open

3. Escribir tu Primera Prueba con Cypress

Una vez que Cypress esté configurado, puedes comenzar a escribir tus pruebas. Cypress ya ha creado un conjunto de archivos de prueba de ejemplo en cypress/integration. Puedes eliminar estos archivos y crear uno nuevo llamado app.spec.js.

Ejemplo: Probar la Página Principal de Angular

A continuación, un ejemplo de una prueba básica para verificar que la página principal de Angular cargue correctamente.

describe('Angular App', () => {
  it('Debería cargar la página principal', () => {
    cy.visit('/');  // Visitar la página principal
    cy.contains('Welcome');  // Verificar que contenga el texto "Welcome"
    cy.get('h1').should('have.text', 'Welcome');  // Asegurarse de que el encabezado H1 sea "Welcome"
  });
});

Explicación de la prueba:

describe: Define el conjunto de pruebas, en este caso, pruebas relacionadas con la «Angular App».
it: Describe el comportamiento esperado en la prueba, es decir, que debería cargar la página principal.
cy.visit('/'): Le dice a Cypress que visite la URL base (en este caso, el home /).
cy.contains(): Verifica que en la página hay un elemento que contiene el texto «Welcome».
cy.get(): Selecciona un elemento específico (en este caso un h1) y se asegura de que contenga el texto «Welcome».

Ejecutar la Prueba

Para ejecutar la prueba, simplemente corre el comando:

npm run cy:open

Esto abrirá la interfaz gráfica de Cypress, donde podrás seleccionar y ejecutar la prueba desde el archivo app.spec.js.

4. Probando Funcionalidades Específicas de Angular

Cypress es capaz de interactuar con elementos del DOM, enviar eventos, simular clics y verificar el estado de tu aplicación. Ahora veamos cómo realizar pruebas más complejas en una aplicación Angular, como la verificación de rutas o formularios.

Ejemplo: Probar Navegación entre Rutas

En las aplicaciones Angular, la navegación entre rutas es un aspecto importante a probar. A continuación, un ejemplo de cómo podrías verificar que la navegación funcione correctamente:

describe('Navegación entre rutas', () => {
  it('Debería navegar a la página de "Acerca de"', () => {
    cy.visit('/');
    cy.get('nav a[href="/about"]').click();  // Clic en el enlace de "Acerca de"
    cy.url().should('include', '/about');  // Verificar que la URL contenga '/about'
    cy.contains('About Us');  // Asegurarse de que aparezca el contenido esperado
  });
});

Ejemplo: Probar un Formulario de Angular

Supongamos que tienes un formulario en tu aplicación Angular y quieres verificar que el proceso de envío funcione correctamente. Aquí hay un ejemplo simple de cómo hacerlo:

describe('Formulario de contacto', () => {
  it('Debería permitir el envío de un formulario', () => {
    cy.visit('/contact');
    cy.get('input[name="name"]').type('John Doe');  // Escribir en el campo de nombre
    cy.get('input[name="email"]').type('john@example.com');  // Escribir en el campo de correo
    cy.get('textarea[name="message"]').type('Este es un mensaje de prueba');  // Escribir en el área de texto
    cy.get('button[type="submit"]').click();  // Hacer clic en el botón de enviar
    cy.contains('Mensaje enviado con éxito');  // Verificar que aparezca un mensaje de éxito
  });
});

5. Integración Continua y Cypress

Una vez que hayas configurado Cypress y escrito tus pruebas, el siguiente paso es integrarlo en tu flujo de trabajo de integración continua (CI). Cypress ofrece compatibilidad con muchas herramientas populares de CI, como Jenkins, Travis CI y GitHub Actions. Esto te permite ejecutar tus pruebas automáticamente cada vez que realices cambios en tu código.

Conclusión

Cypress es una herramienta poderosa y flexible para realizar pruebas E2E en aplicaciones Angular. Su integración sencilla y su facilidad de uso hacen que sea una excelente opción para mejorar la calidad de tu código y la experiencia del usuario. Con Cypress, puedes escribir pruebas confiables y rápidas que cubran desde la interacción básica con la UI hasta la verificación de funcionalidades complejas, como formularios y navegación.

Si bien Protractor ha sido una opción tradicional para aplicaciones Angular, la velocidad, simplicidad y capacidades modernas de Cypress lo convierten en una alternativa excelente para proyectos nuevos o para quienes buscan mejorar su conjunto de pruebas E2E.