MicrosoftのOSSだけでAIによるブラウザテストを構成する

.NETラボ 勉強会 2025年1月の登壇資料です。
https://dotnetlab.connpass.com/event/341044/

スライド内のリンク
OpenAIからついにキタ！Operator
https://openai.com/index/introducing-operator/

AnthropicからはComputer use (beta)
https://docs.anthropic.com/en/docs/build-with-claude/computer-use

Google DeepMindからはProject Mariner
https://deepmind.google/technologies/project-mariner/

browser-use
https://docs.browser-use.com/introduction

Prompty
https://prompty.ai/

AOAIDevDay Recap!簡単便利にプロンプト管理できると噂のPromptyをわいがや試す会
https://azure-waigaya.connpass.com/event/326461/

Promptyに入門したい
https://zenn.dev/ymd65536/articles/prompty_get_started_1

SemanticKernel
https://learn.microsoft.com/ja-jp/semantic-kernel/

Fast and reliable end-to-end testing for modern web apps | Playwright .NET https://playwright.dev/dotnet/

Microsoft Playwrightで始めるブラウザテスト https://speakerdeck.com/ymd65536/microsoft-playwrightdeshi-meruburauzatesuto

SeleniumなしでWebDriverを操作するには - GenAI編
https://zenn.dev/ymd65536/articles/webdriver_without_selenium_genai

【AWS】Amazon Bedrockを使ってブラウザをプロンプトだけで操作してみた（bedrock_browser_agentの開発）
https://qiita.com/ymd65536/items/5f747a9a7c9e0deda84d

【VBA】IEモードでHTMLDocument を取得したり操作したりするための関数を書いた
https://qiita.com/ymd65536-ms/items/320f889e9fc35fe375f1

[2501.09674] Authenticated Delegation and Authorized AI Agents
https://www.arxiv.org/abs/2501.09674

Auth0 AI
https://www.auth0.ai/

Transcript

1. 1 MicrosoftのOSSだけで AIによるブラウザテストを構成する 〜AIによるブラウザテストを実現したい〜 .NETラボ勉強会 2025年1月
2. 2 ※1周年おめでとうございます！
3. 3 ※私もレビューを書きました。 https://findy-tools.io/products/looker/7/305
4. 今日話すこと • 自己紹介 • 何をやるか（最初に宣言） • browser-useの話その他の話 • AIによるブラウザ操作とは • Microsoftが提供するOSSだけでAIによるブラウザテストは実装できる説 • 今回使うOSSの紹介（Prompty、SemanticKernel、Playwright） • 実現方法の概略 • 実際に動かしてみよう • 他の手法（GeminiやAmazon Bedrockで実装する） • まとめ 4
5. 山田顕人（Kento.Yamada） @ymd65536 自己紹介 5 仕事：MSP向けシステムの開発（次世代監視基盤の開発、クラウド運用分析） ロール：テックリード・マルチクラウドエンジニア/デベロッパー 活動：.NETラボ勉強会運営、Azure PoC部 Google Cloud Partner Top Engineer 2025 DataAnalytics（2024年〜） Google Cloud Partner Tech Blog Challenge 2023 Cloud AI/ML 部門 LINE API Expert（2024年〜） Microsoft MVP for Developer Technologies（2024年〜） LAPRAS OUTPUT AWARD 2024 01 最近のトピック • .NETラボ勉強会のdiscord、123人！（2025年1月15日） • あと3ヶ月でMVP更新月 • 家の給湯器が壊れて死ぬかと思った
6. ブラウザを操作するAIエージェントが 流行っているので実際に実装できるか考えてみた。 ※Microsoftの製品やOSSのみで実装する 6
7. ブラウザを操作するAIエージェントの話 7
8. OpenAIからついにキタ！Operator 8 公式サイト：https://openai.com/index/introducing-operator/
9. AnthropicからはComputer use (beta) 9 公式サイ ト:https://docs.anthropic.com/en/docs/build-with-claude/computer-use
10. Google DeepMindからはProject Mariner 10 公式サイト: https://deepmind.google/technologies/project-mariner/
11. browser-useの話 11
12. 簡単にいうとAI主導のブラウザテストorブラウザ操作 12 公式サイト：https://docs.browser-use.com/introduction
13. そもそもブラウザテストとブラウザ操作は違うもの？ 13 Webオートメーション ブラウザテスト ブラウザ操作 RPA Playwright E2Eテスト 自動化 「なぜ操作するのか」という目的・モチベーションは異なるが、 技術的には同じWebオートメーションという括りに入る。 MicrosoftでRPAというとPower AutomateあるいはPower Automate Desktopが有名
14. browser-useはどっちのポジション？ 「Enable AI to control your browser 🤖.」とあるのでブラウザ操作（だと思う） 誰がどんな目的で使うかというところでブラウザ操作は大きく意味が変わる。 14 Webオートメーション ブラウザテスト ブラウザ操作 browser-use Playwright E2Eテスト 自動化 たぶんこっちのポジション？
15. 補足：ブラウザを操作する技術 旧来よりさまざまな手法が試されてきた。 • Playwrightを使ったブラウザ操作 • Seleniumと特定のプログラミング言語を使ったブラウザ操作 • WebDriverエンドポイントを使ったブラウザ操作 • VBAとCOMを使ったInternet Explorer（IE）ブラウザの操作 • UWSCを使ったInternet Explorer（IE）ブラウザの操作 • Windows32 APIを使ったブラウザ操作 • ヘッドレス専用のブラウザ（PhantomJSなど）を使ったブラウザ操作 • Autoitを使ったブラウザ操作 15
16. AIによるブラウザ操作とは 16
17. AIがブラウザを操作するってどう考えたらいいのか？ 17 指示（プロンプト） アクション 受けた指示を元にツールやファンクションの実行を代行する。 Function Calling
18. つまりどういうこと？（1つの考えを述べると） プロンプトの内容を元にFunction Callingを使ってブラウザの操作を実行する 18 指示（プロンプト） アクション Function Calling
19. ブラウザ操作の基本 • 入力：要素の状態を取得、ページソースを取得 • 出力：クリック/選択/D&D、テキストを入力（ブラウザにテキストを出力） • ウィンドウ操作：ウィンドウハンドルを取得、ウィンドウタイトルを取得 • パース：HTML、XML、JSON • スクリプトの実行：JavaScriptの同期・非同期実行 19
20. プロンプトからFunction Callingして ツールを実行する。これはもしかして・・・ 20
21. Microsoftが提供するOSSだけで AIによるブラウザテストは実装できる説 21
22. 今回使うOSSの紹介 22 Prompty SemanticKernel Playwright
23. 23 MicrosoftのOSSだけで実装できるのでは？ Prompty SemanticKernel Playwright
24. Prompty プロンプト管理に特化したOSS YAML形式でAIの設定を記述してAIエージェントの設定として読 み込める。 ※実はjsonでも定義できる 公式サイト：https://prompty.ai/ 2024年のAOAI Dev Day、わいがや会で話題になりました。 24
25. 補足：AOAIDevDay Recap!簡単便利にプロンプト管理で きると噂のPromptyをわいがや試す会 25 https://azure-waigaya.connpass.com/event/326461/
26. 補足：Promptyに入門したい 26 参考：Promptyに入門したい https://zenn.dev/ymd65536/articles/prompty_get_started_1
27. SemanticKernel • AIエージェント構築フレームワーク、Enterprise Ready • LangChain的な立ち位置のフレームワーク 27
28. Playwright • Microsoftが中心となって開発 • Webアプリケーション向けテスト自動化フレームワーク（OSS） • Node.js、C#,、Python、Javaに対応 28 引用：Fast and reliable end-to-end testing for modern web apps | Playwright .NET https://playwright.dev/dotnet/
29. 補足：Microsoft Playwrightで始めるブラウザテスト 29 参考：Microsoft Playwrightで始めるブラウザテスト https://speakerdeck.com/ymd65536/microsoft-playwrightdeshi-meruburauzatesuto
30. 30 MicrosoftのOSSだけで実装できるのでは？ ✓ Prompty: AIのプロンプトを管理するOSS ✓ SemanticKernel: AIの呼び出し ✓ Playwright：ブラウザテスト・ブラウザ操作 Prompty SemanticKernel Playwright
31. 実現方法の概略 31 で、何をどう作ってどう動かすんだい？
32. プロンプトにテスト内容、Function Callingを使ってブラウザ操作を実行する 簡単に概略 32 指示（プロンプト） ブラウザ操作 Function Calling
33. プロンプトでブラウザの起動を指示 => 特定のブラウザを起動する。 こんな感じ 33 ブラウザを起動して ブラウザを起動 Function Calling
34. プロンプトでクリックの指示 => 画面内のボタンをクリックする。 こんな感じ（もう1つ） 34 ボタンをクリックして 画面内の ボタンをクリック Function Calling
35. 簡単に構成を紹介 35 Prompty SemanticKernel Playwright ボタンをクリックして 画面内の ボタンをクリック Function Calling
36. プロンプト • https://www.google.com/ をMicrosoft Edgeのウィンドウで開く • 属性はclass,属性値は.gLFyfになっているものを探し、「.NETラボ勉強会」と入 力してください • セレクタがinput[name='btnK']になっているものを探し、クリックしてください 36
37. 実際に動かしてみよう 37 どれくらいのものか見てみるぞい
38. Microsoft Edgeのウィンドウで開く 38
39. 「.NETラボ勉強会」と入力してください 39
40. クリックしてください 40
41. デモ 41
42. 42 補足：ブラウザAIエージェントの理想系 操作の指示を出すのではなく、より抽象的なタスクができるAIエージェント ユーザーのユースケースを渡しておくから テストして結果をメールちょうだい かしこまりました。
43. フォームにメールアドレスと名前を入力して登録をクリックしてください。 登録した内容をカレンダーにリマインダーとして登録してください。 こんな感じ 43 指示（プロンプト） アクション ツール実行 上記は簡単な例だが、実際にはもっと複雑、アクセス先には必ず認証がある。 つまり、従来のデジタルアイデンティではなく、エージェントにおけるデジタルアイデンティも必要である。
44. 補足：AIエージェントの認証認可のフレームワーク 44 引用：https://www.arxiv.org/abs/2501.09674
45. 補足：あのOktaがGenAI向けサービスを開発 45 Auth0 AI: https://www.auth0.ai/
46. GeminiやAmazon Bedrockで実装すると 46
47. まずはGeminiについて 参考 ：https://zenn.dev/ymd65536/articles/webdriver_without_selenium_genai 47
48. Vertex AI Geminiを使った場合 • Vertex AI SDKで簡単に実装できる 1. 関数定義 2. FunctionDeclarationで定義した関数を登録 3. generate_contentでレスポンスを取得 ※実装するんだったらFlash系のモデルがイイ 48
49. Vertex AI Geminiを使った場合 49 関数定義
50. Vertex AI Geminiを使った場合 50 FunctionDeclarationで 定義した関数を登録
51. Vertex AI Geminiを使った場合 51 generate_contentでレスポンスを取得
52. 次にAmazon Bedrockについて 参考：https://qiita.com/ymd65536/items/5f747a9a7c9e0deda84d 52
53. Amazon Bedrockを使った場合 • AWS SDKで簡単に実装できる 1. 関数定義 2. 関数のtoolSpecを作成 3. Converse APIを渡して実行 ※model_Id、プロンプト、toolconfig、inferrence_configが必要 53
54. Amazon Bedrockを使った場合 54 関数定義
55. Amazon Bedrockを使った場合 55 関数のtoolSpecを作成
56. Amazon Bedrockを使った場合 56 Converse APIを渡して実行
57. まとめ • 昨今話題のツールについて振り返りつつ、AIによるブラウザ操作をおさらいしたYo • ブラウザ操作について基本を見ながら、実際にデモで確認したYo • 他のクラウドで実装する方法をみたYo ブラウザを操作するAIエージェントはMicrosoftの技術だけで実装できるYo 57
58. 本編の補足資料 58 このスライドへの理解度を高めるための資料だYo
59. AIを使ったブラウザ操作についてはzennで 59 参考：https://zenn.dev/ymd65536/articles/webdriver_without_selenium_genai
60. WebDriverの仕組み 60 ローカルホストに起動したWebDriverに対してリクエストを発行すると。。。。 Edge Chrome EdgeDriver http リクエスト WebDriver ChromeDriver WebDriverがブラウザを操作します。
61. IEモードでIEのブラウザ操作をVBAで実現する話 61 【VBA】IEモードでHTMLDocument を取得したり操作したりするための関数を書いた https://qiita.com/ymd65536-ms/items/320f889e9fc35fe375f1
62. エラー画像集 62 エラーがいくつか出たので紹介していくYo
64. おわり 64 GitHub@ymd65536 X@ymd65536 LinkedIn@ymd65536 facebook@ymd65536