AI Agent implement browser test by browser-use on Azure

AI Agentがブラウザテストを自動化する仕組みをAzure上に構築しました

Transcript

1. Agentにブラウザテストをやってもらえる 仕組みをAzure上に構築してみた話 .NETラボ1月 YUSUKE SATAKE
2. @fe_js_engineer @fe_js_engineer satyus Yusuke Satake Microsoft Japan スタートアップチーム Microsoft Evangelist Works • 日本マイクロソフトのスタートアップチームのAzure担当 • 佐竹塾 経営 • 1seki2cho 経営 本発表は個人的な見解であり、所属する会社・組織とは全く関係ありませ んのでご了承ください。 comunity • .NETラボ • PoC部
3. Microsoft for Startups Founders Hub Microsoft Products Partner Products Power Platform Microsoft 365 Visual Studio OpenAI GitHub LinkedIn Stripe Dynamics 365 Miro Azure OpenAI Service Azure AI Studio Microsoft Azure 最大 $150K 無償 (約2,100万円) Bubble MongoDB Atlas 入会していただけ るスタートアップ企 業を募集していま す！
4. Agenda  はじめに  AI エージェントについておさらい  Browser-useについて  Azure上に構築  動かしてみよう！  まとめ
5. はじめに  今日はBrowser-useについて色々 触る機会があったので、まとめを報 告したいと思います。  後ほどAI Agentが自動でブラウザ テストをするDEMOをやってみたいと 思います。  すごく便利な機能なので、ご興味あ る方は是非触ってみてください！  https://github.com/browser- use/browser-use
6. AI Agentについておさらい
7. AI Agentについておさらい  AI Agentとは、複雑な目標を自律的に遂行できるAIシステムを指します  従来のAIシステムが特定のタスクに特化していたのに対し、LLMを活用したAI エージェントは、与えられた目標を達成するために必要な行動を自ら決定し、 実行することが可能  理想を言えば、人がやってほしい抽象度高い指示から、AIが自分でやるべきこ とを考えて、さまざまなツールを活用して人間が求める目標に向かって積極的 にタスクをこなしてくれるようにしたい
8. Multi-Agentとは？  一連の処理の中で、複数のシステムプロンプトを使って、役割やステップごとに 別々のAIエージェントで処理を行う、ワークフローの最適化を目的とした処理
9. マルチエージェント型のアーキテクチャの動作例 Your Copilots Chat Proxy Agent 経費申請アシスタント ホテル予約アシスタント 品川の飲食店探しアシスタント ヌッシがなんか言 うとんで。 会議してくれや。 まとめたるわ。 上司に聞いたら、1月25日 やったらええやって ほな、1月25日でええ感じの 品川のAPAホテル取るわ 品川って大阪のやつが思う ほど飲食店ないで。 東京に出張したいからええ感じ にアレンジしてくれや 1/25の経費申請とホテルの手 配が完了致しました。 当日のお食事はXXXなどいかが でしょうか
10. 今回のAI Agentのユースケース  ブラウザテストを自動的に実施してくれるAgentをAzure上に構築 BrowserTest Agent 承知いたしました どの処理が必要か考えます BrowserのUIのぽちぽちTest やっといてーや  Userが ブラウザテストを指示  Agentが該当するサイトにアクセスする  Agentが該当するサイトのUIテストを 実施
11. Browser-useについて
12. Browser-useについて  Browser Use は、高度な AI 機能と強力なブラウザ自動化を組み合わせて、AI エージェントによる Web 対話をシームレスにします。
13. Browser-useについて
14. Browser-useについて  ブラウザテストのAI Agentの中でもかなりパフォーマンスが高いシステム
15. Browser-useについて  Get Startedがとても簡 単 以下のモジュールをイン ストールしてpythonのコー ドを実行するだけ
16. Browser-useをAzure上へ構築
17. Azure上に構築すると…
18. Azure上に構築すると… 1.User が Static Web Apps にアクセス 2.テスト実行を依頼 3.Azure App Service に hosting されて いる browser-use が指定したブラウ ザのテストを実行 4.テスト結果をAI Foundryを使って要 約 5.テスト結果を Azure CosmosDB へ保 存 6.Static Web Apps よりテスト結果を確 認
19. DEMO
20. Browser-useを用いたサーバサイドの動きのDEMO
21. Browser-useを用いたサーバサイドの動きのDEMO
22. Browser-useを用いたサーバサイドの動きのDEMO
23. Application全体の動きのDEMO
24. Browser-useを用いたサーバサイドの動きのDEMO
25. 最後に いかがだったでしょうか。  今回はbrowser-useに焦点を当てて発表致しました。  ブラウザのぽちぽちテストは私も経験あるのですが、UIをぽちぽちしてExcelに結 果のスクショを貼って…みたいなかなり退屈な作業ですが、ミスると結構怒られ るテストでもあります。(懐かしい7年前の新卒時代…)  そのような単純かつ精度が必要な作業をAgentに任せるのもかなり良い作戦 の一つだと感じました。  また、UIテストに関わらず、こうした作業をAI Agentが代替してくれるように日々 の作業を組み直すことも必要かもしれません。
26. Thank you!!
27. 参考資料  https://github.com/browser-use/browser-use  https://github.com/SatakeYusuke19920527/poc-auto-browser-test