Cómo ejecutar tus tests de Cypress en Microsoft Edge dentro de un contenedor de Linux.

¡Hola a todos y bienvenidos a mi primer post en DEV.to!.

En este post os voy a contar una de mis últimas metas conseguidas: ejecutar un proyecto de Cypress en Microsoft Edge en un contenedor de Linux.

Si, habéis leido bien, Microsoft Edge en Linux.

Desde hace unos días podemos descargar desde la web oficial (https://www.microsoftedgeinsider.com/es-es/download/) las versiones también para las diferentes distribuciones de Linux, aunque a nosotros nos interesa sólo el hacerlo mediante consola y no mediante descarga directa de la web ya que lo usaremos dentro de un contenedor.

¿Qué problema queremos resolver aquí?

Tenemos un proyecto de test E2E en Cypress que ya se ejecutan dentro de un contenedor de Linux en los siguientes navegadores soportados por Cypress y Docker: Chrome, Firefox y Electron.

Como Cypress también soporta Edge y queremos mejorar nuestra estrategia de cross-browser testing, queremos añadir Edge a nuestro stack.

¿Qué necesitamos?

Dentro del proyecto de Cypress: añadir en el package.json el poder soportar edge al lanzarlo con open o con run.

En nuestro Dockerfile: añadir las dependencias para poder descargar Edge, la instalación de Edge y el enlace simbólico para indicarle a Cypress dónde se encuentra Edge (Por ahora hay que indicarlo, más info aquí: https://github.com/cypress-io/cypress/issues/8930).

Los cambios que he realizado son:

package.json:

"scripts": {
  ...
  "test:edge": "cypress run --browser edge --headless"
  ...
}

Dockerfile:

 # Cogemos la imagen de base con Cypress ya instalado. 
FROM cypress/base:14.10.1

USER root

# Vemos la versión de Node que tenemos instalada. 
RUN node --version

# Añadimos las librerias para descargar Edge
RUN curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
RUN install -o root -g root -m 644 microsoft.gpg /etc/apt/trusted.gpg.d/
RUN sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/edge stable main" > /etc/apt/sources.list.d/microsoft-edge-dev.list'
RUN rm microsoft.gpg

# Instalamos Edge
RUN apt-get update
RUN apt-get install -y microsoft-edge-dev

# Conocer la versión de Edge que tenemos: 
RUN microsoft-edge-dev --version

# Añadimos un link simbólico para indicar a Cypress donde está localizado
RUN ln -s /usr/bin/microsoft-edge /usr/bin/edge

Una vez tenemos esto configurado, en nuestro pipeline/script para lanzar Cypress, ejecutamos el comando que hemos definido en el package.json y podremos ejecutar nuestros tests de Cypress en Microsoft Edge. En mi caso sería el siguiente:

npm run test:edge

Fijaros que cuando comienza la ejecución, en los navegadores que aparecen en Cypress nos aparece la versión correcta de Edge (la misma que hemos mostrado en los logs del Dockerfile):

Y que, al comenzar la ejecución de las specs también nos aparece la versión correcta:

Y con esto tenemos los test de Cypress ejecutados también en Edge.

Si tenéis cualquier duda o problema en el proceso, no dudéis en preguntar.