browser-useでQiitaオーガナイゼーションへの招待自動化を試す

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

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

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

> ![スクリーンショット 2025-01-04 20.07.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/c2f5db70-28fd-1e4a-8c03-c82f94a64bf9.png)

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

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

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

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

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

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

### 現状Python環境を調べる

```bash
$ which python3
/usr/bin/python3

$ whidh python3
/usr/bin/pip3
```

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

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

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

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

https://zenn.dev/nkzn/articles/brew3-should-install-with-m1-terminal

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

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

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

```bash
$ which python3
/opt/homebrew/bin/python3

$ which pip3
/opt/homebrew/bin/pip3
```

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

## browser-useを試す

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

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

まずは作業フォルダ作成

```bash
$ mkdir browser-use-test
$ cd browser-use-test
```

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

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

> ![スクリーンショット 2025-01-04 18.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/9f15164e-1797-1451-7aad-db532e314eec.png)
> `.venv`表記になる

```bash
$ pip3 install browser-use
$ playwright install
```

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

> ![スクリーンショット 2025-01-04 18.50.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ead60548-4fac-ea15-996e-fa3d618619a1.png)

### 一旦実行するもエラー

一旦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経由かインストールするとき選べる（?）模様ですね。

> ![スクリーンショット 2025-01-04 18.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/236b0ab6-fb9b-6f92-563e-43163296f02e.png)

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

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

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


> ![スクリーンショット 2025-01-04 18.58.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/747345df-190e-1578-4781-b52841d765ec.png)

```bash
python3 index.py
```

`index.py`は[参考にさせていただいた記事](https://qiita.com/Syoitu/items/5aa84b5d8c6047c4d41b)にあるコードにしています。

> https://qiita.com/Syoitu/items/5aa84b5d8c6047c4d41b
> 
> ![スクリーンショット 2025-01-04 19.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cd10ae49-68db-bbe0-726d-7675ca39bc60.png)

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

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

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

> こんな感じの画面操作
> ![スクリーンショット 2025-01-04 20.16.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/3a525316-27f0-5624-a5ca-7700fcd47863.png)

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

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

```py 
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())

```

https://x.com/n0bisuke/status/1875505723427451325

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


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

```md
あなたは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と動きを細かく指定

```py 
あなたは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
```

成功時はこちら

https://x.com/n0bisuke/status/1875507845137092820

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

### 終了条件もしっかり書く

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

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

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

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

## まとめ

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

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

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

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

## おまけ

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

> ![スクリーンショット 2025-01-04 20.56.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/5bb6ad55-3e5b-bdbd-af67-713f8c6c7e54.png)