DEV Community

Nicky Meuleman
Nicky Meuleman

Posted on • Originally published at nickymeuleman.netlify.com on

Using Graphical User Interfaces like Cypress' in WSL2

The Window Subsystem for Linux is very powerful.
After exploring it for a bit, I wanted to push it even further.

Wouldn't it be cool to run GUIs natively inside of Linux, on your computer running Windows? 🀯

Prerequisites

Let's get the obvious one out of the way first.
WSL2. I wrote a guide detailing how to take it from 0 to awesome in a short time.
Now, it's time to turn that dial to 11.

For good measure, update that linux install

sudo apt update
sudo apt upgrade

VcXsrv

You can use something called an X-server to display what is going on in the Linux side of the computer.

For this I used the free program VcXsrc.

The first time you run that program, allow "Public networks, such as those in airports and coffee shops" when the Windows firewall pops up.

To display programs that launch on the WSL side of the machine as seperate windows. I chose the options "Multiple windows" and "Start no client".

On the page that lets you enable extra settings, be sure to disable access control.
By default it only allows the local IP 127.0.0.1.
Since WSL has its own IP address, which changes often, allow connections from all clients.

disable access control

Cypress

You can replace this with whatever GUI you would like to run.
In my case, it was Cypress, so I made sure to set it up.

After installing Cypress in a project, I added a way to launch it in package.json.

{
  "scripts": {
    "cy:open": "cypress open"
  }
}

There were a bunch of errors greeting me when I tried to run cy:open

initial error image

Luckily, it was a helpful error message that points to a docs page with the solution.

sudo apt install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2

After installing those packages, trying to run cy:open doesn't error anymore.
It doesn't do anything else either, only show the Opening Cypress message forever.

stuck on opening then launching Cypress

Bash config

The DISPLAY variable

In order for Linux GUI apps to connect to our X-server, a DISPLAY environment variable has to be set.

In your .bashrc (or .zshrc if you are using ZSH)

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

When you start WSL2, it gets its own IP address.
That long command will evaluate to the IP that WSL2 set.
The DISPLAY variable has the format <host>:<display>.<screen>.

Both <display> and <screen> are set to 0 here so that line will evaluate to something like export DISPLAY=172.17.224.1:0.0, with the <host> changing to the correct IP.

To confirm this worked, print out the variable you just set in the terminal.

echo $DISPLAY
# 172.17.224.1:0.0

Automatically start dbus

A lot of GUI apps use D-Bus to internally communicate.

In .bashrc (or zshrc), under to previous line, add

sudo /etc/init.d/dbus start &> /dev/null

This file can be reloaded by running source ~/.bashrc (or source ~/.zshrc) in your terminal.

Grant passwordless access for dbus

We need a soduers file to grant our linux user access to dbus without a password.

To accomplish this, use the visido command.

This best practice will ensure you don't lock yourself out of the system. The sudoers file doesn't play around, like the README in /etc/sudoers.d/README will tell you.

sudo visudo -f /etc/sudoers.d/dbus

A Nano editor will launch. Enter the following line, where <your_username> is replaced by -πŸ₯drumroll pleaseπŸ₯- your username.

If you aren't sure what the name of your linux user is, running whoami in the terminal will tell you.

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

Writing a file in the Nano editor is almost as hard as quitting VIM.
Press CTRL+O to save, then press Enter to confirm. Finally, press CTRL+X to close the editor.

Launch your GUI app

Close your terminal and open up a new one in the location you want to open the GUI app.

Open the VcXsrv program in Windows (called XLaunch).
Be sure to disable access control.

Launch the program in Linux.

# in the directory I installed Cypress and set up the command to launch it
yarn run cy:open

BOOM, a window opens running a Linux app, on Windows πŸŽ‰

The Cypress interface

Discussion (19)

Collapse
andreasgalster_91 profile image
Andreas Galster

Hey Nicky, thanks for this article, this has helped me a lot! Running Cypress for the first time on WSL, that's amazing!

What I've noticed is that it opens cypress but doesn't run the tests. Is there a way to automatically already execute the tests? I've tried doing

npm run cy:open --spec "cypress/integration/examples/location.spec.js"
Enter fullscreen mode Exit fullscreen mode

to run a specific spec for example but it doesn't run the actual test, it just opens the GUI. Any suggestions how to actually run through the tests automatically on cypress launch?

Collapse
nickymeuleman profile image
Nicky Meuleman Author

Glad it helped!

If you would like the tests to automatically start, use cypress run instead of cypress open. By default it runs in headless mode, so if you want to see the GUI you have to pass --headed as command line argument.

{
  "scripts": {
    "cy:run": "cypress run --headed"
  }
}

The docs to the CLI will tell you more details.

Collapse
andreasgalster_91 profile image
Andreas Galster

Sometimes the solution is so darn simple, makes you wonder how you didn't see it lol!

Thanks so much! I'm super excited to finally using Cypress in real-world scenarios, appreciate your help!

Collapse
cleitonper profile image
Cleiton Pereira • Edited on

Hi Nick, thanks for the article.

I'm trying to run cypress inside wsl 2, but the command yarn run cy:open always display an error message saying this: (Cypress:23887): Gtk-WARNING *: 17:08:53.243: cannot open display: 172.22.208.1:0.0 Done in 40.56s.*

The $DISPLAY environment variable is already set, and VcXsrv is up and running.

Any idea what is causing that?

Collapse
scalopus profile image
Warun Kietduriyakul • Edited on

Hi Nick, Thank you for the article, I'm so grad that it easy to follow and successfully bring it up.

I got the same issue about 'cannot open display'. Finally, I got solution, I just need to change firewall policy for the VcXsrv to able to working in Public even I am in the home (Private network). Then after that, everything work well.
Open the Control Panel as following
Control Panel\System and Security\Windows Defender Firewall\Allowed apps
and Enable VcXsrv in Public.

I also follow this script but it seem not related to this issue.
github.com/microsoft/WSL/issues/47...

Just leave the detail in case someone may experience the same.

Collapse
nickymeuleman profile image
Nicky Meuleman Author • Edited on

Hey!

Apparently, in some distros you have to enable the option called X11Forwarding manually first.
superuser.com/questions/310197/how...

Hope it helps, I had no idea what could cause it so I googled the error.
edit: this link also seems helpful: thegeekstuff.com/2010/06/xhost-can...

Collapse
tombrouwer profile image
Tom Brouwer

Hi Nicky!

Thanks for this article! I've done everything, but I'm getting an error. The following errors:

[1832:0317/190428.170386:WARNING:gpu_process_host.cc(1221)] The GPU process has crashed 1 time(s)
[1832:0317/190428.295705:WARNING:gpu_process_host.cc(1221)] The GPU process has crashed 2 time(s)
[1832:0317/190428.420867:WARNING:gpu_process_host.cc(1221)] The GPU process has crashed 3 time(s)
[1832:0317/190428.527200:WARNING:gpu_process_host.cc(1221)] The GPU process has crashed 4 time(s)
[1832:0317/190430.552123:WARNING:gpu_process_host.cc(1221)] The GPU process has crashed 5 time(s)
[1832:0317/190430.651939:WARNING:gpu_process_host.cc(1221)] The GPU process has crashed 6 time(s)
[1832:0317/190430.652309:FATAL:gpu_data_manager_impl_private.cc(986)] The display compositor is frequently crashing. Goodbye.

Do I have to install anything from Node or something on Windows? XLounch is running. Another problem I have is that D-Bus is not found when I run it from .bashrc. Later I will search for a solution, for now I start it manually.

Collapse
nickymeuleman profile image
Nicky Meuleman Author

I don't have node installed on the Windows side on the machine I tried this on.
The only dev-related software that is installed on the Windows side here is git.

As for the error, I don't have a deep linux knowledge and am going off what I found by googling that error message. It seems to be related to electron and aparently it's often helped by disabling a feature.

github.com/cypress-io/cypress/issu...

The only advice I can give is to pay close attention to when the error happens, and then googling it

Hope you get it working!

Collapse
petecapecod profile image
Peter Cruckshank

I have to go say, that it totally worked for me 🎊 With that said I think there may have been some debugging with dbus, or maybe I just had to restart my machine.
Either way it is up and running now πŸƒβ€β™‚οΈ
The next step is to go ahead and load those browsers on to your WSL distro πŸ˜…
Otherwise you can only debug in Electron πŸ€·β€β™‚οΈ

Collapse
duard profile image
Carlos Aquino

It dont work here for me

➜ npx ng e2e

chunk {main} main.js, main.js.map (main) 41 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 142 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 13.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.98 MB [initial] [rendered]
Date: 2020-07-29T12:10:55.964Z - Hash: 639c300a80c9e6a4811e - Time: 6189ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
It looks like this is your first time using Cypress: 4.11.0

  βœ–  Verifying Cypress can run /home/duard/.cache/Cypress/4.11.0/Cypress
    β†’ Cypress Version: 4.11.0
Cypress verification timed out.

This command failed with the following output:

/home/duard/.cache/Cypress/4.11.0/Cypress/Cypress --no-sandbox --smoke-test --ping=651

----------

Command failed: /home/duard/.cache/Cypress/4.11.0/Cypress/Cypress --no-sandbox --smoke-test --ping=651

----------

Platform: linux (Ubuntu - 20.04)
Cypress Version: 4.11.0
Collapse
omriyahoo profile image
Omri Ratson

It's working for me (most of the time, not sure why).
Maybe it's got to do with this printed message I get all the time while running the test:

[6162:0820/164832.276509:ERROR:bus.cc(393)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
Enter fullscreen mode Exit fullscreen mode

I'm new in the project but this is the configuration (the npm script) of running cypress in the package.json that might give a clue about the message printed:

"cy:start": "concurrently -k -s first \"npm:test\" \"wait-on tcp:3000 && cypress open\""
Enter fullscreen mode Exit fullscreen mode
Collapse
drazik profile image
drazik

I have the same messages when a run ./node_modules/.bin/cypress open, so I don't think the message it related to the npm script of your project.

I had to run the command like 3 times to see cypress UI opening. But hey it's cool, it kinda work :D

If anybody reading this have a solution to fix the error message and make it work everytime, please share it !!

Collapse
qa1980 profile image
QA1980 • Edited on

Hi ,It doesn't work for me when I try to add dependences :
It throws this error :
dpkg: error processing package libatk1.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libatspi2.0-dev:amd64:
libatspi2.0-dev:amd64 depends on libglib2.0-dev (>= 2.4.1-2); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libatspi2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libgtk-3-dev:amd64:
libgtk-3-dev:amd64 depends on libatk1.0-dev (>= 2.15.1); however:
Package libatk1.0-dev:amd64 is not configured yet.
libgtk-3-dev:amd64 depends on libcairo2-dev (>= 1.14.0); however:
Package libcairo2-dev:amd64 is not configured yet.
libgtk-3-dev:amd64 depends on libglib2.0-dev (>= 2.57.2); however:
Package libglib2.0-dev:amd64 is not configured yet.
libgtk-3-dev:amd64 depends on libpango1.0-dev (>= 1.41); however:
Package libpango1.0-dev:amd64 is not configured yet.

dpkg: error processing package libgtk-3-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libharfbuzz-dev:amd64:
libharfbuzz-dev:amd64 depends on libglib2.0-dev (>= 2.19.1); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libharfbuzz-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libnotify-dev:amd64:
libnotify-dev:amd64 depends on libglib2.0-dev (>= 2.26); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libnotify-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libatk-bridge2.0-dev:amd64:
libatk-bridge2.0-dev:amd64 depends on libglib2.0-dev (>= 2.4.1-2); however:
Package libglib2.0-dev:amd64 is not configured yet.
libatk-bridge2.0-dev:amd64 depends on libatspi2.0-dev; however:
Package libatspi2.0-dev:amd64 is not configured yet.

dpkg: error processing package libatk-bridge2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libgdk-pixbuf2.0-dev:amd64:
libgdk-pixbuf2.0-dev:amd64 depends on libglib2.0-dev (>= 2.37.6); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libgdk-pixbuf2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
Errors were encountered while processing:
libpcre16-3:amd64
libpcre3-dev:amd64
libglib2.0-dev:amd64
libpango1.0-dev:amd64
libcairo2-dev:amd64
libatk1.0-dev:amd64
libatspi2.0-dev:amd64
libgtk-3-dev:amd64
libharfbuzz-dev:amd64
libnotify-dev:amd64
libatk-bridge2.0-dev:amd64
libgdk-pixbuf2.0-dev:amd64
E: Sub-process /usr/bin/dpkg returned an error code (1)
karimh@DESKTOP-DQ0GO0K:/mnt/c/Users/karim/Desktop/Cypress/Cypress_E2E_Automation$ export DISPLAY=localhost:127.0.0.1:0.0
karimh@DESKTOP-DQ0GO0K:/mnt/c/Users/karim/Desktop/Cypress/Cypress_E2E_Automation$ DISPLAY=localhost:127.0.0.1:0.0 npx cypress openIt looks like this is your first time using Cypress: 4.12.1

βœ– Verifying Cypress can run /home/karimh/.cache/Cypress/4.12.1/Cypress
β†’ Cypress Version: 4.12.1
Cypress failed to start.

This is usually caused by a missing library or dependency.

The error below should indicate which dependency is missing.

on.cypress.io/required-dependencies

If you are using Docker, we provide containers with all required dependencies installed.


(Cypress:4411): Gtk-WARNING **: 13:30:41.821: cannot open display: localhost:127.0.0.1:0.0


Platform: linux (Ubuntu - 20.04)
Cypress Version: 4.12.1
karimh@DESKTOP-DQ0GO0K:/mnt/c/Users/karim/Desktop/Cypress/Cypress_E2E_Automation$ sudo apt install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2
Reading package lists... Done
Building dependency tree

Reading state information... Done
libnotify-dev is already the newest version (0.7.9-1ubuntu2).
libxss1 is already the newest version (1:1.2.3-1).
libgconf-2-4 is already the newest version (3.2.6-6ubuntu1).
libasound2 is already the newest version (1.2.2-2.1ubuntu1).
libgtk-3-dev is already the newest version (3.24.20-0ubuntu1).
libnss3 is already the newest version (2:3.49.1-1ubuntu1.4).
0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
12 not fully installed or removed.
Need to get 0 B/150 kB of archives.
After this operation, 0 B of additional disk space will be used.
Do you want to continue? [Y/n] y
dpkg: error processing package libpcre16-3:amd64 (--configure):
package is in a very bad inconsistent state; you should
reinstall it before attempting configuration
dpkg: dependency problems prevent configuration of libpcre3-dev:amd64:
libpcre3-dev:amd64 depends on libpcre16-3 (= 2:8.39-12build1); however:
Package libpcre16-3:amd64 is not configured yet.

dpkg: error processing package libpcre3-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libglib2.0-dev:amd64:
libglib2.0-dev:amd64 depends on libpcre3-dev (>= 1:8.31); however:
Package libpcre3-dev:amd64 is not configured yet.

dpkg: error processing package libglib2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libpango1.0-dev:amd64:
libpango1.0-dev:amd64 depends on libglib2.0-dev (>= 2.59.2); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libpango1.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prNo apport report written because the error message indicates its a followup error from a previous failure.
No apport report written because the error message indicates its a followup error from a previous failure.
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
event configuration of libcairo2-dev:amd64:
libcairo2-dev:amd64 depends on libglib2.0-dev; however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libcairo2-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libatk1.0-dev:amd64:
libatk1.0-dev:amd64 depends on libglib2.0-dev (>= 2.31.2); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libatk1.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libatspi2.0-dev:amd64:
libatspi2.0-dev:amd64 depends on libglib2.0-dev (>= 2.4.1-2); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libatspi2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libgtk-3-dev:amd64:
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
No apport report written because MaxReports is reached already
libgtk-3-dev:amd64 depends on libatk1.0-dev (>= 2.15.1); however:
Package libatk1.0-dev:amd64 is not configured yet.
libgtk-3-dev:amd64 depends on libcairo2-dev (>= 1.14.0); however:
Package libcairo2-dev:amd64 is not configured yet.
libgtk-3-dev:amd64 depends on libglib2.0-dev (>= 2.57.2); however:
Package libglib2.0-dev:amd64 is not configured yet.
libgtk-3-dev:amd64 depends on libpango1.0-dev (>= 1.41); however:
Package libpango1.0-dev:amd64 is not configured yet.

dpkg: error processing package libgtk-3-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libharfbuzz-dev:amd64:
libharfbuzz-dev:amd64 depends on libglib2.0-dev (>= 2.19.1); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libharfbuzz-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libnotify-dev:amd64:
libnotify-dev:amd64 depends on libglib2.0-dev (>= 2.26); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libnotify-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libatk-bridge2.0-dev:amd64:
libatk-bridge2.0-dev:amd64 depends on libglib2.0-dev (>= 2.4.1-2); however:
Package libglib2.0-dev:amd64 is not configured yet.
libatk-bridge2.0-dev:amd64 depends on libatspi2.0-dev; however:
Package libatspi2.0-dev:amd64 is not configured yet.

dpkg: error processing package libatk-bridge2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
dpkg: dependency problems prevent configuration of libgdk-pixbuf2.0-dev:amd64:
libgdk-pixbuf2.0-dev:amd64 depends on libglib2.0-dev (>= 2.37.6); however:
Package libglib2.0-dev:amd64 is not configured yet.

dpkg: error processing package libgdk-pixbuf2.0-dev:amd64 (--configure):
dependency problems - leaving unconfigured
Errors were encountered while processing:
libpcre16-3:amd64
libpcre3-dev:amd64
libglib2.0-dev:amd64
libpango1.0-dev:amd64
libcairo2-dev:amd64
libatk1.0-dev:amd64
libatspi2.0-dev:amd64
libgtk-3-dev:amd64
libharfbuzz-dev:amd64
libnotify-dev:amd64
libatk-bridge2.0-dev:amd64
libgdk-pixbuf2.0-dev:amd64
E: Sub-process /usr/bin/dpkg returned an error code (1)

Collapse
pranavhere profile image
Pranav Malaviya

Thanks for the article, Nick. Up and running in minutes.

In case anyone is looking for solutions to their errors in comments,
try RESTARTING ones.
From cmd/PowerShell wsl --shutdown and reopen the Ubuntu Terminal.

Collapse
dartilesm profile image
Diego Artiles • Edited on

Hi Nicky, thanks for the post.

I have one question. How can I revert that changes? Recently was arrived Windows 11 and this problem was solved with the new windows update.

When I try to open cypress without opening the "xserver", wsl is attempting to open with that way and then after some seconds open with native feature of windows 11.

How can revert this changes to open apps directly with windows 11 native feature?

Collapse
jcaguirre89 profile image
Cristobal Aguirre

Works like a charm!

Collapse
drazik profile image
drazik

It's amazing that we can do this with WSL. Microsoft did a very good work. And you did a good work too with this post, thank you!

Collapse
alexanderlperez profile image
Alexander 'Alex' Perez

Wow, what a service to the world for getting this all organized. Thank you for writing this, I was convinced that it was a no-go getting cypress to work on Windows 10 + WSL!

Collapse
elliason profile image
elliason

Works great for me, thank you very much!