はじめに

Windows10でWSL2上にインストールされたPlaywrightの実行ブラウザを画面に表示(ヘッドレスモードオフ)しようとした際、最初上手くいかなかったので原因とその対処した内容をまとめます。

動作環境

OS:：Windows10(22H2)
WSL：2.2.4.0 (Ubuntu 24.04 LTS)
Playwright：1.45.3

ハマったこと

前提として、Playwrightのテストコード自体には問題がなく、ヘッドレスモードでは正常にテスト完了する状態でした。

まず以下のように、Playwrightの設定でヘッドレスモードを無効にします。

playwright.config.ts

  use: {
    headless: false
  }

そしてPlaywrightのテストを実行します。

$ npx playwright test

すると以下のようにエラーが表示されて実行失敗してしまいました。

  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                                                                             ║
    ╚════════════════════════════════════════════════════════════════════════════════════════════════╝

対処法

エラー内容は要約すると「Xサーバが起動していない状態でHeadedブラウザは起動できませんよ」という内容でした。

ですので、Windows側でXサーバを起動したいと思います。

WSLgを有効化することでも解決します

手動でXサーバを起動しなくても、最新のWSLではWSLgというWSL上のGUIアプリをサポートする機能が標準で搭載されていて、これが有効であれば上記のような問題は起きないようです。

WSLgはWindowsとWSLとグラフィックスドライバが最新であれば、勝手に有効となるので実施できる場合は行いましょう。

私の環境の場合、WindowsとWSLは最新のものでしたが、グラフィックスドライバが古いものだったので動かなかったようです。
手動でグラフィックスドライバをアップデートして相性とかの問題で画面が動かなくなるのも怖いので、WSLgの有効化は諦めました。

X Window Systemとは

一旦話が逸れるのですが用語の解説です。

X Window Systemとは、UNIX系OSがディスプレイにGUIを表示するために標準的に利用されているウィンドウシステムです。
クライアント・サーバモデルを採用しており、実際に表示したいディスプレイが繋がっているマシンでXサーバを起動し、GUIアプリを起動している別マシンからXサーバに対してグラフィックスの描画命令をネットワーク経由で送ることができます^[1]。

今回は同一マシン上ですが、Windows側でXサーバを起動し、WSL側がXクライアントとしてXサーバにPlaywrightのブラウザの描画命令を出します。

Windows側でXサーバを起動する

話を戻しまして、対応内容をまとめていきます。

Windows対応のフリーのXサーバソフトウェアとしては、VcXsrvがメジャーなようなのでこれを使います。

まず、VcXsrvのインストーラをダウンロードして、インストールします。
インストーラ配布サイトリンク
VcXsrvを起動します。
表示される画面で以下のように設定します。
- Select display settings：Multiple windows
- Display number：-1
- Select how to start clients： Start no client
- Extra settings：全てチェックを入れる
- 完了を押す
- ファイアウォール設定：接続しているネットワークプロファイルについて許可してください。
WSL上の環境変数を設定します。

以下のコマンドをWSL上で実行することで、環境変数DISPLAYに{WindowsのホストIPアドレス}:0という文字列を設定します。

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

以上の設定をすることでエラーが解消されて、WLS上のPlaywrightの実行ブラウザを画面に表示できるようになりました。

Playwrightのテストサンプルを実行したときに表示されるウィンドウのスクショを添付します。
実行ブラウザにはchromiumを指定しています。

DISPLAY変数に設定するアドレス

余談ですがWindowsのホストIPアドレスの取得は
ip route show | grep -i default | awk '{ print $3}'というコマンドでも行えます。^[2]
:0という部分の番号は、ディスプレイ番号を表しています^[3]。 VcXsrv起動時の設定項目の「Display number」で指定できます。今回はVcXsrv起動時に-1と入力しており、この時は自動で0が割り当てられています。
VcXsrvは多重起動ができるのですが、続けて起動するたびに「Display number=-1」と指定していればディスプレイ番号も順番に0,1,2,...と割り当てられていきます。

さいごに

今回はWSL上のPlaywrightのブラウザを画面に表示しようとした時に起きたエラーの対処として、Xサーバを起動する方法をまとめました。
同様のエラーに遭遇した方がおりましたら参考になれば幸いです。

X Window Systemとは ↩︎
WSL を使用したネットワークアプリケーションへのアクセス ↩︎
アドレスについての説明: Chapter 2 Display Functions ↩︎