Information

To reach a broader audience, this article has been translated from Japanese.
You can find the original version here.

Introduction

When trying to display the execution browser of Playwright installed on WSL2 on Windows 10 (with headless mode off), it didn't work initially, so I will summarize the cause and the solution I implemented.

Operating Environment

OS: Windows 10 (22H2)

WSL: 2.2.4.0 (Ubuntu 24.04 LTS)

Playwright: 1.45.3

Things I Struggled with

As a premise, there was no problem with the Playwright test code itself, and the tests completed successfully in headless mode.

First, disable headless mode in the Playwright settings as follows.

playwright.config.ts

  use: {
    headless: false
  }

Then execute the Playwright test.

$ npx playwright test

Then the following error was displayed, and the execution failed.

  Error: browserType.launch: Target page, context or browser has been closed
    Browser logs:

    ╔════════════════════════════════════════════════════════════════════════════════════════════════╗
    ║ Looks like you launched a headed browser without having a XServer running.                     ║
    ║ Set either 'headless: true' or use 'xvfb-run <your-playwright-app>' before running Playwright. ║
    ║                                                                                                ║
    ║ <3 Playwright Team                                                                             ║
    ╚════════════════════════════════════════════════════════════════════════════════════════════════╝

Solution

The error message essentially says, "You can't launch a headed browser without an XServer running."

Therefore, I decided to start an XServer on the Windows side.

Enabling WSLg also solves this

Without manually starting an XServer, the latest WSL has a feature called WSLg that supports GUI apps on WSL by default, and if this is enabled, such issues should not occur.

WSLg is automatically enabled if Windows, WSL, and the graphics driver are up to date, so do it if possible.

In my environment, Windows and WSL were the latest, but the graphics driver was old, so it didn't work. I was afraid that manually updating the graphics driver might cause display issues due to compatibility problems, so I gave up on enabling WSLg.

What is the X Window System?

This is a brief explanation of terms.

The X Window System is a window system commonly used by UNIX-like OS to display GUIs on a display. It adopts a client-server model, where you can start an XServer on the machine connected to the display you want to show and send graphics rendering commands over the network from another machine running a GUI app to the XServer^[1].

In this case, it's on the same machine, but the XServer is started on the Windows side, and the WSL side acts as an X client issuing rendering commands for the Playwright browser to the XServer.

Starting an XServer on the Windows side

Returning to the topic, I will summarize the solution.

As a free XServer software for Windows, VcXsrv seems to be popular, so I will use this.

First, download and install the VcXsrv installer.
Installer distribution site link
Start VcXsrv.
Configure the settings as follows on the displayed screen.
- Select display settings: Multiple windows
- Display number: -1
- Select how to start clients: Start no client
- Extra settings: Check all
- Press Complete
- Firewall settings: Allow for the connected network profile.
Set environment variables on WSL.

By executing the following command on WSL, set the environment variable DISPLAY to {Windows host IP address}:0.

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2; exit;}'):0

By configuring the above settings, the error was resolved, and the execution browser of Playwright on WSL could be displayed on the screen.

I will attach a screenshot of the window displayed when executing the Playwright test sample. The execution browser is specified as chromium.

Address to Set in DISPLAY Variable

As a side note, the Windows host IP address can also be obtained with the command ip route show | grep -i default | awk '{ print $3}'.^[2]
The number in the :0 part represents the display number^[3]. You can specify it in the "Display number" setting item when starting VcXsrv. This time, -1 was entered when starting VcXsrv, and 0 is automatically assigned in this case. VcXsrv can be started multiple times, and if you specify "Display number=-1" each time you start it, the display numbers will be assigned sequentially as 0, 1, 2, ...

Conclusion

This time, I summarized the method of starting an XServer as a solution to the error that occurred when trying to display the Playwright browser on WSL. I hope it will be helpful to anyone who encounters a similar error.

What is the X Window System ↩︎
Accessing Network Applications with WSL ↩︎
Explanation about the address: Chapter 2 Display Functions ↩︎