かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

M1とdockerでPlaywrightを動かす

4 時間前

1 分前

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 firefox

Unable 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 test

Dockerで動かす場合の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を使うのは諦めて、 ローカル環境で行うようにしてもよいかもしれません。

関連する記事

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

{}
{}
{}

よくみられてる記事