こんにちは。虎の穴ラボのH.Hです。本記事は虎の穴ラボ Advent Calendar 2022 - Qiita 6日目の記事です。

5日目はhk220さんの「GoogleSitesをMarkdownに変換するChrome拡張を作ってみた」でした。また、明日7日目はrhさんの「国産ヘッドレスCMS「Newt」を使ってみた」です。

今回ですがChromeとPuppeteerを使用してコードを一切書かずにWEBアプリケーションの動作テストを行うことができるのかを調べてみました。

なぜコードを書かずに動作テストができるかを検討するのか？

過去に以下の記事で紹介したように動作テストの簡略化を検討してみたことがありました。

toranoana-lab.hatenablog.com

ある程度共通化することで汎用性を持たせることはできましたが、設定ファイルを作成する手間がどうしても省けないという問題が残りました。そこを解決することはできないかということで、Chromeに標準で入っているRecoder機能の活用する方法を検討しました。

使用したもの

Chrome(Recorder機能)
Puppeteer
@puppeteer/replay
環境としてはMacbookを使用しています。

@puppeteer/replayとは

ブラウザの操作を記録したファイルをPuppteerで実行して、結果を表示してくれるCLIツールです。
操作を記録したファイルは、ChromeのDevToolsにあるRecorder機能からJSONのフォーマットで取得することができます。

ソースコードはPuppeteer関連のツールとしてGitHubにも公開されており、以下のURLから見ることができます。

github.com

今回行うこと

1)操作を記録したファイルの作成
2)@puppeteer/replayのインストール
3)ファイル単体で実行
4)複数ファイルで実行

1)操作を記録したファイルの作成

操作を記録したファイルはRecorder機能で操作を記録し、ダウンロードすることで取得できます。
Recorder機能についてはこちらのページにまとめています。
2021年にChromeにRecorder機能が入った際に試した内容なのでいくつかの機能がその後追加されていますが、基本的な機能に大きく変更はありません。

toranoana-lab.hatenablog.com

試したいページの操作を記録して、リプレイで実行してエラーなく実行できることを確認します。
問題なければ上記のページの記載の5のところにあるダウンロードの部分で「Export as a JSON file」を選択してダウンロードします。

※「Export as a @puppeteer/replay script」や「Export as a Puppeteer script」の選択肢も出てきますが、今回は使用しません。

2)@puppeteer/replayのインストール

@puppeteer/replayの実行にはPuppeteerも必要となるので、双方をインストールします。

$npm install puppeteer --save

$npm install @puppeteer/replay --save

私の環境で試したところPuppeteerより先に@puppeteer/replayをインストールするとPuppeteerが見つからないというエラーになったので、GitHubに書かれている順序とは逆の順序でコマンドを実行しています。

11/27の最新バージョン(2.6.0)の@puppeteer/replayを使用するには18.0.5以上のバージョンのPuppeteerが必要になります。

3)ファイル単体で実行

以下のコマンドで、1でダウンロードした操作を記録したファイル単体をもとに操作を実行します。

$npx @puppeteer/replay ファイル名

試しにtest.jsonというファイルを作成して実行した場合は以下のような結果が出力されます。ここでのtitleはRecoder機能で記録をする際に決めた名前になります。

$npx @puppeteer/replay test.json
Running test.json...
Finished running test.json
╔═══════════╤═══════════╤═══════════╤══════════╗
║ Title     │ Status    │ File      │ Duration ║
╟───────────┼───────────┼───────────┼──────────╢
║ test_file │  Success  │ test.json │ 14640ms  ║
╚═══════════╧═══════════╧═══════════╧══════════╝

仮に存在しないURLにアクセスするような記述があるとエラーログと共に以下のような記述が出力されます。

╔═══════════╤═══════════╤═════════════════╤══════════╗
║ Title     │ Status    │ File            │ Duration ║
╟───────────┼───────────┼─────────────────┼──────────╢
║ test_file │  Failure  │ test_error.json │ 6385ms   ║
╚═══════════╧═══════════╧═════════════════╧══════════╝

ただし、存在しないURLでもドメインは存在していた上でURLのが正しくない状態（レスポンスコードが404などを返す）場合には、検知できずに成功と判定される動きとなります。実行中にどうしても遷移できない場合などがFailureとなるようなので、Successだったとしても途中で特定のボタンが押せなかったなどのエラーログが出ていないことを確認する必要があります。

4)複数ファイルで実行

先ほどのファイルを一つのフォルダにまとめて以下のコマンドで実行可能です。

$npx @puppeteer/replay フォルダ名

下記が実際に二つのテストファイルをまとめて動かしてみた結果となります。

$npx @puppeteer/replay test_files
Running test_files/error2.json...
Finished running test_files/error2.json
Running test_files/test.json...
Finished running test_files/test.json
╔═══════════╤═══════════╤════════════════════════╤══════════╗
║ Title     │ Status    │ File                   │ Duration ║
╟───────────┼───────────┼────────────────────────┼──────────╢
║ error2    │  Success  │ test_files/error2.json │ 4564ms   ║
╟───────────┼───────────┼────────────────────────┼──────────╢
║ test_file │  Success  │ test_files/test.json   │ 14646ms  ║
╚═══════════╧═══════════╧════════════════════════╧══════════╝

テスト同士は完全に別のブラウザで操作しているのと同じようになっているため、複数のテストの前後関係などは気にすることなくファイルの記述さえ正しければまとめて実行できます。

使ってみた所感

1)作成が簡単

設定ファイルの作成が一般的なブラウザで簡単に作成できることを確認できました。

2)ファイル作成のずれがなくなる

特別な拡張機能などを使用せずに作成できるので、環境によって作られるファイルに差異がなく作れることが確認できました。

3)画面が遷移できれば成功とみなされるのは注意が必要

前述の通り操作の下結果のサーバーからのレスポンスが404など意図した結果でなかったとしてもSuccessと表記されます。
最後まで必ず操作されたかどうかを確認するためには、操作終了後存在するはずのボタンやリンクを押して、正しく画面遷移していることを確認するなどの工夫は必要になると感じました。

まとめ

今回ChromeとPuppeteerおよび@puppeteer/replayを使用して一切コードを書かずに動作テストを行うことができるかを試しました。
ページのレスポンスコードの問題などはありましたが、画面遷移の一連の流れなどを自動的に試すことができることが確認できました。ファイルの編集などを行わずに実行できるので、別の環境にファイルを移動させたとしても同じ動きを再現できると思われるので、複数人でのファイルの共有などもできると考えられます。また動作テストの他に、同じ操作を自動的に繰り返してデータを登録する時にも活用することができると感じました。