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, Hola, Playwright (I) - Conceptos e2e y configuración inicial. Vamos a realizarlo sobre el proyecto Open Source Mongo Modeler.

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.

Paso 3: Definiendo un workflow de Github Actions

Para automatizar el lanzamiento de los test e2e sin interfaz de usuario. Vamos a crear un workflow con Github Actions, para que en cada pull request lanze los test y si está todo ok poder aprobar dicha pull request.

En la raíz del proyecto está la carpeta .github en su interior la carpeta workflow y el archivo ci.yml donde vamos a definir el workflow de los test e2e.

ci.yml

name: CI workflow

on: pull_request

jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Use Node.js 18.13.0
        uses: actions/setup-node@v2
        with:
          node-version: '18.13.0' 
          cache: 'npm'

      - name: Install front
        run: npm install

      - name: Build
        run: npm run tsc-check

      - name: Tests front
        run: npm test

+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2

+      - name: Use Node.js 18.13.0
+       uses: actions/setup-node@v2
+        with:
+          node-version: '18.13.0'
+          cache: 'npm'

+      - name: Install dependencies
+        run: npm ci

+      - name: Build
+       run: npm run build

+      - name: Check TypeScript Types
+        run: npm run tsc-check

+      - name: Run E2E tests
+        run: npm run ci:e2e

Esta sección garantiza que cualquier cambio en el código pase por pruebas exhaustivas que evalúan tanto el frontend como los flujos completos de la aplicación, proporcionando una capa extra de confianza antes de aprobar cambios en el repositorio.

Paso 4: Subiendo los cambios

Paso 5: Probando el proceso

Paso 6: Settings y forzar a que pasen para poder hacer merge

Repositorio de ejemplo

Te dejo un enlace al proyecto de github con la configuración completa:

Enlace al repositorio con el proyecto y su configuración completa

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: