M1とdockerでPlaywrightを動かす
目次
M1だとLinuxで動くブラウザと相性が悪いらしく、M1とdockerを使う際に注意が必要のようです。 実際に試したのでメモとして残しておきます。
下記を参考にしてDcokerとdocker-composeを作りました。
Playwright on Dockerをセットアップする(2022)
ただしこのままですと、M1 Macで動きませんでした。
Dockerfileを下記に変更する用意する
FROM ubuntu:bionic
WORKDIR /home/pwuser/app/
COPY ./package.json /home/pwuser/app/
# Install node17
RUN apt-get update && apt-get install -y curl && \
curl -sL https://deb.nodesource.com/setup_17.x | bash - && \
apt-get install -y nodejs
# Install
RUN apt update && apt install -y chromium-browser fonts-takao
RUN npm init -y\
&& PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm i -D playwright @playwright/test dotenv念の為e2eテストで使いそうな日本語のフォントをインストールしておきます。fonts-takao
M1 MacでPlaywrightをDockerで動かす - Qiita 上記参考にさせていただきました。
ただ自分の環境ですと下記のエラーが出てしまいました。
「Error: ERROR: Playwright does not support firefox」の対策
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1をつけないとブラウザをダウンロードしようとして下記のようなエラーが出てしまうため気をつけましょう。
Error: ERROR: Playwright does not support firefoxUnable to compile on bionic ARM64 · Issue #6587 · vercel/hyper
「npm ERR! Tracker "idealTree" already exists」の対策
npm ERR! Tracker "idealTree" already exists下記を入れることで対応しました。
WORKDIR /home/pwuser/app/
COPY ./package.json /home/pwuser/app//.npm/_logs周りの権限エラー
Log files were not written due to an error writing to the directory: /.npm/_logs npm ERR! You can rerun the command with `--loglevel=verbose` to see the logs in your terminalエラーをメモしてなかったのですが、バージョン16系のエラーのようだったので17に上げることでエラーが改善されました。
https://deb.nodesource.com/setup_17.x【Vue.js 2.9】DockerでVue.jsをインストールしたらエラー発生 | オスースBlog
パスはdocker-compose側の設定と合わせました。
docker-compose.ymlを用意する
version: "3"
services:
pw:
container_name: pw
image: pw:1.0
build:
context: .
dockerfile: ./Dockerfile
# tty: true
user: 1000:1000
dns:
- 1.1.1.1
- 8.8.8.8
extra_hosts:
- "host.docker.internal:host-gateway"
volumes:
- ./:/home/pwuser/app/
working_dir: /home/pwuser/app
entrypoint: npx playwright testDockerで動かす場合のtest側の実装
executablePath を使ってchromiumのパスを指定してあげます。
下記参考
M1 MacでPlaywrightをDockerで動かす - Qiita
import { chromium } from "playwright";
chromium
.launch({
executablePath: "/usr/bin/chromium-browser",
})
.then((browser) => { /* Code Here */ })Dockerコンテナ内からホストのポートにアクセスする
今回少し特殊なケースがですが、Dockerから自分の環境に立てたアプリを見る必要があったので docker-compose.ymlに下記を追加しました。
extra_hosts:
- "host.docker.internal:host-gateway"Docker コンテナ内からホストのポートにアクセスする方法まとめ | gotohayato.com
こうすることで実際のテストコードから下記のような形で自分の環境にアクセスすることができます。
http://host.docker.internal:3000/動画が撮れない問題
動画を撮ろうとした場合に下記のようなエラーが出てしまいました。
browserContext.newPage: Executable doesn't exist at /.cache/ms-playwright/ffmpeg-1008/ffmpeg-linuxエラーの原因特定がなかなか難しいのですが、 chromium-browserを通してのffmpegでの録画がうまくいっていないようです。
似たようなエラーとして下記が引っかかったので残しておきます。 [BUG] ffmpeg-linux executable doesn't exist · Issue #15265 · microsoft/playwright
参考
contextを作るとPlaywrightTestConfigで設定したvideoの値が効かなくなる
m1関係ないですがcontextを自前で作った時にPlaywrightTestConfigのvideo設定が効かなくなるので注意のようです。
use: {
video: 'off',
},[Question] - is PlaywrightTestConfig -> use -> video -> <videoMode> working? · Issue #13107 · microsoft/playwright
ただcontextを作った場合にvideoのモードをon-first-retryにする方法が調べられませんでした。。
contextでビデオを下記を設定していた場合configの設定を無視してとりあえず動画が撮られてしまう状態になっている気がします。
{ recordVideo: { dir: 'videos/' } }https://playwright.dev/docs/videos
contextを作った場合にエラー処理を入れないと動画が取られない
contextとbrowserをcloseしないとエラーになった時に動画がキャプチャされないようです。
test('テスト', async () => {
const [ browser, context, page ] = await utils.settingBrowser()
try{
await context.close()
await browser.close()
} catch (e) {
await context.close()
await browser.close()
}
})他のe2eテスト周りの比較については下記より
ブラウザ拡張のE2Eテストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
Cypressも同様にM1 Macで動かない
現状ガッツリと調べたわけではないのですが、 調べてみたところによるとDockerを立てて起動しようとすると手間がかかるようです。 https://scrapbox.io/miyamonz/M1_Macでcypressのdocker動かん
まとめ
dockerを経由せずであれば問題はなさそうでしたが、 M1 Macでのdockerを経由してのブラウザがあまり出揃ってない印象でした。 e2e + docker + M1 Macでやる場合には少し癖があるようです。
上の環境の場合はdockerを使うのは諦めて、 ローカル環境で行うようにしてもよいかもしれません。
