Skip to content

Run Playwright in non-headless mode on WSL with PyCharm

Published by JoeB on March 24, 2023

If you're developing a Playwright test in a Linux environment using WSL, you may want to watch the test run in a browser window. However, this does not work right out of the box, because the default Linux distros don't ship with a graphical environment. There are many ways around this, but a simple minimalistic way is as follows.

I. Install base packages

You may need to install some base dependencies for the graphical web browser to be able to run. Here is an example for Ubuntu 22.04:

apt install libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libgstreamer-plugins-bad1.0-0 gstreamer1.0-libav -y

II. Forward DISPLAY to Windows

Add the following to the end of your .bashrc file in your Linux env:

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0.0
sudo /etc/init.d/dbus start &> /dev/null

Then source the file to update your DISPLAY environment variable and start dbus:

source ~/.bashrc

If your user doesn't have sudo access, you should add this to /etc/sudoers.d/$USER, replacing $USER with your linux user name.

$USER ALL=(root) NOPASSWD:/etc/init.d/dbus start

III. Install VcXsrc in Windows

This will give you an X client for the Playwright browser window to connect to.
Get it here, it's open source: https://sourceforge.net/projects/vcxsrv/

After you download it, rut it in its own folder and run it.

IV. Make it work with PyCharm

When debugging with PyCharm, you will need to add the DISPLAY environment variable to the debug environment as well. First, go into Linux and get the DISPLAY variable value:

echo $DISPLAY

It should look something like this: 72.17.96.1:0.0

Then, set that value in PyCharm:

  1. Click on the Debug configuration dropdown and click "Edit configurations..."
  2. Select the Run/Debug configuration you're working with, and navigate to "Environment variables" under the Environment section
  3. Click the button to Edit environment variables, and add a variable named DISPLAY with the value you obtained above.
Published inDevelopment