テスト高速化の味方「ヘッドレスブラウザ」の長所と短所を整理する：「デバッグは独特の方法になる」など

Imperfect Foodsのマシュー・グラスバーガー氏はTechTargetにて「ヘッドレスブラウザ」の特徴について紹介する記事を公開した。ヘッドレスブラウザはWebのテストを効率化できるが、従来のブラウザにはあった視覚的なデバッグ機能がないため、注意が必要だ。

[Matthew Grasberger，TechTarget] PC用表示関連情報

LINE

Hatena

　Imperfect Foodsのマシュー・グラスバーガー氏は2023年10月30日（米国時間）、TechTargetで「ヘッドレスブラウザ」の特徴について紹介する記事を公開した。

ヘッドレスブラウザテストの利点と制限（提供：TechTarget）

　ヘッドレスブラウザはGUI（Graphical User Interface）を持たないブラウザのことで、Webブラウザのテストを高速化し、テストを実行しているハードウェアの効率を高めることができる。ただし、注意点もある。

　ヘッドレスブラウザは主にWebのUIテストで利用される。Webブラウザを完全に読み込まなくてもテストができるツールを使っており、それらは通常のWebブラウザと同じ方法でリクエストを送信し、同じように「HTML」「CSS」「JavaScriptファイル（コンテンツ）」を受信する。

　ヘッドレスブラウザは登場当初に比べて設計が進歩しており、従来のブラウザと比較してもWebページのレンタリング方法の違いは少なくなっている。大きな違いは、受信したファイルをGUIでレンダリングしないことだ。ヘッドレスブラウザはレンダリングする代わりにWebページの内部モデルを構築し、テストがWebページ上のオブジェクトとやりとりできるようにする。これは通常のWebブラウザと同じ方法になっており、GUIのオーバーヘッドを追加する必要はない。

ヘッドレスブラウザテストのメリット

　ヘッドレスブラウザテストには、次のようなメリットがある。

高速なテスト実行

　従来のブラウザではなく、ヘッドレスブラウザを選ぶ最も大きな理由は、ヘッドレスブラウザの方がテストの実行にかかる時間が短いことだ。UI要素をグラフィカルにレンダリングしないため、自動化されたUIテストを高速に実行できる。

ハードウェアの効率向上

　ヘッドレスブラウザはUI要素をレンダリングしないため、従来のブラウザよりも効率的に動作し、テストの実行に使用するハードウェアの効率を向上させられる。また同じ理由から、ハードウェアにかかる1テスト当たりの負荷が低くなる。そのため、並行して実行できるテストの数が大幅に増えることがある。並行して大量のテストを実行できるので、テストにかかる全体の時間削減にもつながる。

CI/CDパイプラインでの実行が簡単なテスト

　ヘッドレスブラウザでテストを実行するもう1つの利点は、CI/CD（継続的インティグレーション／継続的デリバリー）パイプラインでテストを実行しやすいことだ。CI/CDパイプラインはリモートマシン上で実行されるため、従来のブラウザを起動できないことがある。既にヘッドレステストをローカルで実行しているなら、リモートマシンにテスト環境を移行するのもスムーズだ。

ヘッドレスブラウザテストのデメリット

　メリットもあれば当然デメリットもある。

予測できない動作をブラウザがする（かもしれない）

　UI要素をレンダリングしないことで得られるメリットのトレードオフとして、「ヘッドレスブラウザが従来のWebブラウザと同じように動作するとは限らない」というものがある。従来のWebブラウザ同士で比較したときにもWebページの動作はそれぞれ異なるが、この動作の違いは、WebページのUI要素をレンダリングする方法の微妙な違いから発生する。もちろん、Webブラウザがコンテンツをレンタリングする方法には大まかな基準はある。ただ、例えば「Microsoft Word」で保存した文書を「Googleドキュメント」で開くと少し外観が変わるように、予期せぬ小さな違いが生じる可能性がある。

視覚的なテストには不向き

　ヘッドレスブラウザは、アプリケーションの視覚的な要素に焦点を当てたテストにはあまり適していない。ただ、ヘッドレスブラウザは進化を続けている。例えば「Google Chrome」のヘッドレスブラウザは2023年のアップデートでヘッドレスモードとヘッドフルモードのコードパスが統合された。2つのモードの違いは、ヘッドレスモードではGoogle Chromeがブラウザウィンドウを作成するが表示しないということだけだ。テスターはこれらの違いを自分で検証する必要があるが、ヘッドレスブラウザ機能にとっては大きな前進といえる。

デバッグは難しい

　従来のブラウザで実行されるほとんどのテストでは、テストが失敗したときにスクリーンショットを表示するので、障害発生時のアプリケーションの視覚的な状態を観察しやすくなる。ヘッドレスブラウザはスクリーンショット機能がないため、どのセレクタが見つからなかったかを示すエラーメッセージに目を通す必要がある。ただ、全体像が分からなければ何が失敗の原因なのかを理解するのは難しい。この場合、ヘッドレスブラウザに組み込まれている機能を利用してページのHTMLソースを印刷することで、アプリケーションの状態を理解できる。