ブラウザ操作を自動化！Puppeteerでテストの効率を劇的に向上させる方法

はじめに 

こんにちは、株式会社メンバーズの茶木です。

今回は、ご支援中の案件先で取り組んだ「シミュレーションシステムの画面テスト自動化」についてご紹介します。テストを自動化することで、大幅な工数削減とヒューマンエラーの撲滅を実現しました。その具体的な方法や使用したツール、得られた成果について詳しくお話しします。
また、Chromeのレコーダー機能やPuppeteerを使った自動化のデモンストレーションもご紹介しますので、ぜひ参考にしてください。

手動テストの課題

私たちのチームでは、月に2～3回、シミュレーションシステムの画面テストを実施していました。このシステムでは、約2000件のテストケースが存在し、それらを手動で確認する作業は非常に時間がかかるものでした。具体的には、以下のような課題がありました：

• 工数の負担：テストは4人がかりで4時間かかり、1回あたり合計16時間もの作業が必要でした
• ヒューマンエラーのリスク：手動での確認作業では、どうしても見落としやミスが発生する可能性がありました。
  

  これらの課題を解決するために、テストの自動化に取り組むことにしました。

使用したツールと自動化の流れ

今回の自動化では、以下のツールを使用しました：

•  Chrome開発者ツールのレコーダー機能：ボタン操作や画面遷移を記録し、Puppeteerのコードとして出力するために使用しました。
• Puppeteer：Chromeブラウザを操作するためのNode.jsライブラリです。テストの自動実行を実現しました。

自動化の具体例

今回取り組んだテスト自動化の対象は、シミュレーションシステムの画面テストでした。このシステムでは、ユーザーがさまざまなオプションを選択することで、出力される結果が変わります。

例えば、以下のような操作を想定しました：

• ラジオボタンやセレクトボックスの選択：ユーザーは複数の設問において多数の選択肢の中から特定の項目を選択する
• ボタンのクリック：ユーザーは結果を見るために出力ボタンをクリックする

これらの操作を通じて、出力される結果が変わるため、全ての組み合わせをチェックする必要があります。想定される組み合わせは2000件以上にのぼり、手動での確認は非常に時間がかかるものでした。

そのため、Chromeのレコーダー機能を使って代表的な操作をコード化し、カスタマイズすることで自動化しました。これにより、全てのパターンを迅速にテストし、機能の正確性を確保することが可能になりました。

デモンストレーション

Chromeのレコーダー機能を使った操作記録

まずは、Chromeのレコーダー機能を使って、ブラウザ操作を記録する方法をご紹介します。この機能を使うと、簡単に操作を記録し、それをPuppeteerのコードとして出力できます。

【手順】

1. Chrome開発者ツールを開く：

   Chromeブラウザでテスト対象のページを開き、右クリックして「検証」を選択します。もしくは、F12キーを押して開発者ツールを起動します。

2. Recorderタブを開く：

   開発者ツールの上部メニューから「Recorder」タブを選択します（表示されていない場合は「>>」をクリックして表示されるメニューから選択）。

3. 新しい記録を開始：

   「Start Recording」ボタンをクリックして記録を開始します。ブラウザ上でボタンをクリックしたり、フォームに入力したりすると、それらの操作が記録されます。

4. 記録を停止：

   操作が完了したら、「Stop」ボタンをクリックして記録を停止します。

5. Puppeteerコードをエクスポート：

   「Show code」ボタンをクリックするとPuppeteerのコードが表示されます。このコードをそのままテストスクリプトとして利用できます。

Puppeteerを使った自動化スクリプトの作成

Puppeteerを使って記録した操作を自動化する方法をご紹介します。

【必要な準備】
-Node.jsのインストール：
PuppeteerはNode.jsのライブラリなので、事前にNode.jsをインストールしてください。

-Puppeteerのインストール：
ターミナルで以下のコマンドを実行してPuppeteerをインストールします。

npm install puppeteer

Copy

Chromeのレコーダー機能で生成されたソースコードを、Puppeteerをインストールした環境にダウンロードし、nodeでダウンロードしたファイルを実行することで、記録した操作を自動実行することが可能です。
必要に応じてソースコードを修正するとよいでしょう。

自動化の成果

テストの自動化により、以下のような成果を得ることができました：

• 工数の大幅削減：これまで1回のテストに16時間（4時間×4人）かかっていた作業が、以下のように短縮されました
  • コードメンテナンス時間：2時間
  • テスト実行時間：5分
  • 合計で2時間5分まで短縮することができました。
• ヒューマンエラーの撲滅：手動での確認作業では、どうしても発生していた見落としやミスが、自動化によって完全に排除されました。

まとめ

今回のテスト自動化は、工数削減と品質向上の両面で大きな成果をもたらしました。手動作業を自動化することで、チームの負担を軽減し、より重要な業務に集中できる環境を整えることができました。Chromeのレコーダー機能やPuppeteerを使えば、ブラウザ操作の自動化は意外と簡単に実現できます。この記事で紹介した手順を参考に、ぜひ自動化に挑戦してみてください。最後までお読みいただき、ありがとうございました。