手動テストの「面倒」を解決！Chrome DevToolsで操作を簡易的に自動化しよう！
2025.09.04こんにちは、リテールアプリ共創部の戸田駿太です。
今回はChrome DevToolsを利用した手動テスト時の入力を効率化する方法をご紹介します。
この方法を使えば今まで手作業で行なっていた入力を簡易的に自動化することができるため手動テストの効率が向上します。
まずは実行動画から！
左のカード登録画面（仮）のバリデーションテストをしている様子です。
この動画で行なっていること
- 正常な値を入力して登録
- 正常登録の確認
- 正常な値の状態から1つの入力を編集してバリデーションエラーの状態で登録
- エラーが発生することを確認
Recorderを使うメリット
✅ 手動テストの効率が向上する
今までテスト項目毎に入力していた値をミスなく入力できるようになります。
コードベースの確実な操作ができるのでテストのミスも少なくなるので安心感も増します。
✅ Chromeの開発者ツールであるため、環境構築が必要ない
お使いのブラウザ（私はArc）であればすぐに実行できます。
他の人がすぐに実行できる手法なのでオススメしやすいです。
✅ 自分の操作をコードでも確認できるため、操作のチェックができる
✅ 他人に共有しても同じ操作の実行ができる
✅ テスト手順書の代わりとしても活用できる
テストを行うためのセットアップ手順
動画
手順
- テストしたい画面を開く
- DevToolsを開く
- DevToolsのRecorderタブを開く
- レコードを開始する
- テストしたい操作を行う
- レコードを停止する
レコードした内容を実行する
Replayというボタンを押すとレコードされた操作を開いているページ上で行います。
その他Recorderの補足
レコードした操作のコードを確認する
Recorderではブラウザの操作をPuppeteerのコードまたはJSONで確認できます。
実行スピードを遅くする
実行スピードを遅くすることで実行している様子を観察できます。
パフォーマンスを測る
「Performance panel」というボタンを押すと、レコードの実行を行い、その実行のパフォーマンスを測ることができます。
Recorderを使ったTips
RecorderとAIを利用して手順書を爆速で作成する
「レコードした操作のコードを確認する」←このコードとAIを利用することで手順書を爆速で作成できます。
すごく便利ですが、複数タブには対応していないのが残念なところです。
手順
- 先ほどの操作が記述されたJSONをコピー
- AIに貼り付け
- 手順書を作成するように依頼
- 手順書を作成
完成品
# カード情報入力手順書
## 概要
本手順書は、カード情報入力画面での個人情報およびクレジットカード情報の入力手順を説明します。
## 入力手順
### 1. 電話番号の入力
- **入力欄**: 電話番号（phoneNumber）
- **入力値**: `08011112222`
- 電話番号欄をクリックして、11桁の電話番号を入力します
### 2. 生年月日の入力
#### 2.1 生年（年）
- **入力欄**: 生年（birthYear）
- **入力値**: `2000`
- 生年の入力欄をクリックして、西暦4桁で入力します
#### 2.2 生月（月）
- **入力欄**: 生月（birthMonth）
- **入力値**: `12`
- 生月の入力欄をクリックして、2桁で入力します
まだ続く。。。
まとめ
今回はDevToolsのRecorderを利用した手動テスト時の入力を効率化する方法をご紹介しました。
誰でもすぐに実践できる内容なので、ぜひ試してみてください！
参考
