Playwrightの環境構築（VSCode Dev Containers編）

概要

VSCode Dev Containersを利用してPlaywrightの実行環境をコンテナ上に構築する手順を説明します。

Requirements

Docker
VSCode with Dev Containers Extension

X Window Systemのセットアップ

【2024/02/26 追記】
起動したコンテナ内でテストを実行する際 --ui-host オプションに 0.0.0.0 を指定することで、ホストマシン側のブラウザからGUIにアクセスできます。このオプションを使用することで、本記事記載のX Window System関連の設定は不要となります。
詳細は公式ドキュメントを参照してください。

Playwrightをデバッグ起動したりUIモードで起動したりする場合、コンテナ上で起動するGUIをホストOS上に表示する必要があるため、X Window Systemを利用します（Playwrightをコマンドラインのみで利用する場合、本手順は不要です）。。
なお、何も設定をせずにコンテナ上でGUIを起動しようとするとMissing X server or $DISPLAYのようなエラーが発生します。

今回はホストOSとしてMacを利用しているため Xquartz の導入手順を紹介します。
Windowsの方はXmingなどを利用してください。

Xquartzをインストールし、コンテナからのアクセスを許可するため「ネットワーク・クライアントからの接続を許可」します。
下記はコマンドラインから実行していますがGUI上から実施していただいても構いません。

# Install Xquartz
$ brew install --cask xquartz
# Go to Preferences -> Security, and check “Allow connections from network clients”
$ defaults write org.xquartz.X11 nolisten_tcp 0

設定後はXquartzを再起動して設定を反映させます。
その後ローカルホストからのアクセスを許可した状態（xhost +localhost or xhost +）で Xquartzを起動させておけば準備は完了です。

Dev Containersの設定

devcontainer.json を抜粋します。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/debian
{
  "name": "Playwright",
  // 1. コンテナイメージの指定
  "image": "mcr.microsoft.com/playwright:v1.36.1",

  // 2. VSCode拡張機能の設定
  "customizations": {
    "vscode": {
      "extensions": ["ms-playwright.playwright"]
    }
  },

  "mounts": [
    // For node modules.
    {
      "type": "volume",
      "source": "${localWorkspaceFolderBasename}-node_modules",
      "target": "${containerWorkspaceFolder}/node_modules"
    },
    // 3. X Window System関連の設定
    {
      "type": "bind",
      "source": "/tmp/.X11-unix",
      "target": "/tmp/.X11-unix"
    }
  ],
  "containerEnv": {
    // 3. X Window System関連の設定
    "DISPLAY": "host.docker.internal:0.0"
  }
}

1. コンテナイメージの指定

Playwright公式のDocker Imageを利用するのが良いでしょう。
Dockerfileを見ると playwright-core install --with-deps でブラウザ含め必要な依存関係をインストールしてくれています。

利用可能なタグはこちらから確認できます。

2. VSCode拡張機能の設定

最低限 Playwright Test for VSCodeは導入しておくと良いでしょう。

3. X Window System関連の設定

/tmp/.X11-unixをホスト側とコンテナ側で共有することにより、ドメインソケットを共有します。

"mounts": [
  // For X Window System.
  {
    "type": "bind",
    "source": "/tmp/.X11-unix",
    "target": "/tmp/.X11-unix"
  }
]

ホストOSのディスプレイを利用するため DISPLAY 環境変数を指定します。

"containerEnv": {
  // For X Window System.
  "DISPLAY": "host.docker.internal:0.0"
}

GUI起動確認

コンテナ上でGUIを起動すると、ホストOS側で表示されることが確認できました。

npx playwright test --ui

次は木戸さんのイチ押し。Playwrightの快適機能です。