Levantar Cypress en modo gráfico sobre Docker

Cypress es un framework de testing end-to-end que nos permite realizar pruebas simulando la interacción de un usuario por medio de un navegador. Lamentablemente, cuando queremos lanzarlo en un servicio de Docker, empiezan los problemas. Para empezar Docker no dispone de un entorno gráfico, y dependiendo de si lo ejecutamos mediante Docker Desktop o Docker Engine (en Linux), tendremos acceso o no al servidor gráfico del sistema operativo. Por ello, para evitar todos estos problemas de compatibilidad, vamos a levantar Cypress en modo gráfico en Docker de una forma sencilla.

Empezaremos configurando la imagen de Docker que preparará todo lo necesario para ejecutar Cypress.

Declaramos un archivo demoninado Dockerfile con el siguiente contenido:

FROM node:19-bullseye-slim

WORKDIR /usr/src/app

RUN apt clean all
RUN apt update

## Cypress
RUN apt install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
RUN npm i -D cypress

# Clean
RUN npm cache clean --force
RUN rm -rf /var/lib/apt/lists/*

• FROM: Indica la imagen base que utilizaremos. En este caso utilizaremos una imagen de Node bajo Debian 11.
• WORKDIR: Indica el directorio de trabajo.
• apt clean all y apt update: Actualiza los repositorios de Debian.
• apt install: Instala las dependencias necesarias para ejecutar Cypress, incluyendo xvfb que es un servidor Xorg que no necesita de una tarjeta gráfica para funcionar y xauth que es un sistema de autorización para Xorg.
• npm i -D cypress: Instala Cypress como dependencia de desarrollo.
• npm cache clean –force: Limpia la cache de npm.
• rm -rf /var/lib/apt/lists/*: Limpia los repositorios de Debian.

Después de definir la imagen, vamos a crear un archivo docker-compose.yml para levantar los servicios necesarios.

  e2e:
    build:
      context: .
      dockerfile: Dockerfile
    command: npx cypress open
    environment:
      - DISPLAY=novnc:0
    volumes:
      - ./:/usr/src/app
      - /usr/src/app/node_modules
    depends_on:
      - novnc

• build: Indica que se debe construir la imagen a partir del Dockerfile que hemos definido anteriormente.
• command: npx cypress open: Levanta Cypress en modo gráfico.
• DISPLAY=novnc:0: Configura Docker para que utilice novnc, un servicio que declararemos más adelante, como interfaz gráfico.
• volumes: Hacemos que monte la ruta de la imagen en el directorio actual además de cargar node_modules.
• depends_on: Marcamos que espere hasta que se levante el servicio novnc.

Ahora configuraremos el entorno gráfico como otro servicio.

  novnc:
    image: theasp/novnc:latest
    environment:
      - DISPLAY_WIDTH=1600
      - DISPLAY_HEIGHT=968
      - RUN_XTERM=no
    ports:
      - 8080:8080
      - 5900:5900

• image: Utilizamos una imagen de Docker que ya tiene configurado el entorno gráfico.
• environment: Configuramos el tamaño de la pantalla y desactivamos la terminal.
• ports: Exponemos los puertos 8080 y 5900 para poder conectarnos al entorno gráfico por medio de VNC.

Para terminar necesitamos crear una red que compartan todos los servicios, para ello añadiremos al final del archivo:

networks:
  x11:

Además de añadir la red a los servicios que queramos que compartan el entorno gráfico (en este caso e2e y novnc).

Nuestro archivo docker-compose.yml final quedará así:

version: '3'

services:

  e2e:
    build:
      context: .
      dockerfile: Dockerfile
    command: npx cypress open
    environment:
      - DISPLAY=novnc:0
    volumes:
      - ./:/usr/src/app
      - /usr/src/app/node_modules
    depends_on:
      - novnc
    networks:
      - x11

  novnc:
    image: theasp/novnc:latest
    environment:
      # Adjust to your screen size
      - DISPLAY_WIDTH=1600
      - DISPLAY_HEIGHT=968
      - RUN_XTERM=no
    ports:
      - 8080:8080
      - 5900:5900
    networks:
      - x11

networks:
  x11:

Ahora solo quedará levantarlo.

docker compose up -d

Ahora ya podemos acceder a Cypress en modo gráfico.

Para visualizar el entorno será necesario un cliente VNC que se conecte a localhost:5900, o novnc:5900. Gratuitamente hay varios disponibles:

• Linux: Recomiendo Connections.
• MacOS: Puedes usar Safari o Screen Sharing App. (Más información){: .full}.

En caso contrario, si deseas trabajar directamente desde el navegador, puedes utilizar un cliente minimalista incluido en novnc. Tan solo abre el navegador en la dirección localhost:8080/vnc.html o novnc:8080/vnc.html.

Pipeline: GitLab CI

Para ejecutar Cypress en un pipeline de GitLab CI, necesitaremos una imagen de Docker que tenga instalado Cypress.

stages:
  - test

test:
  image: cypress/browsers:node16.16.0-chrome107-ff107-edge
  stage: test
  script:
    - npx cypress run --browser firefox

En el ejemplo se utiliza Firefox, pero puedes utilizar cualquier navegador que esté disponible en la imagen.

Es muy recomendado Chrome por su gran uso por parte de los usuarios.

npx cypress run --browser chrome

También puedes utilizar Firefox, ganando en flexibilidad de configuración.

npx cypress run --browser firefox

Si no necesitas un navegador en concreto, puedes utilizar Electron, un navegador basado en Chromium.

npx cypress run --browser electron

Conclusiones

La gran ventaja de utilizar Docker es que no necesitamos instalar nada en nuestro sistema operativo, ya que todo se ejecuta en un contenedor. Pero si debemos ejecutar entornos gráficos en Docker, compatible con todos los sistemas operativos, se recomienda usar un servidor Xorg como xvfb y un cliente VNC como novnc. A partir de ahí, no hay límites.