Pruebas de extremo a extremo de componentes angulares con Cypress (2023)

en el articulo anteriorPruebas visuales de componentes angulares usando Storybook y Chromatic, describió cómo usar las pruebas visuales para probar los componentes de Angular con Storybook y Chromatic mediante la creación de instantáneas de imágenes. Regresión visual de prueba cromática para componentes descritos en historias en Storybook.

Esto es tanto una ventaja como una desventaja. Por un lado, puedes escribir historias con componentes que desarrolles de forma independiente usando dependencias simuladas y usar pruebas visuales basadas en esos componentes. Por otro lado, puede usar todas las dependencias que necesita (es decir, sin aislamiento) como en una aplicación Angular real. Como resultado, la construcción de estas historias se vuelve más compleja y surge una especie de microaplicación.

Como puede ver, probar todas las vistas de la aplicación con Storybook y Chromatic puede ser un desafío. Es por eso que solo implementaremos y probaremos visualmente una vista simple, que es un componente central y la integración de múltiples componentes en Storybook. Sin embargo, si se van a tratar otras vistas complejas como pruebas de esfuerzo menos simulado, debe probar las vistas de un extremo a otro de un extremo (UI) al otro (base de datos) de la aplicación Angular real.

Desea replicar escenarios/flujos de trabajo e interacciones de usuarios reales con pruebas de extremo a extremo (e2e). Estas pruebas e2e requieren una aplicación Angular en ejecución y un corredor de prueba. El corredor de pruebas visita rutas específicas en la aplicación y ejecuta pruebas de regresión funcional y visual.

prueba de funcionamiento

Las pruebas funcionales de e2e prueban todo el flujo de trabajo, como por ejemplo:

1. 🚀 Iniciar soporte
2. 👤 Iniciar sesión
3. 🧭 Explore rutas de aplicaciones específicas
4. 📝 Trabajar con formularios y controles
5. 🧪 Consulta tus resultados
6. 🧭 Explore rutas de aplicaciones específicas
7. 📝 Trabajar con formularios y controles
8. 🧪 Consulta tus resultados

prueba de regresión visual

Las pruebas de Visual e2e toman una instantánea (DOM o imagen) después de un determinado flujo de trabajo y la comparan con la instantánea anterior, la línea de base.

Existen varios marcos que le permiten realizar pruebas e2e. La CLI de Angular utiliza el marco e2e para crear nuevas aplicaciones de forma predeterminada.transportador, desarrollado originalmente para AngularJS.

Sin embargo, mirando el contenidohoja de ruta angular, se puede ver que la estrategia de la herramienta de prueba e2e se está actualizando actualmente.

Así que tiene sentido mirar más allá de nuestras propias narices. Este artículo explica cómo usar el último marco.ciprésComo una alternativa popular para escribir y ejecutar pruebas e2e.

Puede encontrar una comparación ilustrativa de Protractor y Cypress aquí.artículo.

Cypress es una herramienta de front-end para configurar, escribir, ejecutar y depurar pruebas. Consiste en un corredor de pruebas y un servicio de tablero y es compatible con e2e, integración y pruebas unitarias.

Compatibilidad con el navegador actualIncluye Chrome, MS Edge, Firefox y Electron.

proyecto de demostración

Antes de comenzar a configurar y escribir pruebas, presentemos la aplicación de demostración. Se incluyen dos rutas.casayformaruta. Le mostraré cómo probar el flujo de trabajo del usuario entre dos rutas usando Cypress.

El código fuente de los ejemplos utilizados en este artículo está disponible en:repositorio GitHub.

Su flujo de trabajo podría verse así:

• Visita de ruta a casa
• haga clic enagregarbotón
• Compruebe la dirección URL. debería/forma
• centrarse en los controles de formulario
• Introduzca el título:🚀 prueba
• Haga clic en el botón Acciones flotantes (FAB) para guardar y volver a su ruta de origen.
• Compruebe la dirección URL. debería/casa
• Consulte la lista de artículos para ver si hay artículos nuevos con títulos.🚀 PruebaPuede ser usado

La ruta predeterminada es la ruta de inicio:componentes para el hogar:

configuración

Configurar Cypress en su espacio de trabajo Angular es fácil gracias a la biblioteca de esquemas de Cypress disponible. tanto@briebug/cypress-도식El proyecto agrega Cypress al espacio de trabajo yangular.jsonarchivo.

Recientemente creé algunas solicitudes de incorporación de cambios.hacktoberfestContribución para habilitar el soporte del espacio de trabajo (múltiples proyectos)@briebug/cypress-도식proyecto. se puede encontrar aquísolicitud de extracción fusionada.

Agregue Cypress a su espacio de trabajo Angular ejecutando este comando:

npx ng 추가 @briebug/cypress-schematic

correr

Ahora podemos iniciar el corredor (aplicación de Electron).aplicación fooAplicación de demostración:

npx para foo-app:cypress-abierto

El corredor inicia el navegador y visita la URL de la aplicación cuando se hace clic en la especificación. La prueba generada falló porque esperaba:Reemplázame con algo relevante.Una cadena en la pantalla de inicio. Antes de reescribir las pruebas en algo más significativo, echemos un vistazo a la API de Cypress.

API

tantoespecificaciónuso mundialpsivariable que contieneAPI de ciprés. Utilice los siguientes comandos para navegar, interactuar y validar la aplicación.Visita,conseguir, oincluirSi la ejecución falla, por ejemplo porque un elemento DOM aún no está disponible, espere un momento y vuelva a intentarlo.

Implementar el flujo de trabajo del usuario para probar

creado para imitar la interacción del usuario con nuestra aplicación.especificaciónLa próxima vez:

• La línea 3 cambia la ventana gráfica antes de cada prueba.
• #8 Visite la pantalla de inicio y arroje un error si la ruta no está disponible.
• #9 Consulta el primer elemento con el selector de atributo dado y haz clic en él.
• #10, #13 Aserción de URL
• #11 Introduce el asunto en el campo de entrada
• #14 Validación de la pantalla de inicio

Aquí están los resultados de la prueba:

puedes verregistro de comandosa la izquierda. Haga clic en una entrada de registro para obtener más información de registro en la consola o ver una instantánea de DOM asociada con el comando. Leer más sobrecorredor de pruebasDesde la página de Cypress

integración continua

Para agregar Cypress a CI, ejecute el corredor de prueba en el entorno de integración continua usando el siguiente comando:

ejecutar npx foo-aplicación: cypress-ejecutar

prueba visual

A veces desea verificar el estado visual de un componente en su flujo de trabajo. Por ejemplo, si el componente es visible o no. Las pruebas visuales adicionales pueden relacionarse con el tamaño y el color, por ejemplo.

Por supuesto, puede ampliar las pruebas funcionales existentes de un extremo a otro y verificar el estado visual de los elementos DOM. Esto da como resultado pruebas complejas, pero hay una mejor manera. En su lugar, puede tomar una instantánea de una imagen de un componente o aplicación y compararla con una instantánea de referencia.

configuración

Hay un complemento de instantáneas para Cypress que se puede instalar con el comando:

npm i --save-dev cypress-image-snapshot @types/cypress-image-snapshot

const cypressTypeScriptPreprocessor = require("./cy-ts-preprocessor");const { addMatchImageSnapshotPlugin,} = require('cypress-image-snapshot/plugin');module.exports = (on, config) => { on(" 파일:전처리기", cypressTypeScriptPreprocessor); addMatchImageSnapshotPlugin(on, config); // 플러그인 구성};

importar { addMatchImageSnapshotCommand } desde 'cypress-image-snapshot/command';addMatchImageSnapshotCommand();

Crea y combina instantáneas de imágenes

Ahora puede actualizar la especificación con la declaración:

// cypress/integration/spec.tsdescribe('Crear un nuevo elemento', () => { beforeEach(() => { cy.viewport(300, 600); }); it('Se debe crear un nuevo elemento y se muestra .it en la página de inicio', () => { const ExpectedTitle = '🚀 test'; cy.visit('/home'); // ...más comandos... cy.matchImageSnapshot(); / / imagen Crear instantánea y comparar con la línea de base });});

Instantánea después de la primera ejecuciónCiprés/Instantáneacarpeta. Esta es la línea base.

En el siguiente paso, cambiaremos la plantilla del componente Inicio para demostrar el cambio visual. Este cambio puede ser parte de una nueva característica que su proyecto necesita implementar.

Ahora puede decidir si es un error o una función. Además, puede ejecutar un corredor de prueba.--env actualizarSnapshots=verdaderoParámetros para actualizar instantáneas cuando se requieren cambios visuales.

algún consejo

Te daré dos consejos para empezar con Cypress.

• Escribe pruebas solo para tu aplicación. No pruebe aplicaciones o sistemas externos, como proveedores de identidad, ya que pueden (innecesariamente) cambiar y romper sus pruebas.
• Evite el uso de selectores DOM complejos para encontrar elementos. usardatos-* Un atributo que especifica un identificador. utilizar esta[prueba de datos=título]en lugar de este selector.mat-form-field > .mat-form-field-wrapper > .mat-form-field-flex > .mat-form-field-infix > #mat-input-0para encontrar la entrada. Esto facilita la refactorización sin romper las pruebas.

másmejores prácticasEstá disponible en la página del manual de Cypress.