ChatGPTやClaudeのAPI経由でブラウザの操作を自動化してくれるツールのbrowser-useが話題なので試してみます。

インストール時のメモから簡単に試すまでです。

Qiitaのオーガナイゼーション正体はAPIがないので手動

APIが欲しいところですし、ブラウザ自動化でいけるにはいけますがbrowser-useの利用お試しがてらやってみます。

準備: Python3のアップデートしないとだけど...

調べるとPythonを利用しているみたいです。が、バージョンが3.11以上じゃないとダメらしいです。

僕は普段Python環境触らないので使う時はGitHub Codespacesなどに立てたりしますが、今回は挙動も見たいのでローカル起動がしたいです。

そして、MacのPythonのアップグレードって結構怖いですよね。

色々なツールでデフォルトで入ってるPythonを参照してたりして壊しちゃう恐れがあります。

現状Python環境を調べる

$ which python3
/usr/bin/python3

$ whidh python3
/usr/bin/pip3

ということで結構深いところにいました。

普段開発でPython使わない勢なのでこの辺触るの怖いなと思い別でPythonを入れておきます。

homebrew経由のPythonにしておくけどusr/local/binではない

/usr/bin/ は触らずにいきます。homebrewでインストールすると usr/local/bin/にインストールされるので多少安全なイメージ... と思ったら間違い。

どうやらusr/local/binはインテルMac時代のものらしいですね。

Apple SiliconなMacは/opt/homebrew/bin/となる模様です。

危ない。。パスは/opt/homebrew/bin/に通します。

$ which python3
/opt/homebrew/bin/python3

$ which pip3
/opt/homebrew/bin/pip3

これで無事にアップグレードできました。
アップグレードというか別物としてインストール。

browser-useを試す

こちらの記事を参考に進めます。

まずは作業フォルダ作成

$ mkdir browser-use-test
$ cd browser-use-test

venvを使って環境作ります。僕の環境だとpython => python3 / pip => pip3に読み替え

$ python3 -m venv .venv
$ source .venv/bin/activate

.venv表記になる

$ pip3 install browser-use
$ playwright install

.envファイルを作成してAPIキーを入れておく

一旦実行するもエラー

一旦Pythonコード実行してみますがChromiumも見つからないなどエラーに。

INFO     [agent] 
📍 Step 1
ERROR    [browser] Failed to initialize Playwright browser: BrowserType.launch: Executable doesn't exist at /Users/nobisuke/Library/Caches/ms-playwright/chromium-1148/chrome-mac/Chromium.app/Contents/MacOS/Chromium
╔════════════════════════════════════════════════════════════╗
║ Looks like Playwright was just installed or updated.       ║
║ Please run the following command to download new browsers: ║
║                                                            ║
║     playwright install                                     ║
║                                                            ║
║ <3 Playwright Team                                         ║
╚════════════════════════════════════════════════════════════╝
WARNING  [browser] Page load failed, continuing...
ERROR    [browser] Failed to initialize Playwright browser: BrowserType.launch: Executable doesn't exist at /Users/nobisuke/Library/Caches/ms-playwright/chromium-1148/chrome-mac/Chromium.app/Contents/MacOS/Chromium
╔════════════════════════════════════════════════════════════╗
║ Looks like Playwright was just installed or updated.       ║
║ Please run the following command to download new browsers: ║
║                                                            ║
║     playwright install                                     ║
║                                                            ║
║ <3 Playwright Team                                         ║
╚════════════════════════════════════════════════════════════╝
ERROR    [agent] ❌ Result failed 1/5 times:
 BrowserType.launch: Executable doesn't exist at /Users/nobisuke/Library/Caches/ms-playwright/chromium-1148/chrome-mac/Chromium.app/Contents/MacOS/Chromium
╔═════════════════════════════════════

どうやらplaywrightがインストールされてないみたいです。

https://playwright.dev/

これは僕の環境だからなのかplaywrightはNode.js経由かPython経由かインストールするとき選べる（?）模様ですね。

npm経由でインストールします。

$ npm init -y && npm install -D @playwright/test && npx playwright install

しっかりChromiumもインストールされてそう

python3 index.py

index.pyは参考にさせていただいた記事にあるコードにしています。

https://qiita.com/Syoitu/items/5aa84b5d8c6047c4d41b

参考記事通り綺麗には取得できなかったけど概ねとれた模様。

「Qiitaのオーガナイゼーションにユーザーを追加」を自動化してみる

さてQiitaのオーガナイゼーションにユーザーを追加してみます。

こんな感じの画面操作

検証1: ログイン -> オーガナイゼーションページへ

予算的に少額で試したいのでgpt-4o-miniを指定
まずはログインページにログインした後にオーガナイゼーションページに遷移させるようにしてみました。

from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio

async def main():
    agent = Agent(
        task="""
あなたはQiitaの監視のエージェントです。
与えられたURLからオーガナイゼーションにユーザーを招待してください。
- Qiitaのログインページ: https://qiita.com/ 
- IoTLTのオーガナイゼーションのユーザー追加ページ: https://qiita.com/organizations/iotlt/settings/members

ログイン情報
- ユーザー名: n0bisuke
- パスワード: hogehoge

オーガナイゼーションに追加してほしいユーザー
- ユーザー名: n0bisuke2
""",
        llm=ChatOpenAI(model="gpt-4o-mini"),
    )
    result = await agent.run()
    print(result)

asyncio.run(main())

まずはこんな感じで書いてみましたが、オーガナイゼーションページに切り替えがうまくいかない感じです。
ログインはすっと出来て感動ありますね。

プロンプトが雑すぎたかもと思いSTEP1,2という感じに指示を出してあげましたが同様にうまくいきませんでした。

あなたはQiitaの監視のエージェントです。
与えられたURLからオーガナイゼーションにユーザーを招待してください。

## 手順
- STEP1: まずはログインしてください。
    - Qiitaのログインページ: https://qiita.com/ 
- STEP2:
    - ログインに成功したら以下のページにアクセスしてください。トップページからは辿りにくいので以下のページに直アクセスをしてください。
    - IoTLTのオーガナイゼーションのユーザー追加ページ: https://qiita.com/organizations/iotlt/settings/members
- STEP3:
    - オーガナイゼーションに追加してほしいユーザーリストからユーザーを招待してください。

## 利用する情報

### ログインするユーザー
- ユーザー名: n0bisuke
- パスワード: hogehoge

### オーガナイゼーションに追加してほしいユーザーリスト
- ユーザー名: n0bisuke2

検証2: 最初からオーガナイゼーションページを指定

これ上手くいきました。ページ遷移がうまくいかなかったので、ログインページを省略してオーガナイゼーションページを指定してみました。また、割と細かい挙動があるので詳細を書いてみました。

最初からオーガナイゼーションページを指定
2-1,2-2と動きを細かく指定

あなたはQiitaの監視のエージェントです。
与えられたURLからオーガナイゼーションにユーザーを招待してください。

## 手順
- STEP1: 
    - まずはこのページにアクセスしてください。 https://qiita.com/organizations/iotlt/settings/members
    - ログインが求められるのでログインしてください
- STEP2:
    - オーガナイゼーションに追加してほしいユーザーリストからユーザーを招待してください。
        - 2-1. フォームにユーザー名を入力して1秒ほど待ちます。
        - 2-2. セレクトボックスに候補が出てくるのでクリックしてください。
        - 2-3. "招待する"ボタンをクリックしてください。
        - 2-4. 1秒ほど待ちます
        - 2-5. "招待中のメンバー"として追加されたことを確認してください。

## 利用する情報

### ログインするユーザー
- ユーザー名: n0bisuke
- パスワード: hogehoge

### オーガナイゼーションに追加してほしいユーザーリスト
- ユーザー名: n0bisuke2

成功時はこちら

無事に招待が出来ていました。

終了条件もしっかり書く

- STEP2:
    - オーガナイゼーションに追加してほしいユーザーリストからユーザーを招待してください。
        - 2-1. フォームにユーザー名を入力して1秒ほど待ちます。
        - 2-2. セレクトボックスに候補が出てくるのでクリックしてください。
        - 2-3. "招待する"ボタンをクリックしてください。

これだと招待が完了する前にプロセスが落ちてしまう時があり、挙動が安定しなかったです。

- STEP2:
    - オーガナイゼーションに追加してほしいユーザーリストからユーザーを招待してください。
        - 2-1. フォームにユーザー名を入力して1秒ほど待ちます。
        - 2-2. セレクトボックスに候補が出てくるのでクリックしてください。
        - 2-3. "招待する"ボタンをクリックしてください。
        - 2-4. 1秒ほど待ちます
        - 2-5. "招待中のメンバー"として追加されたことを確認してください。

2-4,2-5を追記することである程度安定しました。

まとめ

話題のbrowser-useの検証でQiitaのオーガナイゼーション招待自動化試してみました。

puppeteerなどでブラウザの自動化をしたことがある人はイメージがつきやすいかもしれないですが、ここでも 作業のステップを詳細に落とし込むことが重要だなと感じました。

雑な指示でも自分で再確認して再トライしてくれますが、API利用なのでその分お金かかります。

人間側が詳細な指示に落とし込んで作業依頼できれば少ないAPIリクエストで完了してくれるので結局は業務ややりたいことを言語化できる力とセットなんだろうなと感じます。
（札束で殴ることができる人はまた話が違うのかもしれないですが）

おまけ

5回くらい実行しましたがトークンはこれくらいでした。