今天介紹 browser-use 🤖
還有另一個 UI 版本 web-ui
這個項目是 AI 透過瀏覽器瀏覽（特別是大型語言模型 LLM，而且是多模態模型）,
然後透過 LLM 模擬人類的動作.
什麼是多模態模型, 指的是不同類型或形式的數據/資訊來源,
像是 文字 📝, 圖片 🖼️, 聲音 🔊 等等. 同時處理多種的能力.
它的運作方式大致如下 ⚙️
接收指令： 你用自然語言描述想要執行的動作（例如：「點擊登入按鈕」、「在搜尋框輸入『天氣』」）。
理解畫面： 它會擷取當前瀏覽器頁面的視覺資訊以及可能的網頁結構資訊。
AI 分析 (LLM)： 將視覺資訊和你的指令一起傳送給多模態的 LLM。LLM 會像人一樣「看懂」畫面上的元素佈局和文字內容，理解你的意圖，並找出對應的操作目標（例如哪個按鈕是「登入」、哪個輸入框是「搜尋框」）。
執行動作： AI 模型決定了要操作的元素和方式後，這個庫會轉換成實際的瀏覽器自動化指令（例如模擬點擊、輸入文字）。
關於速度部份 ⏱️
這種透過視覺畫面反應的方式，通常在執行單一步驟時，會比傳統的自動化方法（例如使用 XPath 或 CSS Selector）來得慢。
主要原因如下：
畫面分析成本： 分析圖像內容比直接透過程式碼（如 DOM 結構）查找元素要複雜得多，需要更多的計算資源。
LLM 推理延遲 ⏳： 將畫面資訊傳送給大型語言模型（通常是雲端服務），等待模型分析並回傳結果，這個過程包含網路延遲和模型本身的運算時間，通常需要數秒鐘。而傳統方法直接在本地端查找元素，速度非常快（毫秒級）。
多步驟決策： LLM 需要理解上下文、視覺佈局和指令意圖，這個「思考」過程比直接按選擇器定位元素要耗時。
不過，雖然單一步驟較慢，但這種方法有其優勢
更強的適應性與穩定性： 傳統方法依賴固定的選擇器（Selectors），一旦網站前端稍微修改，腳本就可能失效。而這種 AI 方法是理解頁面的「語意」和「視覺結構」，即使頁面有小幅變動，只要人類還能辨識，AI 通常也能正確找到目標元素.
更自然的互動方式： 可以用自然語言下指令，降低了編寫自動化腳本的門檻。
處理視覺元素： 對於沒有良好結構或難以用選擇器定位的元素，基於視覺的方法可能更有效。
這邊使用 Python 3.12.3
安裝 browser-use
pip install browser-use如果你要用其他的大語言模型, 像是我使用 GEMINI, 要多安裝
pip install langchain-google-genai其他的 model 設定可參考這邊 examples/models
如果需要記憶功能, 可安裝
pip install "browser-use[memory]"預設會啟用記憶, 如果你安裝了, 不需要記憶就設定 enable_memory=False
agent = Agent(
enable_memory=False,
...
)pip install "browser-use[cli]"記得要設定環境變數
export GOOGLE_API_KEY=xxxx
echo $GOOGLE_API_KEY移除環境變數
unset GOOGLE_API_KEY接著直接執行
browser-use如果你要用其他的 大語言模型, 可參考 examples/models
這裡提供很多, 連 Ollama 簡介 🤖 也有.
安裝 Playwright
playwright install chromium --with-deps --no-shell之前有介紹過 docker-selenium-tutorial, 差異如下
總結對比：
| 特性 | Selenium | Playwright | 主要差異 |
|---|---|---|---|
| 架構 | WebDriver (HTTP, 需 Driver) | WebSocket/Pipe (直連, 管理瀏覽器) | Playwright 連接更直接 |
| 速度/穩定性 | 相對較慢，需手動精確管理等待 | 通常更快、更穩定 (內建自動等待) | Playwright 在這方面優勢明顯 |
| API/易用性 | 強大但可能較冗長 | 現代、直觀、簡潔 | Playwright API 更符合現代開發習慣 |
| 內建功能 | 核心功能為主，進階功能需額外設定 | 功能豐富 (網路、追蹤、多上下文) | Playwright 開箱即用功能多 |
| 設定 | 需管理 Driver 執行檔 | 安裝指令自動下載瀏覽器 | Playwright 設定更簡單 |
| 語言支援 | 極廣泛 | 主流語言 (TS/JS, Py, Java, .NET) | Selenium 支援更多語言 |
| 瀏覽器支援 | 廣泛 (含舊版) | 現代主流瀏覽器 (Chromium, FF, WebKit) | Selenium 支援更廣，Playwright 專注現代 |
| 社群/背景 | 歷史悠久，社群巨大，W3C標準 | 較新，Microsoft 維護，快速成長 | Selenium 基礎更廣，Playwright 發展活躍 |
先來一個簡單的範例 demo.py python3 demo.py
你會發現真的很強, 他有滾動功能, 自己透過網頁去思考, prompt 可參考 prompts.py
這次呼叫自己本地的 chrome 瀏覽器.
解決驗證碼也可以 demo-captcha.py python3 demo-captcha.py
這邊我測試的結果是用越強的 model 正確機率越高
gemini-2.5-pro-preview-05-06 -> 正確機率越高
gemini-2.0-flash-exp -> 正確機率低
如果你想看其他的範例, 可參考 examples
你會發現幾乎可以辦法任何事情.
也可以整合 slack 去呼叫 examples/integrations
這邊不使用帳密登入, 使用 cookie 的方式.
先去下載 Cookie-Editor 擴充套件, 並且匯出為 json, 這邊保存為 twitter_cookies.json,
然後把裡面的 "sameSite" 全都 修改為 "Lax" (不修改會錯誤)
ERROR [agent] ❌ Result failed 1/3 times:
BrowserContext.add_cookies: cookies[9].sameSite: expected one of (Strict|Lax|None)twitter_post_using_cookies.py python3 twitter_post_using_cookies.py
也有整合 streamlit, streamlit_demo.py python3 -m streamlit run streamlit_demo.py
download_file.py 也可以下載檔案
crawler_ptt.py 這個範例有自定義輸出格式.
不需要填入 key, 但是要設定你的 OLLAMA_HOST
文章都是我自己研究內化後原創，如果有幫助到您，也想鼓勵我的話，歡迎請我喝一杯咖啡 😆
綠界科技ECPAY ( 不需註冊會員 )
歐付寶 ( 需註冊會員 )
MIT license