最近、私の中でMicrosoft製のE2EツールのPlaywright(Star数25.6K)がアツイです。

今回、PlaywrightをCI環境で使いたかったため、実行環境をDockerで準備する手順を残します。また、CIでE2Eのシナリオを実行できるようにします。

環境

Python
- 3.8.6
Playwright-Python
- 1.12.1
GitHub Codespaces
- 2021/07/10時点

ゴール

Playwrightの実行環境をDockerで用意する
Pythonで作成したシナリオをCIで実行する

書かないこと

Playwrightについて
既存E2Eツールとの比較

手順

Dockerfileを準備する

WebDriver等が入っているDockerイメージをMicrosoftから提供されているので利用します。しかし、Playwright自体にはパスは通っていません。

ですので、Dockerfile内で自分で使用したい言語のPlaywrightをインストールする必要があります。今回は、Pythonで書かれたシナリオを動かしたいため、pip install playwrightを実行します。

FROM mcr.microsoft.com/playwright:focal
RUN pip install playwright

シナリオを準備する

動かしたいシナリオを準備します。次に記載しているシナリオは公式のサンプルをそのまま使用しています。現時点では動いていますが、最新版はどうなるか分からないため、公式を確認してください。

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        for browser_type in [p.chromium, p.firefox, p.webkit]:
            browser = await browser_type.launch()
            page = await browser.new_page()
            await page.goto('http://whatsmyuseragent.org/')
            await page.screenshot(path=f'example-{browser_type.name}.png')
            await browser.close()

asyncio.run(main())

docker-compose.ymlを準備する

Dockerfileを指定する

今回は、docker-compose up -dの実行と共にDockerfileのビルドを行いたいため、buildを使用します。docker-compose.ymlとDockerfileを同一のディレクトリに配備するので、カレントディレクトリをcontextに渡します。

services:
  playwright:
    build: 
      context: ./

シナリオをマウントする

シナリオをDockerに渡したいため、volumesで適当な場所にマウントします。また、シナリオの実行結果を受け取れるようにしておきます。

今回は、ローカルのscenarioディレクトリをDockerの/var/scenarioにマウントさせます。

services:
  playwright:
    volumes:
        - ./scenario:/var/scenario

シナリオを起動時に実行する

docker-compose.ymlのentrypointを指定すると、docker-compose up -dで実行した時に起動します。

先ほど、シナリオを/var/scenarioにマウントさせたので、ディレクトリを移動しつつ、シナリオをpython sample.pyで起動します。

services:
  playwright:
    entrypoint: >
      sh -c "
        cd /var/scenario &&
        python sample.py
      "

全てまとめる

全てまとめるとこのファイルになります。versionは好きなものを指定してください。

version: '3.8'
services:
  playwright:
    build: 
      context: ./
    volumes:
        - ./scenario:/var/scenario
    entrypoint: >
      sh -c "
        cd /var/scenario &&
        python sample.py
      "

CI環境で実行する

docker-compose up -dをしたタイミングでシナリオを起動するようにしました。

ですので、CI環境では次のコマンドを実行すれば、期待通りに実行できます。

docker-compose down
docker-compose up -d
docker-compose down

備考

起動エラーになった時のログを確認したい

docker-compose logsでログを確認することができます。

docker-compose logs

コンテナ内部でシナリオを確認したい

次のコマンドで新規にイメージを作成しながらコンテナにログインできますので、期待通りに動作していないというときは、コンテナ内で処理を確認してください。

docker-compose run playwright bash

シナリオ作成には向かない

あくまで実行環境でしかありません。

このイメージにはGUI機能等は入っていませんので、ヘッドレスモード以外での起動はできません。また、ブラウザ操作を自動でコードにしてくれるplaywright codegenもありますが、そのブラウザ自体を表示できませんので、エラーとなります。

playwright    | [pid=121][err] [121:121:0710/141616.811572:ERROR:browser_main_loop.cc(1412)] Unable to open X display.

.DevContainerのように使いたかったのですが、難しそうです。

ソースコード

https://github.com/hirotoKirimaru/playwright-practice/blob/bcfbfdcdc0515f49827da4da69f9a07e663332d1/.DevContainer/docker-compose.yml

終わりに

同じく優秀なE2EツールとしてはGoogle製のPuppetter(Star数71.9K)もあります。Playwrightの方が後続のツールということで、Star数に関しては追いついていませんが、後続だけあってPuppetterよりも簡単に書けるようです。

あと、このDockerからProxyを突破できるか気になりますね…。職場ではまだ導入していないので、そういう知識もブログ等に起こしておきたいと思います。

この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。

f:id:nainaistar:20210710232420p:plain

きり丸の技術日記

技術検証したり、資格等をここに残していきます。

Pythonで記述されたPlaywrightの実行環境をDockerで用意する

環境

ゴール