テストは重要です。サイト全体、アプリケーション全体、または新機能など、作成したコンテンツをユーザーに提供する前に、想定どおりに動作することを確認することが重要です。ただし、多くのテストは依然として手動で行われており、同僚やテストエンジニアに新しい機能をチェックし、問題を報告するよう依頼されています。
この手動テストでは特定のクラスの問題を検出できますが、多くの問題を見逃す可能性があります。テスト担当者はエッジケースを見逃したり、アプリの特定の操作を完全にテストできなかったりする可能性があります。また、コードを記述したときに得たすべての情報を持っているわけではなく、コードに含めて防止した特定の問題を把握していない可能性があります。時間が経過して新しい機能が追加されたとき、変更によって機能が損なわれないように、以前に動作していたものをすべて再テストするのでしょうか？
そのため、Chrome チームは自動テストの重要性を認識しています。機能の破損を信頼性と反復性を持ってテストするテストスイートを使用すると、現在と今後の開発の両方で、細部までテストされていることを確認できます。機能のデベロッパーとしての知識がテストにカプセル化されます。
ただし、自動テストは難しい場合があることも認識しています。そのため、Chrome チームは、できるだけスムーズに移行できるように、次のツールとガイダンスを提供しています。
操り人形師
Puppeteer は Node.js ライブラリです。使いやすいハイレベル API を使用して、Chrome、Chromium、Firefox を自動化できます。
この API は元々 Chrome DevTools プロトコルに基づいていましたが、年末までに新しい高度な WebDriver BiDi プロトコルを Puppeteer の基盤にすることを目標としています。WebDriver BiDi は、すべての主要ブラウザ ベンダーが共同で作成したものです。多くの自動化ユースケースを簡素化し、多くの新しいユースケースを可能にします。また、クロスブラウザに対応しています。
ただし、待つ必要はありません。Puppeteer の API では、すでに多くの自動化ユースケースが実現されていますが、WebDriver BiDi によってさらに改善されます。テストからビジュアル クロール、プロセスの自動化まで、ページ操作、リクエストのインターセプト、スクリーンショットなどの機能でさまざまなことができます。WebGPU と WebGL を使用して、クラウドでウェブ AI モデルをテストすることもできます。
Puppeteer は、本格的なブラウザ テスト フレームワークである WebdriverIO や、プライバシー サンドボックス分析ツールなどのツールでも使用されており、サイトでの Cookie とユーザーデータの使用状況をより詳しく把握できます。
Chrome ヘッドレス
Puppeteer を使用して Chrome を自動化したことがあれば、テストの実行時にブラウザ ウィンドウが表示されないことに気づいたことがあるかもしれません。デフォルトでは、Puppeteer は Chrome をヘッドレス モードで起動します。つまり、自動化の実行中は実際のブラウザ ウィンドウは存在しません。
しかし、Chrome のヘッドレス モードは、ウィンドウのない Chrome ではなく、実際には完全に別々にメンテナンスされている Chrome のバージョンであることはご存じでしょうか。長い間、このことが原因で混乱が生じ、バグや問題の追跡が困難になっていました。
Chrome 112 より、新しいヘッドレス モードが導入されました。これは、通常の Chrome と同じコードベースに基づいています。これにより、以前の混乱が軽減されるだけでなく、自動化中に拡張機能を使用するなど、これまで不可能だった機能も利用できるようになります。
Puppeteer では、バージョン 22 以降、この新しいヘッドレス モードがデフォルトで使用されています。他の自動化ソリューションを使用して Chrome Headless を使用している場合は、--headless=new コマンドライン スイッチを使用して新しいヘッドレス モードを強制的に有効にできます。
Chrome の新しいヘッドレス モードはより強力ですが、古いヘッドレス モードほど軽量ではありません。リソースが非常に制限されている場合や、Chrome のすべての機能が不要な場合は、古いヘッドレス モードを chrome-headless-shell として使用できます。
Chrome for Testing
テストでは、テスト環境（オペレーティング システム、ブラウザ、ブラウザ バージョン）をきめ細かく制御する必要があります。Chrome の自動更新では、この作業は困難です。
そのため、Google は Chrome for Testing を作成しました。これは、自動更新のないバージョンの Chrome で、すべてのバージョンの Chrome とともに、すべての主要なオペレーティング システム向けにリリースされ、バージョン アーカイブからアクセスできます。これにより、特別な操作を行うことなく、特定のバージョンの Chrome に対して自動化ワークフローを実行できます。
Chrome for Testing バイナリには、Chrome for Testing の可用性ダッシュボード、JSON API、または Puppeteer コマンドライン ユーティリティからアクセスできます。
Puppeteer、Chrome の更新されたヘッドレス モード、Chrome for Testing は、ブラウザの自動化とテストの実行を可能な限りスムーズに行うために、Google チームが現在取り組んでいる作業の一部にすぎません。また、DevTools Recorder などの関連ツールは、テストの作成をサポートします。Chrome でユーザーフローを記録し、Puppeteer で再生します。
web.dev でテストについて学ぶ
この記事で説明するツールは、自動テストの改善に役立ちます。ただし、これから始める場合、理解し、学ぶことがたくさんあるように思えるかもしれません。そこで、10 モジュールの新しいコース「Learn Testing on web.dev」を作成しました。この詳細なコースでは、テストのコアコンセプト、テストの実行場所と方法、テストの種類、実際にテストする内容について説明します。テストの開始点として最適です。基本を理解したら、テスト自動化コレクションに進んでください。テストに関する具体的な質問について、詳細な説明と実用的なヒントが記載されています。