ヘッドレスブラウザテストとは何か？

ヘッドレスブラウザテストは、可視ウィンドウなしで実際のブラウザを実行し、Webアプリをプログラムで操作して正しく動作することを検証します。

Webアプリを適切にテストするには、実際のブラウザで実行する必要があります。実際のレンダリング、実際のJavaScript、実際のレイアウトです。しかしCIサーバーには画面がありません。ヘッドレスブラウザはこれを解決します。可視UIなしで動作する完全なブラウザエンジンをコードで制御するのです。これがエンドツーエンドテストやコンポーネントテストをサーバー上で実行する仕組みです。

ヘッドレスとは何を意味するか

ヘッドレスブラウザは通常のブラウザ、Chromium、Firefox、WebKitが、画面へのレンダリングなしで動作するものです。それ以外はすべて実物です。DOM、JavaScriptエンジン、ネットワークスタックです。テストコードがそれを操作し、クリック、入力、ナビゲーションを行い、結果を読み取ります。すべてディスプレイなしで行われます。

CIがヘッドレスモードを使う理由

CIのrunnerはグラフィカルディスプレイのないヘッドレスマシンです。ブラウザをヘッドレスで実行することで、完全なブラウザテストをそれらのサーバー上で実行できます。ヘッドレスモードは画面へのレンダリングより高速でもあり、スイートがブラウザを何度も起動する場合に重要です。

簡単な例

テストフレームワークはCIではデフォルトでブラウザをヘッドレスモードで起動し、ページを通して操作します。

Launching a headless browser

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto("https://example.com");

よくある落とし穴

コンテナ内でブラウザが必要とするシステムライブラリの欠如。
ヘッドレスとヘッド付きのレンダリングの違い。
開発者マシンと異なるフォントやロケール。
非同期UIを待つことによるタイミングの不安定さ。

CIにおけるヘッドレスブラウザテスト

これらのテストはpipeline内のE2Eテストやビジュアルテストの基盤ですが、一時的なタイミングのflakeが最も起こりやすく、適切なブラウザ依存関係を備えた一貫した環境を必要とします。高速で分離されたrunnerで並列に実行し、一時的な失敗を自動再試行することで信頼性を保てます。Latchkeyはこれに適した分離されたrunnerと一時的なflakeの再試行を提供します。

重要なポイント

ヘッドレスブラウザは、可視UIなしで動作する実際のブラウザである。
CIがヘッドレスモードを使うのは、runnerにディスプレイがないためである。
これらのテストは強力だが、タイミングによる不安定さが生じやすい。