hace 10 años
Cypress se ha posicionado como una herramienta robusta y moderna para la automatización de pruebas front-end, preferida por desarrolladores y testers por su velocidad, fiabilidad y facilidad de uso. En este artículo, exploraremos en profundidad algunos de los aspectos clave que hacen de Cypress una opción destacada en el mundo del testing web. Nos centraremos en los eventos trigger, la filosofía TDD/BDD en Cypress, la comparativa con Selenium y el evento after:run, proporcionándote una visión completa para que puedas aprovechar al máximo esta potente herramienta.
Eventos Trigger en Cypress: Desata el Poder de la Interacción Programática
El método trigger() en Cypress te permite disparar eventos DOM de manera programática en elementos de tu página web. Esta funcionalidad es increíblemente útil en escenarios de prueba donde los comandos estándar de Cypress como click() o type() no son suficientes. Imagina que necesitas probar listeners de eventos personalizados, animaciones complejas o interacciones que dependen de propiedades de evento específicas. Aquí es donde trigger() se convierte en tu mejor aliado.
¿Cómo Funciona trigger()?
Puedes utilizar trigger() para simular cualquier evento DOM estándar o personalizado en un elemento. Algunos eventos comunes que puedes simular incluyen mouseover, mousedown, mouseup, keydown, keyup y scroll. Además, puedes pasar propiedades de evento como clientX, clientY, which y otras para simular interacciones aún más complejas y realistas.
La sintaxis básica de trigger() es la siguiente:
cy.get(selector).trigger(eventName, options)selector: El selector CSS del elemento sobre el que quieres disparar el evento.eventName: El nombre del evento a disparar (ej: 'click', 'mouseover', 'keydown').options(opcional): Un objeto para especificar propiedades de evento adicionales.
Ejemplos Prácticos de trigger()
Veamos algunos ejemplos concretos para entender mejor cómo utilizar trigger() en tus pruebas de Cypress.
Ejemplo 1: Simular un Evento Mouseover para Mostrar un Tooltip
En este ejemplo, simularemos un evento mouseover para revelar un tooltip oculto al pasar el ratón sobre un botón.
Código HTML (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Page - trigger() Example</title> <style> #tooltip { display: none; background-color: #333; color: white; padding: 5px; position: absolute; border-radius: 5px; } button:hover + #tooltip { display: block; } </style> </head> <body> <button id="hoverButton">Hover over me</button> <div id="tooltip">Tooltip text</div> </body> </html>Código de Prueba Cypress (trigger_example1_spec.js):
describe('Usando `trigger()` para Simular un Evento Mouseover', () => { beforeEach(() => { cy.visit('http://localhost:3000'); }); it('debería mostrar el tooltip al pasar el ratón', () => { cy.get('#hoverButton').trigger('mouseover'); cy.get('#tooltip').should('be.visible').and('have.text', 'Tooltip text'); }); });Explicación:
- Visitamos la página HTML.
- Simulamos el evento
mouseoveren el botón concy.get('#hoverButton').trigger('mouseover'). - Verificamos que el tooltip se vuelve visible y contiene el texto correcto.
Ejemplo 2: Simular un Evento Personalizado con Propiedades
En este ejemplo, dispararemos un evento personalizado con propiedades como clientX y clientY para simular una interacción de arrastrar y soltar.
Código HTML (index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Page - trigger() Custom Event Example</title> <style> #draggable { width: 100px; height: 100px; background-color: #ffcc00; position: relative; } </style> </head> <body> <div id="draggable">Drag me</div> <script> const draggable = document.getElementById('draggable'); draggable.addEventListener('mousedown', function(event) { this.style.left = event.clientX + 'px'; this.style.top = event.clientY + 'px'; }); </script> </body> </html>Código de Prueba Cypress (trigger_example2_spec.js):
describe('Usando `trigger()` para Simular un Evento de Arrastre', () => { beforeEach(() => { cy.visit('http://localhost:3000'); }); it('debería mover el elemento a la posición especificada', () => { cy.get('#draggable').trigger('mousedown', { clientX: 200, clientY: 150 }); cy.get('#draggable').should('have.css', 'left', '200px').and('have.css', 'top', '150px'); }); });Explicación:
- Visitamos la página HTML.
- Simulamos un evento
mousedowncon coordenadas personalizadas usandocy.get('#draggable').trigger('mousedown', { clientX: 200, clientY: 150 }). - Verificamos que el elemento
#draggablese ha movido a la posición correcta.
Cypress: ¿Enfoque BDD o TDD?
Cypress, construido sobre Mocha y Chai, soporta ambos estilos de aserción: BDD (Behavior-Driven Development) y TDD (Test-Driven Development). Principalmente, las pruebas que escribas en Cypress se adherirán al estilo BDD, utilizando expect y should de Chai para realizar aserciones de manera legible y expresiva.
Si estás familiarizado con escribir pruebas en JavaScript, te sentirás muy cómodo con Cypress. La interfaz de prueba, heredada de Mocha, proporciona funciones como describe(), context(), it() y specify() para estructurar tus pruebas de forma clara y organizada. context() es idéntico a describe() y specify() es idéntico a it(), así que puedes elegir la terminología que mejor se adapte a tu estilo.
Además, Cypress incorpora hooks de Mocha como before(), beforeEach(), afterEach() y after(). Estos hooks son útiles para establecer condiciones que deseas ejecutar antes o después de un conjunto de pruebas o de cada prueba individualmente, permitiendo una gestión eficiente del estado de tus pruebas.
Cypress vs Selenium: Un Duelo de Titanes en la Automatización de Pruebas
Tanto Cypress como Selenium son herramientas líderes en la automatización de pruebas web, pero difieren en su arquitectura, enfoque y casos de uso ideales. La elección entre Cypress y Selenium dependerá en gran medida de las necesidades específicas de tu proyecto y equipo.
Tabla Comparativa: Cypress vs Selenium
| Característica | Cypress | Selenium |
|---|---|---|
| Lenguajes Soportados | JavaScript/TypeScript | Java, Python, C#, Ruby, JavaScript, etc. |
| Navegadores Soportados | Chrome, Edge, Firefox, Electron | Chrome, Firefox, Safari, IE, Edge, Opera |
| Arquitectura | Ejecuta pruebas dentro del navegador | Controla el navegador a través de WebDriver |
| Facilidad de Uso | Muy fácil e intuitivo | Curva de aprendizaje más pronunciada |
| Velocidad de Ejecución | Generalmente más rápido | Puede ser más lento, especialmente en pruebas complejas |
| Depuración | Excelente, con herramientas de desarrollo del navegador | Más complejo, requiere herramientas externas |
| Soporte para Multi-Navegador Simultáneo | No | Sí (con Selenium Grid) |
| Ideal para | Pruebas front-end, pruebas de integración, pruebas E2E para aplicaciones modernas JavaScript | Pruebas cross-browser a gran escala, proyectos con diversos lenguajes y navegadores |
¿Cuándo Elegir Cypress?
Cypress es una excelente opción cuando necesitas:
- Un framework completo para pruebas de componentes, API, end-to-end, visuales, accesibilidad y rendimiento.
- Capacidad de grabación de video de las ejecuciones de prueba.
- Reintentos automáticos de acciones sobre elementos, reduciendo pruebas flaky.
- Utilizar JavaScript como lenguaje unificado en desarrollo front-end y automatización de pruebas.
- Mockear/Stubear peticiones y respuestas en etapas tempranas de desarrollo.
- Ahorrar tiempo construyendo un framework desde cero, gracias a la estabilidad y funciones listas para usar de Cypress.
- Un test runner con la función "time travel" para depurar fallos paso a paso con capturas de pantalla.
- Mensajes de error claros y significativos cuando una prueba falla.
¿Cuándo Elegir Selenium?
Selenium es preferible cuando requieres:
- Flexibilidad en la elección del lenguaje de scripting.
- Ejecutar pruebas en diferentes navegadores simultáneamente (Selenium Grid).
- Pruebas cross-browser a gran escala y soporte para navegadores como Safari e Internet Explorer.
Evento After Run en Cypress: Acciones Post-Ejecución Personalizadas
El evento after:run en Cypress se dispara una vez que finaliza una ejecución de pruebas. Cuando utilizas cypress open, este evento se activará al cerrar un proyecto. En cambio, al ejecutar cypress run, el evento se activará cada vez que se ejecute cypress run. Si estás ejecutando tus pruebas en paralelo, el evento se disparará una vez por cada máquina en la que se llame a cypress run.
Es importante recordar que el código dentro del evento after:run se ejecuta en el entorno Node.js. Esto significa que no puedes utilizar comandos de Cypress o cy directamente dentro de este evento, pero sí tienes acceso directo al sistema de archivos y al resto del sistema operativo. Esto te permite realizar tareas como:
- Generar informes personalizados de resultados de pruebas.
- Enviar notificaciones por correo electrónico o Slack sobre el estado de las pruebas.
- Limpiar datos de prueba o restaurar bases de datos.
- Cargar resultados de pruebas a una plataforma de gestión de pruebas.
Para utilizar el evento after:run, debes configurarlo en tu archivo de configuración de Cypress (cypress.config.js o cypress.config.ts) dentro de la función setupNodeEvents:
const { defineConfig } = require('cypress') module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { on('after:run', (results) => { // Tu código para el evento after:run aquí }) }, }, })El objeto results que se pasa al callback del evento after:run contiene información detallada sobre la ejecución de pruebas, incluyendo el número total de pasadas, fallidas, etc., la configuración del proyecto y detalles sobre el navegador y el sistema. Este objeto es el mismo que el objeto results resuelto por la API del Módulo de Cypress.
Preguntas Frecuentes (FAQs)
- ¿Qué tipos de eventos puedo simular con
trigger()en Cypress?Puedes simular cualquier evento DOM estándar (click, mouseover, keydown, etc.) y eventos personalizados.
- ¿Cypress es mejor que Selenium?
No hay una respuesta única. Depende de tus necesidades. Cypress es ideal para pruebas front-end modernas con JavaScript, mientras que Selenium ofrece mayor flexibilidad en lenguajes y navegadores.
You can use trigger() to fire any standard or custom DOM event on an element. Common events include mouseover, mousedown, mouseup, keydown, keyup, and scroll. You can also pass in event properties like clientX, clientY, which, and others to simulate more complex interactions. - ¿Puedo usar Cypress para pruebas cross-browser?
Cypress soporta Chrome, Edge y Firefox. Selenium ofrece un soporte más amplio, incluyendo Safari e IE.
- ¿Qué ventajas ofrece el evento
after:run?Permite ejecutar tareas personalizadas después de cada ejecución de pruebas, como generar informes, enviar notificaciones o limpiar datos.
- ¿Dónde se ejecuta el código del evento
after:run?Se ejecuta en el entorno Node.js, lo que te da acceso al sistema de archivos y otras funcionalidades de Node.js.
Conclusión
Cypress se presenta como una herramienta poderosa y versátil para la automatización de pruebas web, especialmente para aplicaciones front-end modernas. Los eventos trigger abren un abanico de posibilidades para probar interacciones complejas, el enfoque BDD facilita la creación de pruebas legibles y mantenibles, y el evento after:run permite personalizar las acciones post-ejecución. La comparación con Selenium destaca las fortalezas de cada herramienta, permitiéndote elegir la opción más adecuada para tus proyectos. Si buscas una herramienta de testing front-end rápida, fiable y fácil de usar, Cypress es sin duda una excelente elección que te ayudará a llevar tus pruebas al siguiente nivel.