Setting up the Cypress GUI in WSL2 Ubuntu (20.04) for Windows 10

Adapted and tested 3/10/21

First, check that you're actually running WSL2. In a Windows 10 command prompt/PowerShell (not in a linux terminal):

wsl -l -v

For this guide, you should be seeing NAME: Ubuntu, STATE: Running, VERSION: 2.

You'll also need Node. To check if you've already got it, again in a command prompt:

node --version

Let's create a "project" to install cypress in. In your linux terminal:

mkdir cypress-setup-test
cd cypress-setup-test
npm init
npm i cypress --save-dev

Let's add a convenience command to package.json:

code .

Open package.json in VS Code and add this to the scripts object:

​​"scripts": {
​​  "test": "./node_modules/.bin/cypress"
​​},

This allows us to open Cypress tests by simply using npm t open.

Trying to open Cypress will likely result in an error as you are missing stuff. Go to the cypress docs and run the listed command there to install the required dependencies. (Might need to stick sudo in front of the command.)

Now if you try to open it (and the correct dependencies are installed), it won't bring up the Cypress GUI. WSL2 doesn't have the ability to display graphic interfaces, but we can ask Windows 10 to display them for us. We do that using an X Server. There are a number of them, but we'll use VcXsrv here. Go ahead and download and install VcXsrv.

Now we have to make sure graphical interfaces launched from WSL2 know what local ip WSL2 is at.

Open a new linux terminal tab and use the following commands:

cd ~
code .

In VS Code, open the .bashrc file.

Add the following to the top (important that it is the very top) of the file:

# set DISPLAY variable to the IP automatically assigned to WSL2
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0

Next, we'll have to enable D-Bus so these applications can exchange messages.

Add the following underneath the place where we set the DISPLAY environment variable:

# Automatically start D-Bus to allow communication with Cypress GUI app
sudo /etc/init.d/dbus start &> /dev/null

Close all linux terminals.

Launch a linux terminal. From now on, you may be asked for your password when you open a linux terminal window/tab (I think this is because linux is running the sudo command we just set above on launch).

Now launch the X Server in Windows (if you're using VcXsrv, look for XLaunch).

You can accept the defaults for Display settings and Client startup, but under Extra settings make sure to check the Disable access control checkbox.

In the Windows security alert that comes up first time XLaunch is launched, allow public & private networks.

Finally, check this has all worked by trying to open Cypress again with npm t open 🤞

Whenever you want to open cypress, you'll need to make sure XLaunch is running in Windows first with the "Disable access control" checked.

When using cypress, best to launch it in a separate linux tab from the one you want to use for navigation/other stuff as opening cypress this way locks up your terminal and fills it with error messages (that I think are fine) and console logs.

It seems that when you make changes to your tests you have to reopen a test window.

Adapted from: https://wilcovanes.ch/articles/setting-up-the-cypress-gui-in-wsl2-ubuntu-for-windows-10/