J-Pster/instalar_cypress_wsl2.md

## instalar_cypress_wsl2.md

      
    Raw
  

              instalar_cypress_wsl2.md
            
          
    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.