M1 MacのDocker環境でPlaywrightを動かそうとしたら「not supported on Linux Arm」と言われる

背景

以下のDockerfileを定義して、PlaywrightでE2Eテストを実施しようとした。
この時、チームでIntelのMacでは正常に動くがM1のMacでは動かないという問題が発生した。

FROM mcr.microsoft.com/playwright:v1.34.0-jammy

WORKDIR /work

COPY package.json package-lock.json ./

RUN npm ci
RUN npx playwright install chrome

エラー内容

$ docker compose run --rm e2e_test bash

(略)

 => ERROR [admin_e2e_test 5/5] RUN npx playwright install chrome                                                                                                                               0.8s
------
 > [admin_e2e_test 5/5] RUN npx playwright install chrome:
#0 0.707 ++ arch
#0 0.707 + [[ aarch64 == \a\a\r\c\h\6\4 ]]
#0 0.708 + echo 'ERROR: not supported on Linux Arm64'
#0 0.708 + exit 1
#0 0.708 ERROR: not supported on Linux Arm64
#0 0.710 Failed to install browsers
#0 0.710 Error: Failed to install chrome
------
failed to solve: process "/bin/sh -c npx playwright install chrome" did not complete successfully: exit code: 1

解決方法

Dockerfileを以下のように変更する。

FROM mcr.microsoft.com/playwright:v1.34.0-jammy

WORKDIR /work

COPY package.json package-lock.json ./

RUN npm ci

+ RUN npx playwright install chromium
- RUN npx playwright install chrome

上記変更だけでも動くことは動くが、公式ドキュメントに従いplaywright.config.tsも以下のように修正しておく。

// playwright.config.ts

export default defineConfig({  
  /* Configure projects for major browsers */


      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],

  projects: [
    {
+     name: 'chromium',
+     use: { ...devices['Desktop Chrome'] },
-     name: 'Google Chrome',
-     use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],