Playwrightで、Chromeの新しいヘッドレスモードを設定する

はじめに

Playwrightでブラウザのチャンネル（Chromeなど）を使用する場合、新しいヘッドレスモードの指定が必要になることがあります。

本記事では、Chrome向けの設定方法のみを解説します。

新しいヘッドレスモード

Chrome112から、新しいヘッドレスモードが利用可能です。
https://developer.chrome.com/blog/chrome-headless-shell
古いヘッドレスモードは、削除予定だそうです。
https://developer.chrome.com/docs/chromium/headless

Playwrightと新しいヘッドレスモード

Playwrightと新しいヘッドレスモードについては、下記のGithubのissueに詳しく記載してあります。

Chromium switches to new headless implementation.
Users of channels chrome, msedge and similar are affected and will have to update the test suite.
No action needed if you are not using browser channels.
Playwright runs a separate chromium headless shell build for headless operation.

https://github.com/microsoft/playwright/issues/33566

playwright.config.tsで設定する

launchOptionsで、Chrome起動時の設定を行います。

• launchOptions
  https://playwright.dev/docs/api/class-testoptions#test-options-launch-options
• launchOptionsの設定オプション
  https://playwright.dev/docs/api/class-browsertype#browser-type-launch
• ブラウザ起動時の引数（args）
  https://peter.sh/experiments/chromium-command-line-switches/
• 新しいヘッドレスモードの引数(--headless=new)
  https://developer.chrome.com/blog/chrome-headless-shell

Use custom browser args at your own risk, as some of them may break Playwright functionality.

launchOptionsのドキュメントにあるように、argsの使用は自己責任です。

Chromeで新しいヘッドレスモードを有効にするには、以下のように設定します。

playwright.config.ts

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

export default defineConfig({
  projects: [
    {
      name: "Google Chrome",
      use: {
        ...devices["Desktop Chrome"],
        channel: "chrome",
        //新しいヘッドレスモードを有効化
        launchOptions: {
          args: ["--headless=new"],
        },
      },
    },
  ],
})

まとめ

以上、PlaywrightでChromeの新しいヘッドレスモードを設定する方法について解説しました。