Cómo Implementar Pruebas Automatizadas con Cypress
Posted On: 2 fevereiro 2024 Posted by: Cercal Introduction La importancia de las pruebas es fundamental para garantizar la calidad, confiabilidad y rendimiento del software. Algunos de los aspectos positivos que destacan la relevancia de las pruebas en entornos web incluyen: Detección de errores: Las pruebas permiten identificar problemas en el código, ayudando a corregirlos antes de que lleguen al entorno de producción, ahorrando tiempo y recursos. Garantizar el cumplimiento de los requisitos: Las pruebas aseguran que la aplicación cumpla con los requisitos funcionales y no funcionales definidos al inicio del desarrollo. Mejorar la estabilidad: Las pruebas regulares contribuyen a la estabilidad del software, reduciendo la probabilidad de fallas y bloqueos inesperados durante el uso. Facilita el mantenimiento: Las pruebas automatizadas simplifican el proceso de mantenimiento, permitiendo la detección rápida de regresiones cuando se agregan nuevas características o se realizan cambios. En resumen, las pruebas desempeñan un papel crucial en el ciclo de vida del desarrollo de software, contribuyendo a la construcción de aplicaciones robustas y confiables capaces de cumplir con las expectativas del usuario. Cypress Cypress se destaca como una herramienta robusta y eficiente para la automatización de pruebas de extremo a extremo, ofreciendo un enfoque moderno y fácil de usar para garantizar la calidad de las aplicaciones web. Simplicidad y claridad: Cypress es conocido por su sintaxis simple y clara, facilitando la escritura de pruebas incluso para aquellos con experiencia limitada en automatización. Ejecución en el navegador: Una de las características de Cypress es la capacidad de ejecutar pruebas directamente en el navegador. Esto proporciona visibilidad en tiempo real del comportamiento de la aplicación, permitiendo una depuración más rápida y efectiva. Visualización en tiempo real: Durante la ejecución de las pruebas, Cypress proporciona una visualización en tiempo real, permitiendo a los desarrolladores observar la aplicación probada paso a paso. Entorno aislado: Cada prueba en Cypress se ejecuta en un entorno aislado, garantizando consistencia e independencia entre las pruebas. Esto contribuye a la confiabilidad y reproducibilidad de los resultados de las pruebas. Cypress se destaca como una herramienta integral para la automatización de pruebas de extremo a extremo, combinando simplicidad, velocidad y visibilidad en tiempo real. Su enfoque moderno y características distintivas la convierten en una elección poderosa para equipos de desarrollo comprometidos con la calidad y eficiencia en sus aplicaciones web. Instalación de Cypress Instalar Cypress en un proyecto es relativamente simple. Pasos para iniciar un proyecto desde cero con Cypress: Inicia un proyecto Node.js: asegúrate de que tu proyecto Node.js esté en funcionamiento. De lo contrario, ejecuta el siguiente comando en la línea de comandos para inicializar un nuevo proyecto Node.js. npm init -y Instalar Cypress como una dependencia de desarrollo: Ejecuta el siguiente comando en la terminal dentro de la carpeta de tu proyecto para instalar Cypress como una dependencia de desarrollo: npm i –save-dev cypress Abrir Cypress por primera vez: Después de que la instalación esté completa, ejecuta el siguiente comando para abrir Cypress por primera vez. Esto creará la estructura inicial del proyecto Cypress, incluyendo la carpeta “cypress” y algunos archivos de npx cypress open Configurar script en package.json (opcional): Para simplificar el uso de Cypress, añade scripts al archivo package.json. Por ejemplo: "scripts": { "test": "cypress run", "test:open": "cypress open" } Escribir pruebas con Cypress Para comenzar, creemos un formulario HTML simple. Crea el archivo index.html en la carpeta raíz del proyecto con el siguiente contenido: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Page</title> </head> <body> <h1>Cypress Test – Example Page</h1> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <button id="btn-send">Send</button> <button id="btn-reset">Reset</button> <p id="result"></p> <script> document.getElementById('btn-send').addEventListener('click', function() { var name = document.getElementById('name').value; var email = document.getElementById('email').value; document.getElementById('result').innerHTML = 'Sent: ' + name + ', ' + email; }); document.getElementById('btn-reset').addEventListener('click', function() { document.getElementById('name').value = ''; document.getElementById('email').value = ''; document.getElementById('result').innerHTML = ''; }); </script> </body> </html> Crea el archivo `myfirsttest.cy.js` en `cypress/e2e/1-getting-started/` con el siguiente contenido: describe("Tests on the Example Page", () => { beforeEach(() => { cy.visit("index.html"); }); it("Should fill in fields and click Send", () => { cy.get("#name").type("John Doe"); cy.get("#email").type("[email protected]"); cy.get("#btn-send").click(); cy.get("#result").should( "have.text", "Sent: John Doe, [email protected]" ); }); it("Should reset fields when clicking Reset", () => { cy.get("#name").type("John Doe"); cy.get("#email").type("[email protected]"); cy.get("#btn-reset").click(); cy.get("#name").should("have.value", ""); cy.get("#email").should("have.value", ""); cy.get("#result").should("not.be.visible"); }); }); Prueba 1: Debería completar los campos y hacer clic en Enviar Esta prueba verifica si los campos ‘Nombre’ y ‘Correo electrónico’ se pueden llenar, y si el botón ‘Enviar’ realiza la acción esperada. it('Should fill in fields and click Send', () => { // Fill in the Name and Email fields cy.get('#name').type('John Doe'); cy.get('#email').type('[email protected]'); // Click the Send button cy.get('#btn-send').click(); // Verify if the result is displayed correctly cy.get('#result').should('have.text', 'Sent: John Doe, [email protected]'); }); Prueba 2: Debería restablecer los campos al hacer clic en Restablecer Esta prueba verifica si los campos ‘Nombre’ y ‘Correo electrónico’ se restablecen correctamente cuando se hace clic en el botón ‘Restablecer’. it("Should reset fields when clicking Reset", () => { // Fill in the Name and Email fields cy.get('#name').type('John Doe'); cy.get('#email').type('[email protected]'); // Click the Reset button cy.get('#btn-reset').click(); // Wait for a short period to ensure the previous action is completed cy.wait(500); // Verify if the fields have been reset cy.get('#name').should('have.value', ''); cy.get('#email').should('have.value', ''); // Verify if the result is no longer visible cy.get('#result').should('not.be.visible'); }); Resultado https://website.mmti.io/wp-content/uploads/2024/01/myfirsttest.cy_.js.mp4 Estas pruebas están diseñadas para asegurar que la interacción del usuario con los campos y botones en la página funcione según lo esperado. También demuestran la capacidad de Cypress para manejar estas interacciones de manera efectiva. Conclusión La implementación y ejecución efectivas de pruebas son aspectos cruciales del desarrollo de software, y Cypress se destaca como una herramienta poderosa para la automatización de pruebas de extremo a extremo en aplicaciones web. En este tutorial, exploramos la instalación de Cypress en un proyecto, escribimos pruebas básicas y destacamos algunas de las características clave de la herramienta. Al escribir pruebas con Cypress, observamos la simplicidad y claridad de su sintaxis, lo que facilita la creación y mantenimiento de casos de prueba.