Skip to content

Instantly share code, notes, and snippets.

@isomorpheric
Forked from pjobson/setup_cypress_wsl2.md
Created June 30, 2022 16:13
Show Gist options
  • Save isomorpheric/743ceaf940848587ec6c34048665a20f to your computer and use it in GitHub Desktop.
Save isomorpheric/743ceaf940848587ec6c34048665a20f to your computer and use it in GitHub Desktop.
Setting Up Cypress on Ubuntu WSL2

Setting Up Cypress on Ubuntu WSL2

No clue why the directions for this are buried deep in WLS issues. This is how I setup my Cypress on Ubuntu WSL2 working for both on and off VPN with some corp firewall.

Before executing any command, be sure to read and understand it, I ask you to run two shell scripts which I wrote. You should review any shell script provided by anyone before blindly running it. I'm not doing anyting bad, but I advise you to check for yourself.

Dependencies

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

Install Certs

Inside a firewall sometimes it is a PITA to get it to recognize certifications. I made a script to add the certs from github domains. If you're not behind a firewall and you can route to github hosts, then you do not need this.

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

Install Node

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

Install X-server

Download and install vcxsrv: https://sourceforge.net/projects/vcxsrv/

Setup DISPLAY

WSL uses its own SUBNET and has a different IP than Windows, so you need to tell WSL to use your Windows IP address and display.

In WSL, run:

netsh.exe interface show interface

Mine returns this at home while on the VPN:

Admin State    State          Type             Interface Name
-------------------------------------------------------------------------
Enabled        Connected      Dedicated        Ethernet 3
Disabled       Disconnected   Dedicated        Ethernet 2
Enabled        Connected      Dedicated        Wi-Fi
Enabled        Connected      Dedicated        vEthernet (WSL)

Whereas at work off the VPN it returns:

Admin State    State          Type             Interface Name
-------------------------------------------------------------------------
Disabled       Disconnected   Dedicated        Ethernet 3
Disabled       Disconnected   Dedicated        Ethernet 2
Enabled        Connected      Dedicated        Wi-Fi
Enabled        Disconnected   Dedicated        Ethernet
Enabled        Connected      Dedicated        vEthernet (WSL)

In this example, my VPN connection is Ethernet 3 where as my non-VPN connection is Wi-Fi. In my case I need to use the IP for the VPN while at home and the IP from the Wi-Fi at work. I'm not 100% sure why this is, but I dislike Windows, so whatever.

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

cd ~/bin
wget --no-check-certificate https://gist.githubusercontent.com/pjobson/3c5c23edd8e49cef7816372f4931f564/raw/8121f630571c8391f031d378f9381590ecbda003/getdisplay.sh
chmod +x getdisplay.sh
~/bin/getdisplay.sh 'VPN Interface' 'Default Interface'

Note: If you're not on a VPN and just to use a single interface, you can just pass it twice. The script is written for my specific use case, so it will always require two.

~/bin/getdisplay.sh 'Default Interface' 'Default Interface'

Of course change the VPN Interface and Default Interface to whatever yours are.

Mine for example is:

~/bin/getdisplay.sh 'Ethernet 3' 'Wi-Fi'

This should output something like this. If it returns nothing, you probably are using the wrong interfaces.

10.10.10.10:0.0

Edit .bashrc, add the following, again making the interfaces your own.

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

Edit dbus file

sudo vi /etc/sudoers.d/dbus

Add:

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

Source your bashrc

source ~/.bashrc
echo $DISPLAY

This should again display something like:

10.10.10.10:0.0

Start X Server

Open XLaunch from start menu.

Config:

  • Select: Multiple Windows (default)
  • Select: Start no client (default)
  • Check: Disable access control
  • Uncheck: Native opengl
  • Save configuration on startup folder, location: %AppData%\Microsoft\Windows\Start Menu\Programs\Startup

Windows Firewall

Start -> Run

 	%windir%\system32\WF.msc

Right-Click Inbound Rules -> New Rule...

  • Rule Type: Program
  • Program -> This Program Path: %ProgramFiles%\VcXsrv\vcxsrv.exe
  • Action: Allow the Connection
  • Profile: Check all
  • Name: VcXsrv

Test It

Just run one of the x11-apps installed at the top.

xeyes

Should open the xeyes application.

Install Cypress

General:

cd code_path
npm init

If you're NOT behind a firewall:

npm install cypress --save-dev

If you are behind a firewall, you need to get the zip file and point NPM to use it.

# 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

If you get a certificate error, disable strict-ssl in npm.

npm config set strict-ssl false

Then start it.

./node_modules/.bin/cypress open

Frequently I'll temporarily add the path to it to my PATH.

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

cypress open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment