Tweet
Tweet

Slide 1

Slide 1 text

1 MicrosoftのOSSだけで AIによるブラウザテストを構成する 〜AIによるブラウザテストを実現したい〜 .NETラボ勉強会 2025年1月

Slide 2

Slide 2 text

2 ※1周年おめでとうございます！

Slide 3

Slide 3 text

3 ※私もレビューを書きました。 https://findy-tools.io/products/looker/7/305

Slide 4

Slide 4 text

今日話すこと ● 自己紹介 ● 何をやるか（最初に宣言） ● browser-useの話その他の話 ● AIによるブラウザ操作とは ● Microsoftが提供するOSSだけでAIによるブラウザテストは実装できる説 ● 今回使うOSSの紹介（Prompty、SemanticKernel、Playwright） ● 実現方法の概略 ● 実際に動かしてみよう ● 他の手法（GeminiやAmazon Bedrockで実装する） ● まとめ 4

Slide 5

Slide 5 text

山田顕人（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更新月 ● 家の給湯器が壊れて死ぬかと思った

Slide 6

Slide 6 text

ブラウザを操作するAIエージェントが 流行っているので実際に実装できるか考えてみた。 ※Microsoftの製品やOSSのみで実装する 6

Slide 7

Slide 7 text

ブラウザを操作するAIエージェントの話 7

Slide 8

Slide 8 text

OpenAIからついにキタ！Operator 8 公式サイト：https://openai.com/index/introducing-operator/

Slide 9

Slide 9 text

AnthropicからはComputer use (beta) 9 公式サイ ト:https://docs.anthropic.com/en/docs/build-with-claude/computer-use

Slide 10

Slide 10 text

Google DeepMindからはProject Mariner 10 公式サイト: https://deepmind.google/technologies/project-mariner/

Slide 11

Slide 11 text

browser-useの話 11

Slide 12

Slide 12 text

簡単にいうとAI主導のブラウザテストorブラウザ操作 12 公式サイト：https://docs.browser-use.com/introduction

Slide 13

Slide 13 text

そもそもブラウザテストとブラウザ操作は違うもの？ 13 Webオートメーション ブラウザテスト ブラウザ操作 RPA Playwright E2Eテスト 自動化 「なぜ操作するのか」という目的・モチベーションは異なるが、 技術的には同じWebオートメーションという括りに入る。 MicrosoftでRPAというとPower AutomateあるいはPower Automate Desktopが有名

Slide 14

Slide 14 text

browser-useはどっちのポジション？ 「Enable AI to control your browser 🤖.」とあるのでブラウザ操作（だと思う） 誰がどんな目的で使うかというところでブラウザ操作は大きく意味が変わる。 14 Webオートメーション ブラウザテスト ブラウザ操作 browser-use Playwright E2Eテスト 自動化 たぶんこっちのポジション？

Slide 15

Slide 15 text

補足：ブラウザを操作する技術 旧来よりさまざまな手法が試されてきた。 ● Playwrightを使ったブラウザ操作 ● Seleniumと特定のプログラミング言語を使ったブラウザ操作 ● WebDriverエンドポイントを使ったブラウザ操作 ● VBAとCOMを使ったInternet Explorer（IE）ブラウザの操作 ● UWSCを使ったInternet Explorer（IE）ブラウザの操作 ● Windows32 APIを使ったブラウザ操作 ● ヘッドレス専用のブラウザ（PhantomJSなど）を使ったブラウザ操作 ● Autoitを使ったブラウザ操作 15

Slide 16

Slide 16 text

AIによるブラウザ操作とは 16

Slide 17

Slide 17 text

AIがブラウザを操作するってどう考えたらいいのか？ 17 指示（プロンプト） アクション 受けた指示を元にツールやファンクションの実行を代行する。 Function Calling

Slide 18

Slide 18 text

つまりどういうこと？（1つの考えを述べると） プロンプトの内容を元にFunction Callingを使ってブラウザの操作を実行する 18 指示（プロンプト） アクション Function Calling

Slide 19

Slide 19 text

ブラウザ操作の基本 ● 入力：要素の状態を取得、ページソースを取得 ● 出力：クリック/選択/D&D、テキストを入力（ブラウザにテキストを出力） ● ウィンドウ操作：ウィンドウハンドルを取得、ウィンドウタイトルを取得 ● パース：HTML、XML、JSON ● スクリプトの実行：JavaScriptの同期・非同期実行 19

Slide 20

Slide 20 text

プロンプトからFunction Callingして ツールを実行する。これはもしかして・・・ 20

Slide 21

Slide 21 text

Microsoftが提供するOSSだけで AIによるブラウザテストは実装できる説 21

Slide 22

Slide 22 text

今回使うOSSの紹介 22 Prompty SemanticKernel Playwright

Slide 23

Slide 23 text

23 MicrosoftのOSSだけで実装できるのでは？ Prompty SemanticKernel Playwright

Slide 24

Slide 24 text

Prompty プロンプト管理に特化したOSS YAML形式でAIの設定を記述してAIエージェントの設定として読 み込める。 ※実はjsonでも定義できる 公式サイト：https://prompty.ai/ 2024年のAOAI Dev Day、わいがや会で話題になりました。 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

補足：Promptyに入門したい 26 参考：Promptyに入門したい https://zenn.dev/ymd65536/articles/prompty_get_started_1

Slide 27

Slide 27 text

SemanticKernel ● AIエージェント構築フレームワーク、Enterprise Ready ● LangChain的な立ち位置のフレームワーク 27

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 MicrosoftのOSSだけで実装できるのでは？ ✓ Prompty: AIのプロンプトを管理するOSS ✓ SemanticKernel: AIの呼び出し ✓ Playwright：ブラウザテスト・ブラウザ操作 Prompty SemanticKernel Playwright

Slide 31

Slide 31 text

実現方法の概略 31 で、何をどう作ってどう動かすんだい？

Slide 32

Slide 32 text

プロンプトにテスト内容、Function Callingを使ってブラウザ操作を実行する 簡単に概略 32 指示（プロンプト） ブラウザ操作 Function Calling

Slide 33

Slide 33 text

プロンプトでブラウザの起動を指示 => 特定のブラウザを起動する。 こんな感じ 33 ブラウザを起動して ブラウザを起動 Function Calling

Slide 34

Slide 34 text

プロンプトでクリックの指示 => 画面内のボタンをクリックする。 こんな感じ（もう1つ） 34 ボタンをクリックして 画面内の ボタンをクリック Function Calling

Slide 35

Slide 35 text

簡単に構成を紹介 35 Prompty SemanticKernel Playwright ボタンをクリックして 画面内の ボタンをクリック Function Calling

Slide 36

Slide 36 text

プロンプト ● https://www.google.com/ をMicrosoft Edgeのウィンドウで開く ● 属性はclass,属性値は.gLFyfになっているものを探し、「.NETラボ勉強会」と入 力してください ● セレクタがinput[name='btnK']になっているものを探し、クリックしてください 36

Slide 37

Slide 37 text

実際に動かしてみよう 37 どれくらいのものか見てみるぞい

Slide 38

Slide 38 text

Microsoft Edgeのウィンドウで開く 38

Slide 39

Slide 39 text

「.NETラボ勉強会」と入力してください 39

Slide 40

Slide 40 text

クリックしてください 40

Slide 41

Slide 41 text

デモ 41

Slide 42

Slide 42 text

42 補足：ブラウザAIエージェントの理想系 操作の指示を出すのではなく、より抽象的なタスクができるAIエージェント ユーザーのユースケースを渡しておくから テストして結果をメールちょうだい かしこまりました。

Slide 43

Slide 43 text

フォームにメールアドレスと名前を入力して登録をクリックしてください。 登録した内容をカレンダーにリマインダーとして登録してください。 こんな感じ 43 指示（プロンプト） アクション ツール実行 上記は簡単な例だが、実際にはもっと複雑、アクセス先には必ず認証がある。 つまり、従来のデジタルアイデンティではなく、エージェントにおけるデジタルアイデンティも必要である。

Slide 44

Slide 44 text

補足：AIエージェントの認証認可のフレームワーク 44 引用：https://www.arxiv.org/abs/2501.09674

Slide 45

Slide 45 text

補足：あのOktaがGenAI向けサービスを開発 45 Auth0 AI: https://www.auth0.ai/

Slide 46

Slide 46 text

GeminiやAmazon Bedrockで実装すると 46

Slide 47

Slide 47 text

まずはGeminiについて 参考 ：https://zenn.dev/ymd65536/articles/webdriver_without_selenium_genai 47

Slide 48

Slide 48 text

Vertex AI Geminiを使った場合 ● Vertex AI SDKで簡単に実装できる 1. 関数定義 2. FunctionDeclarationで定義した関数を登録 3. generate_contentでレスポンスを取得 ※実装するんだったらFlash系のモデルがイイ 48

Slide 49

Slide 49 text

Vertex AI Geminiを使った場合 49 関数定義

Slide 50

Slide 50 text

Vertex AI Geminiを使った場合 50 FunctionDeclarationで 定義した関数を登録

Slide 51

Slide 51 text

Vertex AI Geminiを使った場合 51 generate_contentでレスポンスを取得

Slide 52

Slide 52 text

次にAmazon Bedrockについて 参考：https://qiita.com/ymd65536/items/5f747a9a7c9e0deda84d 52

Slide 53

Slide 53 text

Amazon Bedrockを使った場合 ● AWS SDKで簡単に実装できる 1. 関数定義 2. 関数のtoolSpecを作成 3. Converse APIを渡して実行 ※model_Id、プロンプト、toolconfig、inferrence_configが必要 53

Slide 54

Slide 54 text

Amazon Bedrockを使った場合 54 関数定義

Slide 55

Slide 55 text

Amazon Bedrockを使った場合 55 関数のtoolSpecを作成

Slide 56

Slide 56 text

Amazon Bedrockを使った場合 56 Converse APIを渡して実行

Slide 57

Slide 57 text

まとめ ● 昨今話題のツールについて振り返りつつ、AIによるブラウザ操作をおさらいしたYo ● ブラウザ操作について基本を見ながら、実際にデモで確認したYo ● 他のクラウドで実装する方法をみたYo ブラウザを操作するAIエージェントはMicrosoftの技術だけで実装できるYo 57

Slide 58

Slide 58 text

本編の補足資料 58 このスライドへの理解度を高めるための資料だYo

Slide 59

Slide 59 text

AIを使ったブラウザ操作についてはzennで 59 参考：https://zenn.dev/ymd65536/articles/webdriver_without_selenium_genai

Slide 60

Slide 60 text

WebDriverの仕組み 60 ローカルホストに起動したWebDriverに対してリクエストを発行すると。。。。 Edge Chrome EdgeDriver http リクエスト WebDriver ChromeDriver WebDriverがブラウザを操作します。

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

エラー画像集 62 エラーがいくつか出たので紹介していくYo

Slide 63

Slide 63 text

63

Slide 64

Slide 64 text

おわり 64 GitHub@ymd65536 X@ymd65536 LinkedIn@ymd65536 facebook@ymd65536