ヘッドレスブラウザ

ヘッドレスブラウザは、通常のブラウザとまったく同じようにページを読み込み、JavaScript を実行し、DOM を構築し、ネットワークリクエストを処理しますが、画面には何も描画しません。テストは、ヘッドあり（ヘッドフル）のブラウザと同じ自動化プロトコルでこれを操作します。ディスプレイサーバーを必要としないため、CI のコンテナやビルドエージェントで UI テストを実行する標準的な方法になっています。

具体例

Playwright はデフォルトでヘッドレスで実行されます。デバッグ時には、ウィンドウを表示するよう指定します。

npx playwright test            # headless
npx playwright test --headed   # show the browser
npx playwright test --ui       # interactive UI mode

Selenium 4 では、ブラウザのオプションでヘッドレスモードを指定します。

ChromeOptions options = new ChromeOptions();
options.addArguments("--headless=new");
WebDriver driver = new ChromeDriver(options);

FirefoxOptions options = new FirefoxOptions();
options.addArguments("-headless");
WebDriver driver = new FirefoxDriver(options);

なぜ重要なのか

• どこでも動く。 ビルドエージェントや Docker コンテナには通常ディスプレイがないため、ヘッドありで実行するには仮想フレームバッファが必要になります。
• リソース消費が少ない。 ヘッドありのブラウザより軽いので、同じマシンでより多くのワーカーを並列に動かせます。
• 本物のブラウザである。 最新のヘッドレス Chrome と Firefox はヘッドあり版と同じレンダリングエンジンを使っているため、ヘッドレスで書いたテストは一般にヘッドありでも同じように動きます。

よくある落とし穴

• ビューポートの違い。 ヘッドレスブラウザは、デスクトップのブラウザとは異なるデフォルトのウィンドウサイズで起動することがあります。レスポンシブレイアウトが一貫して動くよう、ビューポートを明示的に設定します。
• 「ヘッドありでは動くが、ヘッドレスでは失敗する」。 これは通常ヘッドレスモード自体ではなくタイミングの問題です。ヘッドレス実行の方が速い、または遅いために、待機の不足が露呈しています。CI をヘッドありに切り替えるのではなく、失敗時にトレースやスクリーンショットを取得します。
• 見えないままデバッグする。 失敗したテストのスクリーンショット、動画、トレースを有効にして、ヘッドレスブラウザが何を見ていたかを確認できるようにします。
• ヘッドレスを「ブラウザではないもの」と混同する。 JavaScript を実行せず HTML を取得するだけのツールはヘッドレスブラウザではなく、最新のシングルページアプリケーションをテストすることはできません。