TabbitBlog

AIエージェントでローカルWebアプリをテストする方法

変更したlocalhostのルートを開き、操作の失敗を再現し、ネットワーク応答と画面の結果で修正を確認します。

この記事の内容
  1. サービスを起動して対象ルートを確認する
  2. 利用者の操作を最後まで実行する
  3. 再現して一行直し、同じ手順を試す
  4. どんな証拠を残しますか?
  5. ページが開かない場合は?

構文チェックが通っても、利用者の操作は失敗することがあります。変更したルート、テスト入力、画面で確認できる結果を決めます。通知設定ページは修正前後ともHTTP 200で、フォームを送信して初めて失敗が分かりました。

サービスを起動して対象ルートを確認する

ホスト、ポート、ルートを記録し、意図したプロセスが待ち受けているか確認します。テストにはループバックを使います。リモート環境のlocalhostはその環境自身です。テスト用タブで変更したルートを開き、見出しと初期状態を確認します。トップページの200だけでは設定を確認できません。

開始点確認
GET /settings/alertsHTTP 200 · Alert settings
Enable alertsSave alerts
POST /api/alertsHTTP + role=status

Playwright · Web server

利用者の操作を最後まで実行する

Enable alertsをオンにしてSave alertsを押します。POST応答と画面の文言を記録します。速い応答を取り逃がさないよう、押す前に応答の待機を開始します。メソッドとパスで無関係のリクエストを除外します。架空のデータを使い、本番の不可逆操作は避けます。

Playwright · Network

再現して一行直し、同じ手順を試す

最初はenabledを送信しましたが、サーバーはalertsEnabledを要求し、422とSave failed: alertsEnabled requiredが出ました。送信フィールドだけ変えて同じポートで再起動すると、同じ操作でPOSTが200になり、Q02-ALERTS-ENABLEDが表示されました。構文チェックでは分からなかったインターフェースの不一致です。

段階修正前修正後
ページ移動HTTP 200HTTP 200
送信POST 422 · enabledPOST 200 · alertsEnabled
画面の結果Save failed: alertsEnabled requiredQ02-ALERTS-ENABLED

修正前のTabbitで保存エラー

修正後のTabbitで受付結果を表示

どんな証拠を残しますか?

ルート、操作、入力、期待値と実測値、機密情報を除いた通信情報、必要な画面画像を残し、修正前後を並べます。このテストで確認したのは応答の受付結果です。永続化や本番性能は測っていません。永続化が要件なら再読み込みして読み取り先の値を別に確認します。

小さなアプリでエージェントに利用者のように動いてもらう方法を尋ねた開発者がいました。別の開発者はlocalhostへの到達とCSS描画の確認に限界があったと述べています。到達できるルート上で確認可能な動作を一つ指定します。

Reddit · Cursor · Reddit · BuildWithClaude

ページが開かない場合は?

ブラウザーと同じ環境でサービスの待ち受けを確認し、オリジン、ポート、パスを照合します。接続拒否、ページエラー、操作失敗は分けて記録します。ネットワーク権限がなければ停止し、境界を記録します。

よくある質問

ローカル確認をどう始めますか?

ホスト、ポート、ルートを記録し、意図したプロセスが待ち受けているか確認します。テストにはループバックを使います。リモート環境のlocalhostはその環境自身です。テスト用タブで変更したルートを開き、見出しと初期状態を確認します。トップページの200だけでは設定を確認できません。

どの操作を試しますか?

Enable alertsをオンにしてSave alertsを押します。POST応答と画面の文言を記録します。速い応答を取り逃がさないよう、押す前に応答の待機を開始します。メソッドとパスで無関係のリクエストを除外します。架空のデータを使い、本番の不可逆操作は避けます。

一行の修正をどう確認しますか?

最初はenabledを送信しましたが、サーバーはalertsEnabledを要求し、422とSave failed: alertsEnabled requiredが出ました。送信フィールドだけ変えて同じポートで再起動すると、同じ操作でPOSTが200になり、Q02-ALERTS-ENABLEDが表示されました。構文チェックでは分からなかったインターフェースの不一致です。

何を証拠として残しますか?

ルート、操作、入力、期待値と実測値、機密情報を除いた通信情報、必要な画面画像を残し、修正前後を並べます。このテストで確認したのは応答の受付結果です。永続化や本番性能は測っていません。永続化が要件なら再読み込みして読み取り先の値を別に確認します。

ページが開かない場合は?

ブラウザーと同じ環境でサービスの待ち受けを確認し、オリジン、ポート、パスを照合します。接続拒否、ページエラー、操作失敗は分けて記録します。ネットワーク権限がなければ停止し、境界を記録します。

次のステップへ

Tabbit と一緒に仕事をしましょう。

タブをまたいで調査し、繰り返しのブラウザ作業を自動化し、あらゆる文脈を手の届くところに。