iT邦幫忙

2026 iThome 鐵人賽

DAY 12
0
AI 自動化

測試的前提正在改變:AI 時代下 QA 的思維轉換系列 第 12 篇

[Day12] AI E2E - Browser-use 從零開始介紹與安裝

  • 分享至 

  • xImage
  •  

Browser-use:是一套把 LLM(大型語言模型)接上瀏覽器自動化的 Python 工具。
你不用給它 XPath,只要跟它說「點登入按鈕」,它自己去畫面上找哪個是登入按鈕。


Browser-use 到底做了什麼

傳統自動化,你要手刻 Xpath 找元素位置以及腳本生成撰寫,才能讓自動化成功驅動

Browser-use 則是反過:你告訴它「點登入按鈕」,它自己去畫面上找哪個是登入按鈕並自己執行動作。

當用戶給出測試案例(Prompt)後,他底層大致是這樣執行:

Browser-use 運作流程

  1. 讀取當前頁面的 DOM(網頁的元素結構)與可見元素
  2. 把「你的任務描述」跟「畫面上有什麼」一起丟給 LLM
  3. LLM 決定下一步要對哪個元素做什麼動作
  4. 執行,然後重新看一次畫面,決定再下一步

官方有兩種用法

browser-use 有兩種用法,差別在你是不是要寫程式:

項目 browser-use(程式版) web-ui(圖形介面版)
主要用途 程式化控制 AI 操作瀏覽器 提供圖形介面來使用 AI 操作瀏覽器
技術堆疊 Python、Playwright、LangChain Gradio(前端)+ browser-use 核心(左側)
怎麼用 寫 Python / 下指令 開網頁,把指令填進去就好
適合誰 開發者、要接進 CI 的人 不寫程式的人、想快速驗證想法或做展示

簡單說:左側可以想成是程式底層包,右側就是有漂亮前端可以操作

兩種共同的特點:

  • ✅ 完全不用寫 XPath / CSS selector
  • ✅ 自然語言驅動:「點擊登入按鈕」「輸入帳號」這樣講就好
  • ✅ 具備自我修復能力:找不到元素時,會自己去試別的可能
  • ✅ 用原生瀏覽器環境,貼近真實使用者行為
  • ✅ 支援多種 AI 模型(OpenAI / Gemini / DeepSeek 等)

注意:這套工具讓我驚艷的點在於讓我首次了解 AI「自我修復」的能力之強大


圖形介面版(web-ui)怎麼裝

這條路的好處是:團隊裡不寫程式的人也能自己跑。

Step 1:把官方 Repo 抓下來

git clone https://github.com/browser-use/web-ui.git
cd web-ui

(裝的時候覺得有點久是正常的,底層依賴套件很多)

Step 2:建 Python 環境

官方採用 uv 做 Python 版本控制,免得動到本機原有的設定(注意:只支援 Python 3.11 以上):

uv venv --python 3.11
# Mac / Linux
source .venv/bin/activate

# Windows
.venv\Scripts\activate

Step 3:安裝依賴

uv pip install -r requirements.txt
playwright install --with-deps

Step 4:建環境變數檔

# Mac / Linux
cp .env.example .env

# Windows
copy .env.example .env

Step 5:設定 API Key 與瀏覽器路徑

.env 裡面要指到你本機的 Chrome:

# Mac
BROWSER_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
BROWSER_USER_DATA="/Users/YourUsername/Library/Application Support/Google/Chrome"

# Windows
BROWSER_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"
BROWSER_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"

Step 6:啟動

python webui.py --ip 127.0.0.1 --port 7788

看到下面這個畫面,就表示成功了,點那個 URL 就會直接開啟網頁:

web-ui 啟動成功後顯示本機服務網址的終端機畫面

介面長這樣

browser-use web-ui 圖形化操作介面,左側為設定頁籤、右側為 Agent 執行區

幾個區塊的用途:

區塊 做什麼
Agent Setting AI 的基礎設定(例如選哪個語言模型、設定 System Prompt)
Browser Setting 瀏覽器設定(例如視窗大小)
Run Agent 實際輸入 prompt 的地方
Agent Marketplace 操作多個 AI 代理(例如 OpenAI 跑日常自動化、DeepSeek 處理大量數據)
Load & Save Config 快速切換或共享設定(例如在家用 A Key、在公司用 B Key)

Load & Save Config 這個比想像中實用,設定可以直接丟給同事,他載進去就跟你跑的是同一組環境。


程式版(browser-use)怎麼裝

要接進測試流程、要進 CI,遲早得走這條。

Step 1:建環境(跟上面一樣)

uv venv --python 3.11

# Mac / Linux
source .venv/bin/activate

# Windows
.venv\Scripts\activate

Step 2:裝套件

uv pip install browser-use
uv run playwright install

Step 3:放 API Key

建一個 .env:

OPENAI_API_KEY={你的 OPENAI KEY}

到這裡環境就好了,剩下的就是寫程式。

Step 4:最小可跑的樣子

不需要什麼複雜設定,核心大概就這幾行:

from browser_use import Agent
from langchain_openai import ChatOpenAI
from dotenv import load_dotenv
import asyncio

load_dotenv()

async def main():
    agent = Agent(
        task="打開 google,搜尋「QA 三十天養成日記」,確認搜尋結果有出現列表",
        llm=ChatOpenAI(model="gpt-4o"),
    )
    result = await agent.run()
    print(result)

asyncio.run(main())
python agent.py

跑下去之後,瀏覽器會自己開起來,然後你會看到游標自己動、自己輸入、自己點下去。

恭喜你,到這裡你已經跑完第一支不用寫 selector 的自動化了 🎉


總結

所以回到標題那個問題:QA 要失去自動化技能了嗎?

當然不會!是工作內容會改變。

它雖然把「怎麼點到那顆按鈕」這件事變簡單了,卻同時製造了一個新問題:你要怎麼確定它點對了?

第一個問題以前佔掉我大部分時間,現在幾乎不用管。
第二個問題以前根本不存在,現在變成我最花心力的地方,坑是沒有變少啦,只是換了一種 XD

不過大家還是要擁抱新技術,AI 時代本身就回崛起很多新的工具應用,只要懂的結合新技術的人、團隊,才不會成爲被 AI 取代的那一方


參考來源


上一篇
[Day11] 讓 AI 跑自動化測試,評估 AI E2E 的四大維度
下一篇
[Day13] AI E2E - Browser-use 詳細介紹,底層運作邏輯與常用功能
系列文
測試的前提正在改變:AI 時代下 QA 的思維轉換 共 17 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言