Puppeteer es una gran herramienta para realizar pruebas E2E o de UI a tus proyectos web, una solución muy simple y a la vez potente. La cuestión es que por mucho tiempo la he usado en un ambiente completamente Linux y todo ha salido de maravilla.
Para efectos de un curso que acabo de hacer decidí apoyarme en Windows y usé como siempre WSL, la cuestión es que no fue tan fácil como lo esperaba y resultó que debí realizar un montón de configuraciones adicionales que si bien resultaron en un problema terminaron valiendo cada segundo de ese tiempo.
En fin. La cuestión es que este artículo te explicará como hacerlo de la manera más fácil y seguir divirtiéndote con tus pruebas en este ambiente híbrido que cada vez me gusta más.
Prerequisitos
Lo único que obviamente necesitas es contar con WSL 2 ya instalado. Aquí te dejo el tutorial de cómo hacerlo de manera rápida.
A modo de aclaración, te cuento que yo uso Ubuntu como distribución de Linux. ¡Soy y seguiré siendo fan de Ubuntu todo el tiempo!
Instalando un servidor de GUI
Una de las más grandes limitaciones de WSL es su falta de capacidad para controlar ventanas externas a la terminal. Es justo esto lo que nos detiene. Así que comienza por instalar VcXsrc. Para ello ve a este enlace y descarga el archivo. Su instalación es muy sencilla y una vez hecha en su configuración debes primero elegir la opción de ventanas múltiples.
Presiona siguiente y ahora selecciona la opción Start no client, para iniciar al servidor.
Por último, lo más importante, deshabilita la opción Disable access control, para que tu dirección IP local esté habilitada para poder acceder al servidor de GUI.
Ahora pasemos a la configuración de la terminal.
Configurando tu terminal
Comienza por los comandos que obviamente siempre debemos usar al arrancar para tener nuestro sistema completamente actualizado.
sudo apt update sudo apt ugrade -y |
Es hora de agregar una variable de ambiente para hacerle saber a WSL de la existencia de nuestro servidor. De esta manera WSL estará listo para poder comunicarse.
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0 |
Las aplicaciones gráficas utilizan DBus para comunicarse entre ellas así que debes configurarlo desde la terminal.
sudo /etc/init.d/dbus start &> /dev/null |
Esto comenzará DBus en el shell de tu terminal ejecutándolo en segundo plano solo que ahora hay un tema. Para que la herramienta funcione requiere de contraseña y hacer esto puede interrumpir el proceso así que toca configurarlo en modo de acceso libre. De seguro estás usando tu nombre de usuario en la sesión de terminal, si no es así es el momento de cambiar de usuario porque será con este con el que vas a configurar el tema.
Abre una sesión de nano para configurar dbus.
sudo visudo -f /etc/sudoers.d/dbus |
Dentro del editor copia y pega esta línea pero reemplaza lo del inicio por tu nombre de usuario, si no lo conoces bien puedes apoyarte en el comando whoami.
<your_username> ALL = (root) NOPASSWD: /etc/init.d/dbus |
Sal de tu editor de texto y ahora es momento de reiniciar tu terminal para que el servicio arranque de manera automática. Con la terminal reiniciada es momento de instalar las dependencias del servidor de interfaz (GUI). Esto lo haces con los siguientes paquetes.
sudo apt-get install ca-certificates fonts-liberation libappindicator3-1 libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils |
Solo como aclaración es posible que no todos los paquetes se instalen porque quizá puede ser que ya estén ahí instalados en tu equipo, varios son paquetes de sistema así que no debes preocuparte por ello.
¡Y listo!
Todo está ya listo para que puedas jugar con tus pruebas. Crea un nuevo proyecto y agrega puppeteer. El resultado será bello y muy útil para este entorno de desarrollo, aquí tienes un fragmento para que lo pruebes.
cd codigo mkdir puppeteer && cd puppeteer npm init -y npm i puppeteer node --experimental-repl-await const b = await require('puppeteer').launch({ headless: false }) const p = await b.newPage() await p.goto('https://google.com') |
Espero que con esto puedas seguir teniendo mucha diversión automatizando tus entornos de trabajo y que los hagas lucir de esta manera.
¡Disfruta tu entorno de trabajo híbrido!