はじめに
株式会社トラストバンクで地域通貨プラットフォーム chiica(チーカ)の開発責任者をしております湊（みなと）（@karura618）です。
この記事は トラストバンクAdvent Calender 2025 の記事です。
今回はCMS等のWebサイトにて、自動テスト用のクローラーを作成してみたお話を。
タイトルの件
以前に趣味で Puppeteer を使ったクローラー処理を作ったのですが、せっかくなのでこれを改修して RPAツールっぽいものにしてもらうようにClaude Codeに依頼してみました。
元のソースコードの課題
元々用途が限られているため単体で使う分にはいいんですが拡張性が低い。。。
- クローラーの各処理がJSファイルにべた書きとなっているためある程度知識がない方じゃないと修正ができない。
- 各画面ごとに専用のJSファイルを用意しているため拡張性とメンテナンス性が低い
やりたいこと
- テストケースのレシピをYAMLファイルとして用意し、アクセスする画面やDOM要素、どういう操作をするか等を管理できるようにし、そのレシピが何のテストを行うのためのものなのかをわかりやすくする
出来上がったもの
📁 ディレクトリ構成
自分の得意な言語がPHPなためなんか無駄にPHP経由で実行してますが別に node コマンドでも実行できます。
app/Console/
├── Classes/ # フレームワークコア
│ ├── ActionHandler.js # アクション実行（11種類）
│ ├── Reporter.js # レポート生成（JSON/HTML/CSV）
│ ├── TestRunner.js # テスト実行エンジン
│ └── Helper.js # 共通処理（既存）
├── Commands/ # Artisanコマンド
│ └── RunAutoTest.php # php artisan test:run
├── Config/ # 設定ファイル
│ ├── default.yaml # 共通設定
│ └── recipes/ # テストレシピ
│ ├── login_simple.yaml # シンプル版（推奨）
│ ├── login.yaml # ログイン完全版
│ ├── users.yaml # 会員管理
│ └── companies.yaml # 企業管理
├── Scripts/ # Node.js実行スクリプト
│ └── test-runner.js # メインスクリプト
├── Reports/ # 出力先
│ ├── screenshots/ # 証跡画像
│ └── results/ # レポート
└── Docs/ # ドキュメント
├── README_ENGINEER.md # エンジニア向け
├── README_USER.md # 非エンジニア向け
├── PHP_EXECUTION_GUIDE.md # PHP実行ガイド
└── OPERATION_GUIDE.md # 運用ガイド（NEW）
オプション
| オプション | 説明 | 例 |
|---|---|---|
--headless=false |
ブラウザ表示（デバッグ用） | php artisan test:run login --headless=false |
--continue-on-error |
エラー時も続行 | php artisan test:run --all --continue-on-error |
--scenario="名前" |
特定シナリオのみ | php artisan test:run users --scenario="会員検索" |
--variable key=val |
変数上書き | php artisan test:run login --variable username=admin |
実行例
php artisan test:run login_simple
📊 レポート確認方法
実行結果はHTMLファイル形式で確認可能。
1. HTMLレポート
場所: Reports/results/test_report_YYYYMMDD-HHMMSS.html
内容:
- テスト成功率（パーセンテージ）
- シナリオ別の成功/失敗
- 各ステップの詳細とレスポンスタイム
- エラー情報とスタックトレース
画面イメージ
2. スクリーンショット
テスト結果をエビデンスとして保管するケースを想定し、各ステップの必要なタイミングやエラー発生時にスクリーンショットを取ることも可能。
場所: Reports/screenshots/YYYY-MM-DD/
命名規則:
-
{シナリオ名}_step{番号}.png- 通常のステップ -
{シナリオ名}_step{番号}_error.png- エラー時 -
error_{タイムスタンプ}.png- 致命的エラー時
⚙️ 設定ファイル
default.yaml（共通設定）
とりあえず1サイト用として作成したのでベースとなるURLは1種のみ登録可能。
Basic認証も対応可能にしてます。
場所: app/Console/Config/default.yaml
variables:
# ベースURL
base_url: "https://*******************"
# Basic認証
basic_id: "*************"
basic_password: "*********************"
# ログイン情報
username: "**********"
password: "**************"
# タイムアウト設定（ミリ秒）
default_timeout: 30000
navigation_timeout: 60000
レシピファイルの構造
test_suite:
name: "テスト名"
base_url: "{{base_url}}" # 変数参照
# 前処理（ログイン等）
setup_scenarios:
- "ログイン"
scenarios:
- name: "シナリオ名"
steps:
- action: アクション名
パラメータ: 値
🎯 利用可能なアクション
とりあえずこの辺網羅していればそこそこ使えるかなというものを用意。
| アクション | 説明 | 主要パラメータ |
|---|---|---|
navigate |
ページ遷移 |
url, wait_until, timeout
|
input |
テキスト入力 |
selector, value, clear
|
click |
クリック |
selector, wait_navigation
|
wait |
待機 |
time (ミリ秒) |
wait_for_selector |
要素待機 |
selector, visible, timeout
|
assert |
検証 |
type, value, selector
|
screenshot |
スクリーンショット |
name, full_page
|
select |
選択 |
selector, value
|
hover |
ホバー | selector |
scroll |
スクロール |
selector or x, y
|
extract |
データ抽出 |
selector, attribute, save_to
|
所感（Claude Codeの）
元ソースがあったのもあり、割と対話ベースでスムーズに作れました。
特にレポートに関しては出力項目以外、拡張子やデザインは指定していなかったのですが思ったより見やすいもの作ってくれた感。
（アプリケーションのワイヤーフレームを依頼した時も似たようなレイアウトだったんですがClaude Codeの中で流行っているデザインなのかな？）
改修の所要時間としては微調整を含めて4時間くらい？
指示が明確であればもうちょっと早く作ってもらえそう。
おわりに
Claude Code、使い始めて2か月くらいですが、今回のように既存ソースの洗い出しや改修の他、各アプリケーションの画面遷移図の整理等、結構使い道があっていいですね。
特に画面遷移図についてはFgjamやmiro等のツールとも連携させてみたい。
あと、成果物ができた時点でClaude自身にプロンプトを作成してもらうのを忘れずに。。。w
エンジニア募集
弊社では絶賛エンジニア募集中です！
気になった方、是非お気軽にWantedlyからご連絡ください！