Instalando o Cypress no WSL 2 (+ Usando o Puppeteer em testes)

Depois de muito tempo sofrendo, finalmente descobri como instalar o Cypress de forma limpa e tranquila no WSL2, e vou te ensinar, e além disso, quando você instalar aqui o Cypress, testes que usam o Puppeteer que é a mesma dependência que o Cypress usa, também passarão a rodar no seu WSL2!

Esse tutorial é muito útil se você está tendo o erro error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory ou algo parecido!

Créditos ao autor original, nesse link!

Antes de executar qualquer comando, ou código que eu tenha deixado aqui, tenta primeiro entender o que está escrito, e para os .sh, dê uma lida neles, mesmo que eu diga que seja seguro, é sempre bom olhar!

(OBS: Sempre que você ver um $ significa uma nova linha no seu terminal, ou seja, se ver $ mkdir ~/bin é pra você digitar mkdir ~/bin no terminal.)

Instale as dependencias

  $ sudo apt install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev \
        libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb \
        x11-apps build-essential ca-certificates libcurl3-gnutls    \
        libcurl4 libcurl4-openssl-dev
  $ mkdir ~/bin
  $ echo "export PATH=~/bin:\$PATH" >> ~/.bashrc

Instale os Certificados

Quando você usa um firewall, as vezes é um saco para a obter para reconhecer certificações. Fiz um script para adicionar as certificações dos domínios github. Se não estiver por detrás de um firewall e puder encaminhar para hosts github, então não precisa disto.

  $ cd ~/bin
  $ wget --no-check-certificate https://gist.githubusercontent.com/pjobson/c7983da02ddb81c2c7457775111a4266/raw/90d23250c3466b7a39a76c2082591bd4880b7f5d/install_certs.sh
  $ chmod +x install_certs.sh
  $ sudo ./install_certs.sh

Instale o Node

Atenção:: Se você já tiver o node instalado, PULE ESSA PARTE, ou desinstale ele e installe de novo!

  $ curl -k -L https://git.io/n-install | bash
  $ source ~/.bashrc
  $ n lts
  $ node --version
  $ npm --version

Instale o X-Server no seu Windows

Baixe e instale o vcxsrv: https://sourceforge.net/projects/vcxsrv/

Criado a variável DISPLAY no seu ~/.bashrc ou ~/.zshrc

A WSL usa a sua própria SUBNET e tem um IP diferente do Windows, por isso é necessário dizer à WSL para usar o seu endereço IP do Windows e exibir.

No WSL, execute:

  $ netsh.exe interface show interface

No meu, retorna o seguinte:

  Estado adm.    Estado         Tipo             Nome da interface
  -------------------------------------------------------------------------
  Habilitado     Conectado      Dedicado         Ethernet

Para você, pode retornar mais de uma coisa, e se você tiver usando uma VPN ou tiver mais de uma conexão é certeza que vai ter mais, mas sempre a maioria vai estar Desconectada e somente uma vai estar conectada.

Então, para o caso de você ter dois tipos de conexões diferentes que você usa, uma hora conectada em uma, e outra hora conectada em outra, (mas você não precisa ter), eu criei um script, para detectar qual você está usando atualmente

I wrote a script which will output the display based on VPN or Default.

  $ cd ~/bin
  $ wget --no-check-certificate https://gist.githubusercontent.com/J-Pster/187434642e2ff2ed46452f27027db5e2/raw/98939c7d5fdf82db2133ed06671d17e61989f98d/getdisplay.sh
  $ chmod +x getdisplay.sh
  $ ~/bin/getdisplay.sh 'Uma interface' 'Uma outra interface'

Claro, altere Uma interface e Uma outra interface para o nome das suas interfaces.

Atenção:: Como no meu caso, eu só tenho uma única interface, eu vou digitar o comando de um jeito diferente, vou repetir o mesmo nome de interface nos dois campos.

  $ ~/bin/getdisplay.sh 'Ethernet' 'Ethernet'

Quando você executar o comando, vai receber alguma coisa tipo isso aqui, e se não receber nada, veja se não digitou os nomes das interfaces errado, ou, por fim, abra o meu arquivo de getdisplay.sh e veja se você entende o que eu fiz lá.

  10.10.10.10:0.0

Agora, vamos editar o seu Arquivo de RC, que pode ser .bashrc ou .zshrc por exemplo, abra ele com nano ~/.<seu rc aqui> e cole o que escrevi abaixo: Atenção:: Como no meu caso eu uso o .zshrc eu vou digitar nano ~/.zshrc.

  # set DISPLAY variable to the IP automatically assigned to WSL2
  export DISPLAY="$(~/bin/getdisplay.sh 'Uma interface' 'Uma outra interface')"
  sudo /etc/init.d/dbus start &> /dev/null

Atenção:: Lembre de alterar Uma interface e Uma outra interface para o nome das suas interfaces.

Editar o arquivo de DBus

  $ sudo nano /etc/sudoers.d/dbus

Adicione:

  <your username> ALL = (root) NOPASSWD: /etc/init.d/dbus

Claro, no lugar de <your username> use o seu username do linux.

Reinicie com o source o seu RC

  $ source ~/.bashrc
  $ echo $DISPLAY

OBS:: O comando source reinicia o seu terminal sem você precisar reiniar seu sistema todo.

Agora sim, quando você digitar echo $DISPLAY deve retornar algo do tipo, e se não retornar, veja se não usou o RC errado.

  10.10.10.10:0.0

Inicie o X-Server

Abra o XLaunch, você deve achar ele no menu ou na área de trabalho.

Configuração ao abrir:

Selecione: Multiple Windows (default)
Selecione: Start no client (default)
Marque: Disable access control
Desmarque: Native opengl
Aperte para Next
Salve a config na pasta: %AppData%\Microsoft\Windows\Menu Iniciar\Programas\Inicializar

Configurando o Firewall

Aperte o botão do windows -> Pesquise por Run -> Execute o código abaixo

  %windir%\system32\WF.msc

Clique em Regras de Entrar -> Nova Regra...

Tipo de Regra: Programa
Programa -> Cole esse caminho aqui: %ProgramFiles%\VcXsrv\vcxsrv.exe
Ação: Permitir a Conexão
Perfil: Marca tudo
Nome: VcXsrv

VAMOS TESTAR ESSA BAGAÇA!

Vamos rodar um dos x11-apps que você instalou lá nas dependências, rode no seu terminal:`

  $ xeyes

Agora você deve estar vendo olhos super estranhos hahaha!

Vamos instalar o Cypress no Projeto agora, se você não tiver!

De forma geral:

  $ cd seu_projeto
  $ npm init

Se você não está atrás de um Firewall:

  $ npm install cypress --save-dev

Se estiver atrás de uma firewall, precisa de obter o ficheiro zip e apontar o NPM para o utilizar.

  # Version -------------------------------------------------VVVVV
  $ wget --no-check-certificate https://cdn.cypress.io/desktop/9.5.3/linux-x64/cypress.zip -O ~/cypress.zip
  $ CYPRESS_INSTALL_BINARY=~/cypress.zip npm install cypress --save-dev

Se receber um erro no certificado, desactive o strict-ssl em npm.

  $ npm config set strict-ssl false

Agora, abra o Cypress!

  $ ./node_modules/.bin/cypress open

Frequentemente, eu adiciono temporariamente o caminho no meu PATH manualmente.

  $ export PATH=./node_modules/.bin/:$PATH
  $ cypress open

Infos extras para quem usa AWS EC2 (Inglês)

I wanted to add a note that you can forward traffic from your AWS EC2 instance through WSL to the X Server in Windows.

In your WSL create a ~/.ssh/config file and add:

Host <AWS_HOST_IP_ADDRESS>
        HostName     <AWS_HOST_IP_ADDRESS>
        User         <AWS_HOST_USERNAME>
        IdentityFile ~/.ssh/<AWS_HOST_PEM_FILE>
        Port         22
        ForwardX11   yes

Host *
        IdentitiesOnly=yes
        PreferredAuthentications=publickey
        Compression yes
        ServerAliveInterval 30
        ServerAliveCountMax 1200
        LogLevel INFO

Then you can ssh to your EC2 host inside WSL. From your EC2 install xorg-x11-apps and run xeyes, this should open that app within your Windows x-server. You should be able to run cypress headed from your EC2 and have it open in Windows.

J-Pster/instalar_cypress_wsl2.md