Dev Container で Chrome 拡張を Playwright でテストする

🐋

Playwright は Chrome 拡張もテスト出来るが、Dev Container で動かす際は CI と同様に install 時に --with-deps が必要。というだけの話ではあるのだが、地味にハマったのでメモに残す。

Chrome extensions

playwright.dev
$ npx playwright install --with-deps chromium

あとは公式にあるように channel: 'chromium' でテスト用のコンテキストを作ればよい。

context = await chromium.launchPersistentContext('', {
  channel: 'chromium',
  args: [
    `--disable-extensions-except=${pathToExtension}`,
    `--load-extension=${pathToExtension}`,
  ],
});

公式を読めば大体解決する話なのだが、 Cline 向けに Chromium を Dev Container に用意していた影響か、Claude Code が最初の動くものとして次のように設定してきて少しハマった。

context = await chromium.launchPersistentContext('', {
  headless: true,
  args: [
    `--disable-extensions-except=${pathToExtension}`,
    `--load-extension=${pathToExtension}`,
  ],
  executablePath: '/usr/bin/chromium'
});

これでも動作はするのだが(公式にも記載はある)、Chrome 拡張でないテストは playwright install chromium で入れたものを使うので Chromium が 2 つ必要になる。これをまとめる方法がよくわからなかったが channel を使うとこれを解決できる、公式をちゃんと読もう。

以下は最小構成のリポジトリ:

GitHub - yaakaito/playwright-chrome-extension

Contribute to yaakaito/playwright-chrome-extension development by creating an account on GitHub.

github.com
yaakai.to
← ホームへ戻る

関連記事