Playwright で video が再生されない問題

開発

Chromium ではコーデック不足で video が再生されないため、Chrome を使う方法を紹介します。

目次

Chromium で video が再生されなかったのでメモ。

結論

設定を以下のようにすれば良い。ただし Chromium の代わりに Chrome が必要。

playwright.config.js
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "Google Chrome",
      use: {
        ...devices["Desktop Chrome"],
        channel: "chrome",  // <- ここ
      },
    },
  ],
});

または実行するファイル内で:

sample.test.js
import { chromium } from "playwright";

const browser = await chromium.launch({
  channel: "chrome",  // <- ここ
});

原因

Chrome にはあるコーデックが Chromium には含まれていないらしい。

github.com[Question] Video not being loaded, therefore it can't be played · Issue #4585 · microsoft/playwrightContext: Playwright Version: 1.6.2 Operating System: Mac Node.js version: v13.13.0 Browser: Chromium npx: installed 1 in 3.219s System: OS: macOS 11.0.1 Memory: 1.09 GB / 16.00 GB Binaries: Node: 1...https://github.com/microsoft/playwright/issues/4585#issuecomment-744537078

CI ではテスト実行前に Chrome をインストールしておく必要がある。