TestSprite CLIを使ったAIエージェントの変更テスト：CoderCupケーススタディ
Rui Li
AIコーディングエージェントはWebアプリの変更を素早く行うことができます。次に問われるのは、その変更がユーザーが実際にページを使う際に正しく機能するかどうかです。私たちはオープンソースのWebアプリであるCoderCupを使い、コーディングエージェントにCodexを、ブラウザ上での動作確認にTestSprite CLIを用いてこの問いを検証しました。
タスクは、CoderCupの /agents/ ページにあるVendorフィルターを共有可能にすることでした。ユーザーが「openai」を選択した場合、アドレスは /agents/?vendor=openai に変わる必要があります。そのリンクを開いたりリフレッシュした際には選択状態が復元され、出荷済みエージェントのカードグリッドにCodexカードが表示される必要があります。「all」を選択するとパラメータが削除され、全カードのリストが元に戻る必要があります。
小さな変更、しかしユーザーには見える形で失敗
元のフィルターは現在のページに表示されるカードを切り替えていましたが、アドレスバーは /agents/ のままでした。ユーザーはOpenAIの結果を見てリンクをコピーできますが、そのリンクを開いた別のユーザーには同じフィルタリングされた表示は届きません。
コーディングエージェントはTestSpriteにブラウザ操作（openaiのVendorボタンを選択する）と観測可能なアサーション（URLにvendor=openaiが含まれているべき）を与えました。最初の実行でそのアサーションは失敗しました。ボタンは選択され、Codexカードは表示されましたが、URLは変化しませんでした。ページのコードを確認することで理由が判明しました。クリックハンドラーがブラウザの履歴を更新せずにReactのstateを更新していたためです。
この失敗により、エージェントは作業すべき正確な箇所を把握できました。カードフィルター自体が壊れているかどうかを推測する必要はなく、選択状態を共有可能にすることに集中できました。
修正：URLをフィルターの状態の一部にする
エージェントはページを更新し、クエリ文字列からサポートされているVendorの値を読み取り、ユーザーがVendorボタンをクリックした際に新しい値を書き込むようにしました。「all」を選択するとクエリパラメータが削除されます。ブラウザの「戻る」「進む」操作も、選択されたボタンとURLを再同期させます。
各ボタンにはaria-pressedが付与されるようになり、支援技術やブラウザのチェックに対して状態が明確に伝わります。またページは、読み込み中とフィルター結果が空の状態を区別します。データ取得中の空のカードグリッドを「一致するエージェントなし」と誤認しないようにするためです。
ブラウザチェックで確認されたこと
変更後、TestSpriteの実行により、openaiが選択され、出荷済みエージェントのグリッドにCodexという1枚のカードが含まれていることが確認されました。
また、ブラウザ上でリンクの一連の動作を確認しました。/agents/ から始め、openaiをクリックするとURLが /agents/?vendor=openai に変わり、出荷済みカードはCodexの1枚だけになりました。リフレッシュしても同じURL・選択状態・カードが維持されました。「all」をクリックすると /agents/ に戻り、全カードのリストが復元されました。
テストに関して重要な詳細が1つあります。このページには、Vendorフィルターの上に対戦比較セクションがあり、その下に出荷済みエージェントのカードグリッドがあります。比較セクションは引き続き全エージェントを表示し、Vendorボタンはカードグリッドをフィルタリングします。「ページ上にCodexのみが表示されているべき」というアサーションはテストの範囲が誤っています。有効なアサーションはカードグリッドを対象に指定する必要があります。
エージェントループにおけるTestSpriteの役割
今回のケースでは、動作するループは「動作を定義する → ブラウザテストを実行する → 失敗を確認する → コードを修正する → 動作を再確認する」というものでした。TestSpriteがブラウザの観測結果を提供し、コーディングエージェントがそれを確認し、変更を加え、続くチェックで結果を評価しました。
ここから得られる教訓は、テストの証拠を丁寧に読み解くことの重要性です。グリーンの結果は、実際に記録されたステップとアサーションに紐付けて評価する必要があります。レッドの結果には、より精度の高いターゲット指定が必要なアサーションと並んで、有益な成功した観測結果が含まれている場合があります。実行の録画・ページの状態・テストのスコープを合わせて確認することで、ステータスラベルだけよりも明確な状況把握が可能になります。
これはテスト環境とサンプルのリーダーボードデータを使用した、一つの焦点を絞った検証です。TestSprite CLIが実際のプロジェクトにおいてAIコーディングエージェントに具体的なブラウザフィードバックを提供できることを示すものであり、本番環境へのデプロイや一般的な検出率に関する主張ではありません。