はじめに
先日以下の記事を作成しましたが、いくつか課題があり、設計から見直しました。
できたもの
今回はSpringで作成した以下のWebアプリケーションを動かしてみます。
テキストボックス、日付形式の入力項目を入力して、登録を行って、その結果を画面に表示するアプリです。
以下の指示文を入力して、AIにブラウザ操作をさせます。
1.http://localhost:8080/testにアクセスして、スクリーンショットを取得してください。
2.受注番号に1234を入力して、
受注年月日に2023-10-01を入力してください。
発送日に2023-10-02を入力してください。
受注金額に2020円を入力してください。
3.ここまで行ったらスクリーンショットを取得してください。
4.登録ボタンを押下して、スクリーンショットを取得してください。
5.戻るボタンを押下して、スクリーンショットを取得してください。
6.受注番号に1235を入力して、
受注年月日に2023-10-02を入力してください。
発送日に2023-10-03を入力してください。
受注金額に10250円を入力してください。
7.ここまで行ったらスクリーンショットを取得してください。
8.登録ボタンを押下して、スクリーンショットを取得してください。
9.戻るボタンを押下して、スクリーンショットを取得してください。
この指示をもとにステップバイステップな操作手順を起こしてもらった結果がこちらです。
Generated plans:
Step 1: http://localhost:8080/testにブラウザでアクセスする
Step 2: ページ全体のスクリーンショットを取得する
Step 3: 受注番号入力欄に"1234"を入力する
Step 4: 受注年月日入力欄に"2023-10-01"を入力する
Step 5: 発送日入力欄に"2023-10-02"を入力する
Step 6: 受注金額入力欄に"2020"を入力する
Step 7: 現在の画面のスクリーンショットを取得する
Step 8: 登録ボタンをクリックする
Step 9: 登録後の画面のスクリーンショットを取得する
Step 10: 戻るボタンをクリックする
Step 11: 戻った画面のスクリーンショットを取得する
Step 12: 受注番号入力欄に"1235"を入力する
Step 13: 受注年月日入力欄に"2023-10-02"を入力する
Step 14: 発送日入力欄に"2023-10-03"を入力する
Step 15: 受注金額入力欄に"10250"を入力する
Step 16: 現在の画面のスクリーンショットを取得する
Step 17: 登録ボタンをクリックする
Step 18: 登録後の画面のスクリーンショットを取得する
Step 19: 戻るボタンをクリックする
Step 20: 戻った画面のスクリーンショットを取得する
これを各ステップごとの操作手順と前ステップの実行結果をAIに渡し、Playwright MCPを操作してもらいました。
その結果のスクリーンショットがこちらです。
（余白が多くてすみません。ブラウザのサイズ指定ができず）
実装の詳細
グラフ構成
基本的には以下の構成です。
planningノードで具体的なステップバイステップの計画を立て、
agentノードでサブグラフを呼び出し、1つの計画に対して完了するまでAIにブラウザ操作をさせる形です。
特徴
前回の反省を活かして以下の仕組みを取り入れています。
planningノード
指示内容から、具体的な操作手順に起こしています。
testagentノード
planningノードで作成した操作手順１つと、前回の操作内容（Playwright MCPからの戻り値）を引き渡して、次にどういう操作をすればよいかを判断させています。
ツール（Playwright MCP）を利用する必要があれば、Tool_nodeに、そうでなければ、end_nodeに移る形です。
AIに渡す値は、前回の捜査結果だけなので、トークン数は多くても1リクエスト当たり2000～3000程度になっています。（画面の規模によりますが）
end_nodeノード
end_nodeに来たら、次の操作内容があるかを確認し、あれば再度agentサブグラフを実行、なければ__end__ノードに移動します。
その他
Playwright MCPをstdioモードで起動するとどうしても、asyncioのエラー（イベントループがすでに閉じている、といった内容）が出たので、sseモードで起動しています。原因分かる方いればお教えいただきたいです。
ソースコードはこちらに格納しています。