Hola, Playwright (II) - Integración CI con Github Actions.

Introducción

¿Qué es la Integración Continua (CI) y por qué utilizarla? es una práctica en desarrollo de software, que mejora la calidad y la eficiencia en el proceso de desarrollo. Integra el código de todos los desarrolladores del proyecto en un repositorio común. Cada cambio se integra y verifica mediante pruebas automáticas, lo cual ayuda a identificar problemas tempranos y evita que se acumulen errores más grandes. Hace que el código se más estable, agiliza el desarrollo y una colaboración más fluida del equipo.

Permite que los equipos se concentren en el desarrollo de nuevas features. En resumen, CI es clave para mantener un flujo de trabajo eficiente y mejorar la experiencia de desarrollo en equipo.

Una herramienta muy potente para realizar CI es GitHub Actions. En este post vamos a ver cómo podemos configurar CI con Github Actions en nuestro proyecto de Front.

TL;DR;

GitHub Actions es una herramienta de automatización que permite definir flujos de trabajo personalizados en respuesta a eventos específicos dentro de un repositorio de GitHub.

Si hablamos de CI con GitHub Actions permite automatizar tareas esenciales como ejecutar pruebas de código, realizar compilaciones y verificar que el nuevo código cumple con los estándares de calidad, todo ello sin salir de GitHub.

GitHub Actions es flexible, fácil de configurar y permite crear flujos de trabajo personalizados con una amplia gama de posibilidades. Al estar integrado en GitHub, facilita la automatización sin necesidad de herramientas externas y así tener el ciclo de desarrollo en un solo lugar.

Puedes definir procesos automáticos que verifiquen y validen tu código cada vez que se realiza un cambio, lo que asegura un desarrollo más fluido y un producto final más robusto.

Paso 1: El ejemplo que vamos a usar

Como ya vimos en el primer post, .

Paso 2: Lanzando test sin interfaz de usuario

Vamos a configurar el package.json y añadir un script, al lanzar dicho script vamos a lanzar los test e2e sin interfaz de usuario.

package.json

  "scripts": {

    "dev": "vite",

    "build": "tsc && vite build",

    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives

 --max-warnings 0",

    "preview": "vite preview",

    "format": "prettier --write .",

    "test": "vitest",

    "prepare": "husky || \"No need to install husky\"",

    "tsc-check": "tsc --noEmit",

    "e2e": "playwright test --ui",

+   "ci:e2e": "playwright test"

  },

En la terminal utilizamos dicho comando:

npm run ci:e2e

Como podemos ver en la imagen, vemos el resultado de los test sin interfaz de usuario.

Conclusión y siguientes pasos

Hola, Me llamo Fran y me gusta desarrollar Front End y trabajar como QA desarrollando pruebas de e2e.

Si quieres conectar conmigo, te dejo aquí mi perfil de Linked in: