テストは重要です。これは、サイト全体、アプリケーション、新機能など、ビルドしたものをユーザーに配信する前に、想定どおりに動作するかどうかを確認する重要なステップです。しかし、多くのテストは依然として手動で行われており、同僚やテスト エンジニアが新機能を確認して問題を報告するよう依頼しています。
この手動テストでは、特定のクラスの問題が表示される場合がありますが、見落とされるケースが多くあります。テストを行う人が、エッジケースを見逃したり、アプリを使用する特定のジャーニーのテストに完全に失敗したりする可能性があります。また、コードを作成したときに入手したすべての情報がなく、回避するためにコードに含めた特定の問題についても把握していません。また、時間が経過し、新機能が追加されるにつれて、以前動作していた機能をすべて遡ってテストし、変更によって機能が損なわれていないことを確認します。
そのため 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 とユーザーデータの使用状況を詳しく把握できます。
クロムヘッドレス
Puppeteer を使用して Chrome を自動化したことがある場合は、テストの実行中にブラウザ ウィンドウが表示されないことに気付いたかもしれません。デフォルトでは、Puppeteer は Chrome をヘッドレス モードで起動します。つまり、自動化の実行中に実際のブラウザ ウィンドウは表示されません。
しかし、Chrome のヘッドレス モードが単なる Chrome のウィンドウ表示ではなく、完全に独立して管理されているバージョンであることをご存じですか？長い間、この状況は混乱につながり、バグや問題の追跡が困難でした。
Chrome 112 以降、新しいヘッドレス モードが導入され、通常の Chrome と同じコードベースがベースになりました。これにより、これまでの混乱を軽減できるだけでなく、自動化中に拡張機能を使用するなど、これまで不可能だった機能も利用できるようになります。
Puppeteer は、この新しいヘッドレス モードをバージョン 22 からデフォルトとして使用しています。他の自動化ソリューションで Chrome ヘッドレスを使用している場合は、--headless=new コマンドライン スイッチで新しいヘッドレス モードを強制的に適用できます。
Chrome の新しいヘッドレス モードは高性能ですが、以前のヘッドレス モードほど軽量ではありません。リソースに制約がある場合や、Chrome の一部の機能が不要な場合は、以前のヘッドレス モードを chrome-headless-shell として使用できます。
Chrome for Testing
テストでは、テスト環境（オペレーティング システム、ブラウザ、ブラウザのバージョン）をきめ細かく管理する必要があります。自動更新は簡単ではありません
そこで Google は Chrome for Testing を開発しました。Chrome for Testing は自動更新なしの Chrome であり、すべての主要なオペレーティング システムにおいて、Chrome のすべてのバージョンと並行してリリースされ、バージョニングされたアーカイブからアクセスできます。これにより、あまり手間をかけずに、特定のバージョンの Chrome に対して自動化ワークフローを実行できます。
Chrome for Testing のバイナリには、Chrome for Testing の可用性ダッシュボード、JSON API、Puppeteer コマンドライン ユーティリティからアクセスできます。
Puppeteer、Chrome の最新のヘッドレス モード、Chrome for Testing は、ブラウザの自動化とテストの実行を可能な限りスムーズにするために Google のチームが現在行っている取り組みの一部にすぎません。テストの作成には、DevTools のレコーダーなどの関連ツールを使用できます。Chrome でユーザーフローを記録して、Puppeteer で再生します。
web.dev でテストについて学ぶ
この投稿で紹介するツールは、自動テストの改善に役立ちます。とはいえ、使い始めたばかりの場合は、理解と学習が大変に思えるかもしれません。そこで、新たに 10 個のモジュール コース「Learn Testing on web.dev」を作成しました。この詳細なコースでは、テストの基本概念、テストの実行場所と方法、テストの種類、実際にテストすべき内容について説明します。これは、テストを行う際の出発点として最適です。基本を理解したら、テストの自動化に関するコレクションに移動してみましょう。詳細なテストや、より具体的なテストの質問に関する実践的なヒントが紹介されています。