DEV Community

Using Graphical User Interfaces like Cypress' in WSL2

Nicky Meuleman on September 19, 2019

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

Read full post

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"

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?

Nicky Meuleman • Sep 27 '19

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.

Andreas Galster • Sep 27 '19

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!

Tom Brouwer • Mar 17 '20

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.

Nicky Meuleman • Mar 17 '20

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!

Cleiton Pereira • Mar 3 '20 • Edited

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?

Warun Kietduriyakul • Jun 13 '20 • Edited

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.

Nicky Meuleman • Mar 3 '20 • Edited

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...

Peter Cruckshank • Oct 22 '20

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 🤷‍♂️

Omri Ratson • Aug 20 '20

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")

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\""

drazik • Nov 21 '20

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 !!

Carlos Eduardo • Jul 29 '20

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

Pranav Malaviya • Jun 15 '21

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.

QAProEngineer • Aug 20 '20 • Edited

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.

Diego Artiles • Oct 10 '21 • Edited

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?

Cristobal Aguirre • Jun 7 '20

Works like a charm!

drazik • Nov 21 '20

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!

Paolo Carraro • Jan 13 '23 • Edited

No more necessary if you have WSL2 updated and Win11 (but also Win10 updated). You can install browser .deb pkg and after launch cypress --browser name-expected

Alexander 'Alex' Perez • Feb 4 '21

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!

elliason • Jan 20 '21

Works great for me, thank you very much!