Tutorial: Pruebas UI con Cypress ‐ Listar
En este tutorial, aprenderemos a utilizar Cypress para realizar pruebas de interfaz de usuario en una aplicación Angular. Nos enfocaremos en realizar pruebas al componente de Listar Libros del proyecto de referencia del curso "Booksotre".
Imagen 1. Página de inicio de la aplicación Bookstore donde se puede ver el componente de listar libros
Cubriremos tres requisitos específicos:
- Verificar que el número de tarjetas renderizadas es el correcto.
- Comprobar que todas las tarjetas tienen su imagen renderizada.
- Asegurarse de que debajo de cada imagen de tarjeta, se muestra el nombre del libro
book.namey su editorialbook.editorial.name.
- Tener instalados Node.js y npm.
- Haber clonado localmente los repositorios de backend y frontend de la aplicación Bookstore.
- Haber ejecutado
npm install cypressen una terminal de comandos dentro del proyecto frontend.
-
Inicializar Cypress en el proyecto Angular:
Navega al directorio raíz de tu proyecto Angular y ejecuta:
npx cypress open
Este comando inicializará Cypress y creará una carpeta
cypresscon archivos de ejemplo. -
Estructura de Directorios:
La carpeta
cypresscontiene:-
fixtures: Datos estáticos para utilizar en las pruebas. -
integrationoe2e: Lugar donde escribiremos las pruebas. -
plugins: Plugins para extender funcionalidades. -
support: Comandos y configuraciones globales.
-
Imagen 2. Visualización de la organización de carpetas de Cypress
Para crear un nuevo archivo de pruebas e2e, luego de ejecutar el comando 'npx cypress open', hay que seleccionar la opción de "Pruebas e2e" y luego, la opción de 'create new spec', como en la siguiente imagen.
Imagen 3. Opción para crear un nuevo test e2e
Aparecerá un campo para darle un nombre al archivo de pruebas, en este caso, lo nombraremos book-list.cy.ts:
Imagen 4. Selección del nombre para el nuevo test e2e
Para editar el test de manera cómoda, es posible hacerlo desde un IDE como Visual Studio Code. La prueba e2e se codifica en lenguaje typescript para luego ser traducida a lenguaje javascript y ejecutada por Cypress en el navegador seleccionado.
Imagen 5. Edición del código typescript de la prueba e2e creada en el IDE VSCode
Ahora, se presenta la definición y resultado de ejecución de los 3 test propuestos para este tutorial.
describe('Book List', () => {
beforeEach(() => {
cy.visit('http://localhost:4200/'); // Ruta principal de la aplicación, donde aparece el component book-list
});
it('Must display the correct number of book cards', () => {
cy.get('.book-card').should('have.length', 10);
});
});Nota: En este caso, se considera que hay un total de 10 libros con sus imágenes respectivas e información básica en la vista principal de la aplicación.
Imagen 6. Resultado esperado luego de ejecutar la primera prueba
Importante: Las pruebas deben ir dentro del método 'describe' creado en la primera prueba y en el mismo nivel del método beforeEach() y el test 1.
it('Should check that all cards have a rendered image', () => {
cy.get('.book-card img').each(($img) => {
cy.wrap($img).should('be.visible');
cy.wrap($img).should('have.attr', 'src').should('not.be.empty');
});
});
Imagen 7. Resultado esperado luego de ejecutar la segunda prueba
it('Should check that each card shows the name of the book and the editorial', () => {
cy.get('.book-card').each(($card) => {
cy.wrap($card).within(() => {
cy.get('.card-title').should('be.visible').and('not.be.empty');
cy.get('.card-text').should('be.visible').and('not.be.empty');
});
});
});
Imagen 8. Resultado esperado luego de ejecutar la tercera prueba
El archivo de prueba 'book-list.cy.ts' debería verse de la siguiente forma al final:
describe('Lista de Libros', () => {
beforeEach(() => {
cy.visit('http://localhost:4200/'); // Ruta principal de la aplicación, donde aparece el component book-list
});
// Test 1
it('Must display the correct number of book cards', () => {
cy.get('.book-card').should('have.length', 10);
});
// Test 2
it('All cards must have a rendered image', () => {
cy.get('.book-card img').each(($img) => {
cy.wrap($img).should('be.visible');
cy.wrap($img).should('have.attr', 'src').should('not.be.empty');
});
});
// Test 3
it('Each card must show the name of the book and the editorial', () => {
cy.get('.book-card').each(($card) => {
cy.wrap($card).within(() => {
cy.get('.card-title').should('be.visible').and('not.be.empty');
cy.get('.card-text').should('be.visible').and('not.be.empty');
});
});
});
});Basándonos en el archivo HTML del componente book-list: book-list.component.html, los selectores CSS que se han utilizado son:
-
.book-card: Clase asignada a cada tarjeta de libro. -
.book-card img: La imagen dentro de cada tarjeta. -
.card-title: El elemento que contiene el atributo{{ book.name }}. -
.card-text: El elemento que contiene el atributo{{ book.editorial.name }}.
Es importante asegurarse de que estos selectores coinciden con el HTML real del componente. Si las clases o estructuras son diferentes, ajusta los selectores en consecuencia (en otros proyectos donde vayas a aplicar las pruebas).
Para ejecutar las pruebas en modo interactivo, como se mostró a lo largo del tutorial (con la interfaz gráfica de Cypress), ejecuta en una terminal:
npx cypress openy sigue los pasos dados anteriormente.
Para ejecutar las pruebas en modo headless (sin interfaz gráfica), ejecuta en una terminal:
npx cypress runY verifica que los resultados sean todos exitosos.
- Uso de Fixtures: Si se desea simular datos o respuestas de API, es posible utilizar fixtures para proporcionar datos estáticos a tus pruebas.
-
Comandos Personalizados: Se pueden crear comandos personalizados en
cypress/support/commands.jspara reutilizar código común. -
Esperas y Sincronización: Cypress maneja automáticamente las esperas, pero si es necesario esperar por solicitudes o elementos específicos, utiliza
cy.wait()ycy.intercept().
- Alonso Hernández Tavera ([email protected])