Cómo configurar pruebas Angular e2e en Builds VSTS CI usando Puppeteer

Mantenga esa tubería funcionando con ejecuciones de prueba automatizadas de extremo a extremo

Recientemente he estado trabajando en un proyecto de Angular 4, utilizando Visual Studio Team Services para administrar nuestros sprints, compilaciones e implementaciones. En comparación con otras soluciones (por ejemplo, Atlassian Suite .etc), creo que VSTS aporta muchas funcionalidades a la mesa.

Como se mencionó, podemos administrar nuestros sprints, repositorios de git, planes de prueba, pruebas, integración continua e implementación a través del único servicio. Esto es bastante ingenioso y funciona muy bien. Antes de que parezca aún más como un anuncio encubierto para VSTS, tiene sus desventajas; a menos que esté operando directamente en la tierra de algo como .NET, la información sobre la configuración de los procesos de CI / CD puede ser un poco difícil de obtener. Encontré un par de excelentes artículos sobre la configuración de pruebas unitarias, pero no mucho sobre las pruebas de transportador e2e. Es por eso que decidí compartir mi configuración para ejecutar pruebas Angular e2e en VSTS CI ... ¿Ves a dónde fui con esa segue divagación?

Continúa ... (también conocido como "configractor.conf.js")

Supongo que está familiarizado con un proyecto estándar de CLI angular. Siendo ese el caso, acceda a su proyecto Angular y cree una línea de comando.

npm i -D jazmín-reporteros titiritero prolongador-consola-plugin

Lo que debemos hacer primero es (usando el comando anterior) instalar los paquetes requeridos; para informar necesitaremos jazmín-reporteros, titiritero (porque, bueno, está en el nombre del artículo) y el paquete de bonificación, prolongador-consola-complemento. El último paquete, protractor-console-plugin, no es realmente un requisito ... pero puede ser útil tener marcas de prueba cuando se produce un error de consola en el cliente.

Una vez que haya instalado los paquetes, debemos agregar un par de líneas nuevas al archivo protractor.conf.js (que se encuentra en el directorio raíz del proyecto).

* si quieres menos suciedad ... el archivo completo transportador.conf.js. que contiene los cambios a continuación está disponible aquí.

Primero, agregue el nuevo reportero + la ruta al ejecutable de titiritero de Chrome a las declaraciones de importación en la parte superior del archivo:

Luego, dentro del objeto exportaciones.config, agregue una nueva propiedad (chromeOptions) a la capacidad de Chrome que define una ruta binaria para Chrome:

todavía dentro de exportaciones.config - en la función onPrepare () - agregue el reportero junit xml de jasmine-reporters:

Y para la ronda de bonificación final ... puede (opcionalmente) agregar el práctico complemento de consola como un aditivo para las exportaciones.config:

Después de haber hecho todo ese trabajo duro, ahora vamos a ejecutar nuestra suite de pruebas súper exhaustiva.

npm ejecutar e2e

y deberíamos tener la siguiente ventana emergente en la línea de comandos:

Aplicación angular-e2e-vsts-ci-example
   √ debería mostrar un mensaje de bienvenida
Ejecutó 1 de 1 éxito de especificaciones en 1 seg.

¡Virutas de embalaje! ahora tenemos nuestras pruebas Angular e2e con titiritero. También debe notar la salida de un archivo xml:

e2e / results / e2e-results-junit.xml

VSTS usará este archivo xml en su tarea de compilación para obtener los resultados de la prueba.

Configurar VSTS Build

Con nuestro proyecto Angular ahora ejecutando pruebas de titiriteros e2e, configuremos nuestra definición de compilación.

Vaya a la definición de compilación en la que desea usar las pruebas y agregue una tarea para ejecutar las pruebas e2e. Después de la ejecución de la prueba e2e, agregue una tarea Publicar resultados de la prueba. Esta tarea utilizará el archivo xml JUnit producido desde el reportero transportador para informar a VSTS de los resultados de la prueba e2e.

Con las nuevas tareas de prueba en su lugar, ejecute la compilación. Ahora debería ver que las pruebas e2e aparecen en los resultados de la compilación:

Voila! Ahora tenemos compilaciones VSTS CI integradas con nuestras pruebas Angular e2e. ¡Felices tiempos de prueba!

* Si desea una mirada en profundidad al código de este proyecto, puede encontrarlo en github.com/dan-harris/angular-e2e-vsts-ci-example

* Como siempre: comentarios constructivos, opiniones y comentarios son bienvenidos. ¡Gracias por leer!