Wilco van Esch

First, check that you're actually running WSL2. In a Windows 10 command prompt (not in WSL bash):

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

If you don't have a project yet with Cypress in it, let's go into WSL bash and create one. In a command prompt:

bash
cd ~
mkdir some-project
cd some-project
npm init
npm i cypress --save-dev

Then (or if you already have a project with Cypress), let's add a convenience command to package.json:

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

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

If you run it right now, 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 I'll use VcXsrv here. Go ahead and install VcXsrv.

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

1. cd ~/home/YOURUSERNAME/.bashrc
2. Add the following to the 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

Now launch the X Server (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.

Now launch your project's web server.

Finally, launch Cypress with npm t.