stack twitter tryhackme rss linkedin cross

Wilco van Esch

Skip to main content

Search results

    Setting up the Cypress GUI in WSL2 Ubuntu for Windows 10

    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.