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

概要

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

Requirements

Docker
VSCode with Dev Containers Extension

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をさせておけば準備は完了です。

コンテナ構成

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",
  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
  "image": "mcr.microsoft.com/playwright:v1.36.1",

  // Configure tool-specific properties.
  "customizations": {
    "vscode": {
      "extensions": ["ms-playwright.playwright"]
    }
  },

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

Container Image

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

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

VSCode Extension

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

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の快適機能です。