browser-useでEVE-NGを操作してみた

以前までの検証でbrowser-useを利用すると、様々な自動化を実装出来るがわかりました。そこで今回はEVE-NGを利用したネットワーク環境構築の自動化をやってみたいと思います。

# 前提
EVE-NG：5.0.1-24-Community

# 0. 検証のゴール
あまり多くは望まず、ログイン後にVPC(端末)を追加するところまでとします。またこれを実施するにあたり事前にLabは一つだけ作成しておく事とします。

# 1. EVE-NGの準備
以下PDFの内容を参考に仮想マシンとしてインストールしてください。

https://www.eve-ng.net/index.php/documentation/community-cookbook/

# 2. EVE-NG構成変更

browser-useにてEVE-NGを操作するためには、LAB作成後に表示されるサイドバーを常に表示状態にしておく必要があります。以下CSSを変更してください。

```css:/opt/unetlab/html/themes/default/css/unetlab.css
 337 #lab-sidebar ul {
 338         margin:0;
 339         #padding:0px;                  # コメント
 340         padding:0px 40px;              # 追加
 341         list-style-type: none;
 342         width:30px;
 343         #overflow:hidden;              # コメント
 344         overflow:visible;              # 追加
 345         transition: width 0.2s ease-out;
```

こうすることで、サイドバーの内容が常に表示されます。※キャッシュが残りますので、変更後はキャッシュクリアかシークレットウィンドウで開いて確認しましょう。

**変更前**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/1c41e337-edbc-42a4-a752-3c6db2eab0be.png)


**変更後**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/ba718b54-56e0-4ee3-b374-fdd3d8569512.png)
このように表示されていれば、browser-useでEVE-NGをうまく操作することができます。

# 3. browser-useの実行

今回はプロキシ環境やローカルLLMは使わずにOpenAIを利用します。実行コードは以下の通りです。

```python：eve-browser.py
import asyncio
import os
from browser_use import Agent
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI

load_dotenv()

async def main():
    agent = Agent(
        task="""
        http://10.2.0.71/#/loginにログインして、Usernameにadmin, Passwordにeveとしてログインします。次に、Add an objectをクリックしNodeを選択し、inputボックスに"Virtual PC"を入力し、対象を選択してSaveボタンをクリックします。
        """,
        llm=ChatOpenAI(model="gpt-4o"),
    )
    result = await agent.run()
    print(result)

asyncio.run(main())
```

browser-useに関連する内容は以下記事を参考にしてください。

https://qiita.com/nw-engineer/items/9f42aec98e5f61de9cd2

https://qiita.com/nw-engineer/items/a36c33e6155cae0f56d2



では、Desktop端末から実行してきます。

```bash
python3 eve-browser.py 
```

ブラウザが起動して、eve-ngのページが開きます。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/d3d01134-e514-4702-94a2-fb4c006912e5.jpeg)

つづいて、UsernameとPasswordが入力されます。
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/b11eabfd-9c05-47d7-8b47-8966c501fc37.jpeg)

サイドバーの文字が選択されます。
![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/9a8134d8-48fc-47d5-87bf-7f8e69841f74.jpeg)

指示通り、Nodeが選択されます。
![WS000004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/06659200-1b23-4a46-875e-5f8384876f59.jpeg)


次に追加するノードタイプ画面が開きます。スクロールが必要となる場合、browser-useは正しく判定できなかったので、inputボックスに文字を入力させるよう指示しています。
![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/d8b782d7-12ce-42b4-b595-a7d9e01be4cd.jpeg)

入力された結果、VPC(端末)が表示されます。
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/dd0cc000-d0f2-4784-82b2-2ce529766f5d.jpeg)

ノード追加画面に遷移します。今回はそのままsaveボタンを押す指示を与えていますので、画面が閉じてノード追加されます。
![WS000007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/53605daa-2413-46df-b473-d34541f46c21.jpeg)

かなり見ずらいですが、画面左上にノードが追加されました。無事目的達成です。
![WS000008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/fb5fd429-8c9e-47b5-a689-0c0e3ca7a0d1.jpeg)


# 4. その他
その後、追加したオブジェクトを選択することはできましたが、ノード間の接続まで自動化することは現時点ではできませんでした。ただし、オブジェクト間をケーブル接続した後のポップアップはdiv要素として認識しているのでこの部分の何かしらの作込み（たとえばメニュー化してしまうなど）ができれば、完全自動化まで行けそうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2335933/96fa2c7a-9ffa-42f0-bb8f-18c5e40d399a.png)


完全自動化ができれば、フロント側で要件を渡してbrowser-useで環境生成したあと、生成後の画面を返却することでネットワークデモ自動生成システムができるので、ネットワークエンジニアには喜ばれるかもしれません。