Blog

最近、Playwrightを使ってブラウザの操作を自動化しています。このPlaywrightの開発環境をWSL2 + Docker環境で構築することができると便利かなと思うのですが日本語の記事が見つかりませんでした。

なので、自分の構築した環境を下記にまとめました。

こちらの記事を参考にしています。（というか、記事の一部を日本語にしただけ。。。）

Running Playwright inside Docker containers

Learn how to run Playwright in headed mode to interact with the browser’s user interface from outside Docker containers.

https://www.oddbird.net

1. WSL2 + Docker上にPlaywrightのコンテナを作成
2. Chromeを操作してコードの作成

WSL2 + Docker上にPlaywrightのコンテナを作成しChromeを操作してコードを作成することができました。

WSL2とDockerはすでにインストールされていることを前提にしています。私の環境はこのような感じになっています。

WSLに適当なディレクトリを作成し下記の３つのファイルを作成します。

• Dockerfile
• requirements.txt
• docker-compose.yml

下のDockerfileを用意します。python用Playwrightの公式のDockerイメージをベースにPlaywrightと必要なパッケージをインストールします。

※Nodejsの最新バージョンだとPlaywrightのインストールでエラーになりましたのでバージョン18を指定しています。

FROM mcr.microsoft.com/playwright/python:v1.39.0-jammy

WORKDIR /root

# install Node.js and npm
RUN curl -sL https://deb.nodesource.com/setup_18.x | bash -
RUN apt-get update \
    && apt-get install -y nodejs \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

# install playwright
RUN npm install playwright@1.39.0 && ./node_modules/.bin/playwright install

# pip install
COPY requirements.txt .
RUN pip install -U pip && \
    pip install -r requirements.txt

pipでインストールするパッケージは下記の通りです。

playwright==1.39.0
pytest==7.4.3

下のdocker-compose.ymlを用意します。ここでコンテナ内のDisplayの環境変数の設定、tmpファイルを共有します。

version: "3"
services:
  test_playwright:
    build:
      context: .
    container_name: test_playwright
    volumes:
      - ${PWD}/../:/working
      - /tmp/.X11-unix:/tmp/.X11-unix
    working_dir: /working
    environment:
      PYTHONPATH: /working
      TZ: Asia/Tokyo
      DISPLAY: :0
    tty: true
    restart: always

※ WSLの /mnt/wslg/ にLinuxのファイルシステムがあるか確認してください。

$ ls -a -w 1 /mnt/wslg
.
..
.X11-unix
PulseAudioRDPSink
PulseAudioRDPSource
PulseServer
distro
doc
dumps
pulseaudio.log
runtime-dir
stderr.log
versions.txt
weston.log
wlog.log

上記のコマンドで No such file or directory となった場合はWSLのバージョンが古い可能性があります。

その場合はWSLのアップデートが必要ですのでパワーシェルで下記のコマンドを実行します。（私はWSLが古かったのでアップデートが必要でした。）

PS > wsl --update
PS > wsl --shutdown

ファイルが準備できたら、WSL上で下記のコマンドでコンテナをビルドします。するとtest_playwrightという名前のコンテナが作成されます。

$ docker compose up -d --build
$ docker ps
CONTAINER ID   IMAGE                                 COMMAND       CREATED         STATUS       PORTS     NAMES
842ff6e038c9   docker-test_playwright                "/bin/bash"   35 hours ago    Up 2 hours             test_playwright

test_playwrightコンテナの中でplaywrightを起動すると、ChromeとPlaywright Inspectorが起動します。

$ docker exec -it test_playwright npx playwright open google.co.jp

Playwright InspectorのRecordボタンを押すとChromeで操作した内容がPlaywright Inspector内にコードで出力されます。

今まではSeleniumを使ってブラウザの操作を自動化していたのですが、コンテナが複数作成されたりコンテナ間のネットワークの設定が面倒でした。一方、Playwrightはコンテナが１つで簡単に開発環境を構築できますし、コードを自動で作成してくれるのが非常に便利だと思いました。