Zenn
🦔

DockerのPlaywrightにGoogle Chrome(とEdge)を追加する

2021/06/21に公開
Docker
Node.js
#
TDD
Playwright
#
E2E
tech

aptのsource.listを追加してインストール

------------------- ↓ 前書きはここから ↓-------------------

E2Eテストの取り回しを良くするために、
Dockerを使ってPlaywrightを使えるようして欲しいと依頼された。

(ﾟ_ﾟ)...ワカラン

やってみないとわからんなぁ。
まぁ、公式がDocker用意してそうだしちょっとやってみよう。

ブラウザはchromium, firefox, webkit(safari)の３種類実装されていた。
もう少し言うと

  • playwright-chromium
  • playwright-firefox
  • playwright-webkit

の３種類かな

ここで疑問に思う。

(^_^;) Chromium対応してるアプリある？

大体Webアプリは対応ブラウザに
Chrome, firefox, safari(, Edge, IE)って感じだと思うが、
Chromiumをサポートブラウザにしてるアプリは聞いたことがない。
(ブラウザ対応もコストかかるのよ)
これでテストしても意味がない

(･ω･) Chrome...いれる？

ということでChromeを追加してみる。
ついでにEdgeも追加しよ。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

Playwright公式からDockerfileを作る

DockerFile
FROM mcr.microsoft.com/playwright
User pwuser
WORKDIR /home/pwuser/app

pullでええやんって言われるかもだが、
これから書き足すので。

ビルドしてみると

docker build . -f Dockerfile -t pw:1.0
docker run -it --rm pw:1.0 bash
$ ls /ms-playwright/
chromium-888113  ffmpeg-1005  firefox-1271  webkit-1492

ChromeのインストールをDockerfileに追加

Chromeの(ついでにEdgeも)インストールフローをDockerfileに追加

Dockerfile
FROM mcr.microsoft.com/playwright
# prepare install
RUN apt-get update && apt-get install -y git curl ssh ca-certificates

# === INSTALL Google Chrome ===
RUN curl -fsSL https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list
RUN apt-get update -y \
 && apt-get install -y --no-install-recommends google-chrome-stable xvfb fonts-vlgothic

# === INSTALL Edge ===
RUN curl -fsSL https://packages.microsoft.com/keys/microsoft.asc | apt-key add -
RUN echo "deb [arch=amd64] https://packages.microsoft.com/repos/edge stable main" > /etc/apt/sources.list.d/microsoft-edge-beta.list
RUN apt-get update -y \
 && apt-get install -y --no-install-recommends microsoft-edge-beta

USER pwuser
WORKDIR /home/pwuser/app

ビルドしてみると

docker build . -f Dockerfile -t pw:1.0
docker run -it --rm pw:1.0 bash
$ which google-chrome
/usr/bin/google-chrome
$ which microsoft-edge-beta
/usr/bin/microsoft-edge-beta

(･∀･) インストールでけたっぽい

------------------- ↓ 後書きはここから ↓-------------------

headlessモード起動時にエラーが出る

画面自体を描画する必要はないので、
headlessモードで起動する訳だけど、
なんかエラーが出た。

$ google-chrome --headless --screenshot http://yahoo.co.jp
Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Operation not permitted
Trace/breakpoint trap

よくわからんけど、
セキュリティ上の話っぽいが、
別に一般公開する代物ではないのでカットして良いかな。

TravisCIのページに情報があった
https://docs.travis-ci.com/user/chrome#sandboxing

どうやら --no-sandbox フラグをつければ良いらしい

$ google-chrome --headless --no-sandbox --screenshot http://yahoo.co.jp
[0620/001815.860655:ERROR:bus.cc(393)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
[0620/001815.863611:WARNING:headless_browser_main_parts.cc(106)] Cannot create Pref Service with no user data dir.
[0620/001815.884483:WARNING:vaapi_wrapper.cc(588)] VAAPI video acceleration not available for swiftshader
[0620/001815.884714:ERROR:gpu_init.cc(440)] Passthrough is not supported, GL is swiftshader
[0620/001818.065551:INFO:headless_shell.cc(648)] Written to file screenshot.png.

(･∀･) screenshot.png が生成されてた。
なんかdbusがどうとかでてるけど無視でいいか。

Edgeも同じっぽいな。

Passthrough is not supported

headlessモードじゃなく、
通常モードで起動すると以下のエラーがでた

[35:60:0630/031914.369844:ERROR:gpu_process_host.cc(1002)] GPU process exited unexpectedly: exit_code=4
[291:291:0630/031914.411217:ERROR:gpu_init.cc(446)] Passthrough is not supported, GL is disabled

今度は --disable-gpu オプションを付けるらしい

$ microsoft-edge-beta --no-sandbox --disable-gpu

dbusうんぬん

[35:62:0630/031913.992843:ERROR:bus.cc(393)] Failed to connect to the bus: Failed to connect to socket /var/run/dbus/system_bus_socket: No such file or directory
[35:129:0630/031914.033949:ERROR:bus.cc(393)] Failed to connect to the bus: Could not parse server address: Unknown address type (examples of valid types are "tcp" and on UNIX "unix")
[0630/031914.052647:ERROR:file_io_posix.cc(144)] open /sys/devices/system/cpu/cpu0/cpufreq/scaling_max_freq: No such file or directory (2)
[35:60:0630/031914.057251:ERROR:gpu_process_host.cc(1002)] GPU process exited unexpectedly: exit_code=4

結構うるさいし、
どうにかするか。

Discussion