SeleniumなしでWebDriverを操作するには - GenAI編
はじめに
今回は今までの記事で紹介してきた
Seleniumを使わずにWebDriverを操作する方法
にAIを加える方法を考えてみます。
つまりはAIがブラウザを操作するための方法を考えてみます。
これまでの内容としてWebDriverの仕様や操作方法については以下の記事を参照してください。
- SeleniumなしでWebDriverを操作するには - Part1
- SeleniumなしでWebDriverを操作するには - Part2
- SeleniumなしでWebDriverを操作するには - Part3
ブラウザ操作の基本
ブラウザを操作してくれるAIエージェントを作るためまずはブラウザ操作の基本を確認します。
基本としては以下のような動作があります。
- 取得
- 要素の状態を取得
- ページソースを取得
- 入力
- UIクリック
- テキストを入力
- 出力
- ファイル出力
- ウィンドウ操作
- ウィンドウハンドルを取得
- ウィンドウタイトルを取得
- パース
- HTML
- XML
- JSON
- スクリプトの実行
- JavaScriptの同期実行
- JavaScriptの非同期実行
WebDriverでできる操作もあれば、できない操作もあります。
上記の操作をAIで実現するためには、どのように実装すれば良いか考えてみましょう。
実現方法概略
AIがブラウザを操作するためにはプロンプトからの入力を受け取り
WebDriverを操作するためのコマンドを生成して実行する
あるいはWebDriverの操作をツールとして実行する
のどちらかが考えられます。
WebDriverを操作するためのコマンドを生成して実行する
WebDriverはHTTPプロトコルを利用してブラウザを操作します。HTTPリクエストを発行するときはcurl
コマンドが利用できます。実行方法については以下の記事を参照してください。
つまり、ユーザのプロンプトと実行するコマンドを組み合わせることでAIがブラウザを操作できます。
ただし、この場合はコマンド生成をAIが行い、コマンド実行をユーザが行う必要があります。
AIがコマンドを実行することもやり方次第では可能ですが、コマンドをインジェクションするリスクがあるためセキュリティには注意が必要です。
WebDriverの操作をツールとして実行する
curlでHTTPリクエストを発行することでWebDriverを操作できるため、つまりはリクエストを発行するツールをAIが実行することも可能であると考えられます。
具体的には、Function Callingでリクエストを発行するツールを作成し、AIがそのツールを呼び出すことでブラウザを操作できます。
ここで実行するツールをWebDriverを実行するためのツールとして作成することで、AIがブラウザを操作できるようになります。
補足: Project Marinerについて
今回はWebDriverを操作するためのAIエージェントを作成する方法について考えました。
ここでGoogle DeepMindが開発中のProject Marinerについて説明します。
簡単に説明するとブラウザを操作するAIエージェントを研究・開発するプロジェクトです。
もっと簡単に言うと、プロンプトひとつでAIがブラウザを操作できるようにするプロジェクトです。
本記事では細かく説明しませんが、興味がある方はリンク先を参照してみると良いでしょう。
実際に作成してみた
WebDriverの操作をツールとして実行するAIエージェントを実際に作成してみました。
今回はMVPとして以下の機能を実装しました。
- ブラウザを開く
- ページを開く
実演動画
https://youtu.be/Ai0yE840Dj4?feature=shared
実装については以下のリポジトリを参照してください。
gemini_for_webdriver
実装の説明
今回はシンプルさを優先したためWebDriverを使った実装にしましたが、Seleniumを使った実装も可能です。
※Seleniumのほうが実装が簡単だと思います
ブラウザを開く
ブラウザを開くためにはWebDriverのセッションを作成し、WebDriverへリクエストを送信します。
どのように動かしているかはopen_windowメソッドに実装があります。
どのブラウザを使うかはプロンプトから入力を受け取ります。
ページを開く
次にブラウザを開いた時のセッションIDを使ってページを開きます。
WebDriverへのリクエストについては以下の記事を参照してください。
重要なポイントとしては、セッションIDを使ってリクエストを送信することになるので
セッションIDを前段で取得しておく必要があります。
ブラウザ操作のAIエージェントを実装する
今回はブラウザ操作のAIエージェントをWebDriverで実装しました。
AIエージェントを作成するためには以下のステップが必要です。
- プロンプトを入力する
- Function Callingどのような操作を実行すべきを判断する
- ブラウザを起動するためのメソッドを実行する
- セッションIDを取得する
- セッションIDを使ってリクエストを送信する
これらのステップを実装することでブラウザを操作するためのAIエージェントを作成できます。
次にやること
今回はMVPとしてブラウザを開くという機能を実装しましたが、次にやることとしては以下の機能を実装することが考えられます。
- UIのクリック
- メニューの選択
- テキストの入力
- ページソースの取得
- ウィンドウ操作
ではどのように実装すれば良いか考えてみましょう。
プロンプトでブラウザを操作するための実装
いくつかのアプローチが考えられます。具体的には以下のような方法が考えられます。
- プロンプトで入力を受け取り、対応するメソッドを実行する
- プロンプトで入力を受け取り、対応するJavaScriptを実行する
- Webページの全文を取得・解析し、その内容に応じてメソッドを実行する
あるいは操作をパターン化しておき、入力されたプロンプトに対応する操作を実行するという方法も考えられます。
いずれにしてもAIエージェントがブラウザを操作するためには、プロンプトからの入力を受け取り、その内容に応じて操作を実行する仕組みが必要です。
具体的な実装方法をUIのクリック
を例に考えてみましょう。
UIのクリックをAIエージェントに実行させる
UIのクリックをAIエージェントに実行させるためにはエレメントを特定し、そのエレメントに対してクリックを実行する必要があります。つまりはエレメントの基礎知識が必要です。
エレメントの基礎知識については以下の記事を参照してください。
エレメントを特定するには以下のような特徴を理解する必要があります。
using | keyword |
---|---|
CSS selector | css selector |
Link text selector | link text |
Partial link text selector | partial link text |
Tag name | tag name |
XPath selector | xpath |
これらの特徴を理解することでエレメントを特定し、クリックを実行できます。
この中で一番精度が高いのはXPathだと思いますが、プロンプトに入力された内容に応じて操作するのであれば、
CSS selectorやLink text selectorが適しているかもしれません。
あるいはTag nameを使ってエレメントを特定する方法も考えられますが、Tag nameだけでは特定できない場合もあるため、Tag nameの場合は複合的な方法でエレメントを特定する必要があります。
まとめ
今回はAIがブラウザを操作するための方法について考えてみました。
AIがブラウザを操作するためには、プロンプトからの入力を受け取り、その内容に応じて操作を実行する仕組みが必要です。
今回はMVPとしてブラウザを開くという機能を実装しましたが、次はUIのクリックやテキストの入力などの機能を実装しようと思います。
Discussion