AI Agent implement browser test by browser-use on Azure

Slide 1

Slide 1 text

Agentにブラウザテストをやってもらえる仕組みをAzure上に構築してみた話 .NETラボ1月 YUSUKE SATAKE

Slide 2

Slide 2 text

@fe_js_engineer @fe_js_engineer satyus Yusuke Satake Microsoft Japan スタートアップチーム Microsoft Evangelist Works • 日本マイクロソフトのスタートアップチームのAzure担当 • 佐竹塾経営 • 1seki2cho 経営本発表は個人的な見解であり、所属する会社・組織とは全く関係ありませんのでご了承ください。 comunity • .NETラボ • PoC部

Slide 3

Slide 3 text

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 入会していただけるスタートアップ企業を募集しています！

Slide 4

Slide 4 text

Agenda  はじめに  AI エージェントについておさらい  Browser-useについて  Azure上に構築  動かしてみよう！  まとめ

Slide 5

Slide 5 text

はじめに  今日はBrowser-useについて色々触る機会があったので、まとめを報告したいと思います。  後ほどAI Agentが自動でブラウザテストをするDEMOをやってみたいと思います。  すごく便利な機能なので、ご興味ある方は是非触ってみてください！  https://github.com/browser- use/browser-use

Slide 6

Slide 6 text

AI Agentについておさらい

Slide 7

Slide 7 text

AI Agentについておさらい  AI Agentとは、複雑な目標を自律的に遂行できるAIシステムを指します  従来のAIシステムが特定のタスクに特化していたのに対し、LLMを活用したAI エージェントは、与えられた目標を達成するために必要な行動を自ら決定し、実行することが可能  理想を言えば、人がやってほしい抽象度高い指示から、AIが自分でやるべきことを考えて、さまざまなツールを活用して人間が求める目標に向かって積極的にタスクをこなしてくれるようにしたい

Slide 8

Slide 8 text

Multi-Agentとは？  一連の処理の中で、複数のシステムプロンプトを使って、役割やステップごとに別々のAIエージェントで処理を行う、ワークフローの最適化を目的とした処理

Slide 9

Slide 9 text

マルチエージェント型のアーキテクチャの動作例 Your Copilots Chat Proxy Agent 経費申請アシスタントホテル予約アシスタント品川の飲食店探しアシスタントヌッシがなんか言うとんで。会議してくれや。まとめたるわ。上司に聞いたら、1月25日やったらええやってほな、1月25日でええ感じの品川のAPAホテル取るわ品川って大阪のやつが思うほど飲食店ないで。東京に出張したいからええ感じにアレンジしてくれや 1/25の経費申請とホテルの手配が完了致しました。当日のお食事はXXXなどいかがでしょうか

Slide 10

Slide 10 text

今回のAI Agentのユースケース  ブラウザテストを自動的に実施してくれるAgentをAzure上に構築 BrowserTest Agent 承知いたしましたどの処理が必要か考えます BrowserのUIのぽちぽちTest やっといてーや  Userがブラウザテストを指示  Agentが該当するサイトにアクセスする  Agentが該当するサイトのUIテストを実施

Slide 11

Slide 11 text

Browser-useについて

Slide 12

Slide 12 text

Browser-useについて  Browser Use は、高度な AI 機能と強力なブラウザ自動化を組み合わせて、AI エージェントによる Web 対話をシームレスにします。

Slide 13

Slide 13 text

Browser-useについて

Slide 14

Slide 14 text

Browser-useについて  ブラウザテストのAI Agentの中でもかなりパフォーマンスが高いシステム

Slide 15

Slide 15 text

Browser-useについて  Get Startedがとても簡単以下のモジュールをインストールしてpythonのコードを実行するだけ

Slide 16

Slide 16 text

Browser-useをAzure上へ構築

Slide 17

Slide 17 text

Azure上に構築すると…

Slide 18

Slide 18 text

Azure上に構築すると… 1.User が Static Web Apps にアクセス 2.テスト実行を依頼 3.Azure App Service に hosting されている browser-use が指定したブラウザのテストを実行 4.テスト結果をAI Foundryを使って要約 5.テスト結果を Azure CosmosDB へ保存 6.Static Web Apps よりテスト結果を確認

Slide 19

Slide 19 text

DEMO

Slide 20

Slide 20 text

Browser-useを用いたサーバサイドの動きのDEMO

Slide 21

Slide 21 text

Browser-useを用いたサーバサイドの動きのDEMO

Slide 22

Slide 22 text

Browser-useを用いたサーバサイドの動きのDEMO

Slide 23

Slide 23 text

Application全体の動きのDEMO

Slide 24

Slide 24 text

Browser-useを用いたサーバサイドの動きのDEMO

Slide 25

Slide 25 text

最後にいかがだったでしょうか。  今回はbrowser-useに焦点を当てて発表致しました。  ブラウザのぽちぽちテストは私も経験あるのですが、UIをぽちぽちしてExcelに結果のスクショを貼って…みたいなかなり退屈な作業ですが、ミスると結構怒られるテストでもあります。(懐かしい7年前の新卒時代…)  そのような単純かつ精度が必要な作業をAgentに任せるのもかなり良い作戦の一つだと感じました。  また、UIテストに関わらず、こうした作業をAI Agentが代替してくれるように日々の作業を組み直すことも必要かもしれません。

Slide 26

Slide 26 text

Thank you!!

Slide 27

Slide 27 text

参考資料  https://github.com/browser-use/browser-use  https://github.com/SatakeYusuke19920527/poc-auto-browser-test