Select Page

Stagehand 教學|AI 驅動的瀏覽器自動化神器,TypeScript 與 Python 都支援!

想用 AI 控制網頁自動化,但程式碼又要精準可靠,同時享受自然語言,高效又方便?那你絕不能錯過由 Browserbase 團隊推出的 Stagehand —— 這款專為 AI 時代設計的瀏覽器自動化框架,不僅支援 TypeScript 與 Python、可本地或雲端部署,還比 Browser‑Use 更快、更耐變動!

Stagehand 兼具控制力與智慧的 AI 瀏覽器自動化框架

Stagehand 是以 Playwright 為核心構建的 AI-native 自動化工具,它加入了 LLM 判斷能力,結合程式精準控制與自然語言指令,令自動化腳本更穩定、更智慧也更高效

  • 自然語言 + 程式碼混合操作:你可以用程式寫明確動作,也能用「act(‘點擊第一個 Stagehand 元件’)」這樣類人語法完成UI操作 。
  • 接口完整,支援察看、執行與資料萃取:核心三大命令 actobserveextract,讓操作更透明、更可控
  • 容錯與自恢復能力:UI 略有變動也不怕,Stagehand 的 observe + 快取策略讓腳本更具彈性
  • 完美整合 Playwright:所有 Playwright 腳本都能無縫升級 Stagehand,省心又高效

核心玩法!TypeScript/JavaScript 快速上手範例

// Use Playwright functions on the page object
const page = stagehand.page;
await page.goto("https://github.com/browserbase");

// Use act() to execute individual actions
await page.act("click on the stagehand repo");

// Use Computer Use agents for larger actions
const agent = stagehand.agent({
    provider: "openai",
    model: "computer-use-preview",
});
await agent.execute("Get to the latest PR");

// Use extract() to read data from the page
const { author, title } = await page.extract({
  instruction: "extract the author and title of the PR",
  schema: z.object({
    author: z.string().describe("The username of the PR author"),
    title: z.string().describe("The title of the PR"),
  }),
});

這段程式完整示範了初始化、導航、AI 驅動操作到資料萃取的流程,不僅省事,也大幅提升開發效率。

Stagehand 與 Browser-Use 比較

功能面Stagehand(此文主角)Browser-Use
控制精準度Token 級動作掌控 + 自然語言指令混合攻擊角度偏自然語言,程式控制較弱
容錯能力observe + 快取策略,對 DOM 變化更耐受缺少自恢復機制
雲端支援原生整合 Browserbase,輕鬆雲端部署需額外集成,無預設雲平台支援
語言支援TypeScript / Python主要依賴 Python
AI 整合天生結合 LLM,支援複雜任務拆解依賴外部 LLM,不那麼一體化

只要先學四個指令,快速上手

指定去那一個網頁

goto():

    # 初始化
    page = stagehand.page
    # 指定去那一個頁面
    await page.goto("https://rain.tips/")

使用自然語言操作

act():

    await page.act("點選確定按鈕");

抓取數據資料

extract():

    post = await page.extract("取得標題")

預覽功能

observe():

   links = await page.observe("找到頁面中的所有連結")

實戰快速導覽

安裝

# 用 pip
pip install stagehand python-dotenv

# 安裝playwright
python -m playwright install

# 裝 chromium 瀏覽器
python -m playwright install chromium

建立 .env

export BROWSERBASE_API_KEY="your_browserbase_api_key"
export BROWSERBASE_PROJECT_ID="your_browserbase_project_id"
export MODEL_API_KEY="your_model_api_key"  # OpenAI, Anthropic, etc.

建立程式碼 main.py

import asyncio
import os
from stagehand import Stagehand, StagehandConfig
from dotenv import load_dotenv

load_dotenv()

async def main():
    config = StagehandConfig(
        env="BROWSERBASE",
        api_key=os.getenv("BROWSERBASE_API_KEY"),
        project_id=os.getenv("BROWSERBASE_PROJECT_ID"),
        model_name="gpt-4o",
        model_api_key=os.getenv("MODEL_API_KEY")
    )
    
    stagehand = Stagehand(config)
    
    try:
        await stagehand.init()
        page = stagehand.page
        
        await page.goto("https://docs.stagehand.dev/")
        await page.act("click the quickstart link")
        
        result = await page.extract("extract the main heading of the page")
        
        print(f"Extracted: {result}")
        
    finally:
        await stagehand.close()

if __name__ == "__main__":
    asyncio.run(main())

驗證與測試

python main.py 

若要用本地端的瀏覽器的話,可以改成下面的程式碼

import asyncio
import os
from dotenv import load_dotenv
from stagehand import StagehandConfig, Stagehand

load_dotenv()

async def main():
    # 检查API密钥是否设置
    api_key = os.getenv("OPENAI_API_KEY")

    config = StagehandConfig(
        env="LOCAL",  # 本地运行
        # AI模型配置 - 使用环境变量
        model_name="gpt-4o-mini",  # 使用更便宜的模型
        model_api_key=api_key,  # 从环境变量读取

        # 本地运行配置
        headless=False,  # 显示浏览器窗口
        verbose=3,  # 详细日志
        debug_dom=True,  # DOM调试
    )

    # 使用配置创建Stagehand实例
    stagehand = Stagehand(config)

    # 初始化Stagehand(启动浏览器会话)
    await stagehand.init()

    # 获取页面对象,用于后续的页面操作
    page = stagehand.page

    await page.goto("https://rain.tips/")

    # # 使用observe()取得文章的連結
    blog_links = await page.observe("取得文章中的所有連結)
    print(f"✅ Page link: {blog_links}")

    await page.act(blog_links[0]) 
    data_post_1 = await page.extract("取得文章的標題和內文")
    print(f"✅ 文章資訊如下: {data_post_1}")

if __name__ == "__main__":
    asyncio.run(main())

總結:為什麼 Stagehand 是下一代自動化框架?

  • 語言直覺更自然,人類可理解
  • 對 UI 變化具彈性、不易失效
  • 結合 LLM,自動拆解任務,效率提升數倍
  • 支援本地與雲端,開發與生產環境都得心應手

Stagehand 正重新定義瀏覽器自動化,不再只是死板指令,而是一場「程式控+AI 智能」的完美結合,無論對開發者或 AI 自動化愛好者,都是一大利器。快一起駕馭它,打造更強、更智慧的自動化流程!

參考資料

BrowserBase

GitHub Stagehand

Demo

開發說明文件

https://www.aivi.fyi/aiagents/introduce-stagehand

提升 App 測試效率:UIAutoDev UI定位與 XPath 自動生成指南

提升 App 測試效率:UIAutoDev UI定位與 XPath 自動生成指南

UIAutoDev 是一款不可或缺的工具,它支援 Android 和 iOS 平台,提供直觀的圖形介面,讓開發者能夠輕鬆地定位 UI 元素、生成選擇器,並進行色彩分析。

UIAutoDev UI DEMO

🔧 UIAutoDev 的核心特色

1. 支援 Android 和 iOS 平台

UIAutoDev 同時支援 Android 和 iOS 裝置的 UI 元素檢視與操作。​對於 iOS,用戶需自行啟動 WebDriverAgent(WDA)服務,以實現與裝置的連接。​

2. 直觀的控件選擇與屬性檢視

透過滑鼠點選應用程式中的控件,UIAutoDev 會即時顯示該元素的屬性資訊,如 resource-idtextclass 等,並在控件樹中高亮顯示,方便用戶精確定位。​

3. 自動生成 XPath 選擇器

UIAutoDev 能夠根據選取的控件,自動生成多個 XPath 選擇器,並標示每個選擇器匹配的元素數量,協助用戶選擇最合適的定位方式。​

4. 色彩分析與坐標微調

工具提供找色功能,允許用戶獲取指定位置的 RGB 和 HSB 色值。​同時,透過方向鍵微調坐標,精確定位需要操作的區域,提升自動化腳本的準確性。​


🚀 安裝與使用指南

1. 安裝 Python 環境

確保系統已安裝 Python 3.8 或以上版本。​

2. 安裝 UIAutoDev

在終端機中執行以下命令:

pip install uiautodev

3. 啟動 UIAutoDev

安裝完成後,執行以下命令啟動工具:

python -m uiautodev

啟動後,瀏覽器將自動打開 UIAutoDev 的網頁介面。​

4. 連接裝置

  • Android:​啟用開發者選項並允許 USB 偵錯,使用 USB 或 Wi-Fi 連接裝置。
  • iOS:​啟動 WebDriverAgent(WDA)服務,並確保裝置與電腦在同一網路下。​

5. 使用工具進行 UI 元素定位

  • 在網頁介面中選擇已連接的裝置。
  • 點擊「刷新」按鈕,同步裝置當前畫面。
  • 使用滑鼠點選畫面中的控件,查看其屬性資訊,並在右側控件樹中進行導航。
  • 利用自動生成的 XPath 選擇器,快速編寫自動化腳本。

🧪 實際應用範例

可以先看DEMO

以下是一段使用 uiautomator2 與 UIAutoDev 結合的 Python 腳本範例:

import uiautomator2 as u2

# 連接到裝置
d = u2.connect()

# 啟動應用程式
d.app_start("com.example.app")

# 點擊指定的控件
d(resourceId="com.example.app:id/button").click()

# 輸入文字
d(resourceId="com.example.app:id/input").set_text("測試輸入")

# 關閉應用程式
d.app_stop("com.example.app")

透過 UIAutoDev 提供的控件屬性資訊,您可以輕鬆取得 resource-id 等屬性,快速編寫上述腳本。

參考資料

https://testerhome.com/topics/40069

Nuitka GUI 入門指南:Python 封裝成 exe,小白友善介面快速搞定

Nuitka GUI 入門指南:Python 封裝成 exe,小白友善介面快速搞定

當你在開發 Python 時,將程式轉換為可執行檔案(如 .exe)並提升執行效率是許多開發者關心的議題,Nuitka 是一款大家都推薦的 Python 編譯器,能夠將 Python 原始碼編譯為 C 語言,進而生成高效的可執行檔案​,今天來介紹 Nuitka 的安裝、封裝流程、靜態檔案,與相依套件的處理,以及常見問題與性能優化建議,讓即使是初學者也能輕鬆上手。​

1. 安裝與執行封裝

安裝 Nuitka

  1. 安裝 C++ 編譯器:​Nuitka 需要 C++ 編譯器來編譯生成的 C 程式碼。在 Windows 系統上,推薦安裝 MinGW64。
  2. 安裝 Nuitka:​使用 pip 安裝 Nuitka:

執行封裝

假設您的主程式為 main.py,可以使用以下命令將其封裝為可執行檔案:

nuitka --standalone --mingw64 --enable-plugins=tk-inter --disable-console --remove-output --onefile --output-dir=output main.py

上述命令的參數說明:

  • --standalone:​生成獨立的可執行檔案,包含所有相依套件。​
  • --mingw64:​使用 MinGW64 作為編譯器。
  • --enable-plugins=tk-inter:​啟用 tkinter 插件,根據實際使用的套件啟用相應插件。​
  • --disable-console:​隱藏執行時的控制台視窗,適用於 GUI 應用程式。​
  • --remove-output:​在編譯完成後移除中間產物。​
  • --output-dir=output:​指定輸出目錄為 output
  • –onefile:如果希望輸出為單一 .exe 檔案

如果是要用 Visual Studio C++ 來封裝的話可以改用

nuitka --standalone --msvc=latest --enable-plugins=tk-inter --disable-console --remove-output --output-dir=output main.py

2.靜態檔案的處理

在某些應用中,可能需要包含額外的靜態檔案(如圖片、配置檔案)。​Nuitka 提供了 --include-data-dir 參數來處理這些檔案:

此命令將當前目錄下的 static 資料夾包含到生成的可執行檔案中,並在執行時可正常訪問。

3.相依套件的處理

Nuitka 會自動檢測並包含大多數的相依套件。​然而,對於某些特殊的套件,可能需要手動啟用相應的插件。​例如,若您的程式使用了 PySide6,則需要在編譯時啟用該插件:

您可以使用 nuitka --plugin-list 命令查看所有可用的插件列表。

4.常見問題的處理

Nuitka 在首次編譯大型專案時可能需要較長時間。​為了加快編譯速度,可以安裝 ccache 來進行編譯快取。

由於 Nuitka 會將所有相依套件包含在內,生成的可執行檔案可能較大。​可以嘗試使用 --onefile 參數將所有內容打包成單一檔案,或使用壓縮工具對生成的檔案進行壓縮。

5.關於速度的優化

Nuitka 通過將 Python 程式編譯為 C 語言,通常能提升程式的執行效率。​然而,實際的性能提升取決於程式的結構和內容。​為了獲得最佳性能,建議:​

  • 優化原始碼:​確保程式碼中沒有不必要的計算和冗餘。​
  • 使用內建函數:​盡可能使用 Python 的內建函數,因為它們通常經過高度優化。​
  • 避免過度使用動態特性:​如 evalexec 等,這些可能影響編譯器的優化能力。

6.🌟使用 Nuitka GUI 友善介面

因為既指令很麻煩,推薦使用 Nuitka GUI,這是一款直覺且操作簡單的圖形介面工具。

Nuitka 官方 GUI 安裝:

開啟 Nuitka GUI:

或是用開源的 GUI

https://github.com/271374667/NuitkaGUI

參考資料

https://nuitka.net

OpenTBS:輕量級 PHP 插件,輕鬆生成動態 Office 文件

什麼是 OpenTBS?

OpenTBS(Open Template-Based Substitution)是一個基於 PHP 的插件,允許開發者使用 OpenTBS 在 Office Open XML(如 .docx.xlsx.pptx)以及 OpenDocument 格式(如 .odt.ods.odp)的範本中動態插入數據。它基於 TBS(TinyButStrong)引擎,並提供了一種靈活且易於使用的方法來生成動態文件。

為何選擇 OpenTBS?

  1. 無需額外安裝 Office 軟體:OpenTBS 直接操作 Office 文件格式,無需安裝 Microsoft Office 或 LibreOffice。
  2. 輕量級:僅需一個 PHP 文件,即可輕鬆集成到現有項目。
  3. 模板驅動:允許使用標準的 Office 應用程式來設計範本,無需學習額外的標記語言。
  4. 支持多種格式:可處理 .docx.xlsx.pptx.odt 等格式,適用於多種場景,如報表、合同、發票等。

安裝 OpenTBS

OpenTBS 是一個 PHP 插件,可通過下載或使用 Composer 來安裝。

下載 Zip 檔

  1. 前往 官方網站 下載 tbs_class.phptbs_plugin_opentbs.php
  2. 將這兩個文件放入你的 PHP 項目中。

GitHub

說明文件

DEMO 網站

基本使用方法

以下是使用 OpenTBS 生成 Word(.docx)文件的基本示例。

1. 建立 Word 範本

在 Word (.docx) 文件中,使用 [] 來標記動態數據,例如:

2. 編寫 PHP 代碼

require_once('tbs_class.php');
require_once('tbs_plugin_opentbs.php');

// 創建 TBS 實例
$TBS = new clsTinyButStrong;
$TBS->Plugin(TBS_INSTALL, OPENTBS_PLUGIN);

// 載入範本文件
template = 'template.docx';
$TBS->LoadTemplate($template, OPENTBS_ALREADY_UTF8);

// 設定變數
$data = array(
    'company_name' => 'ABC 公司',
    'date' => date('Y-m-d'),
    'client_name' => '王小明'
);
$TBS->MergeField('var', $data);

// 輸出生成的文件
$output_file = 'output.docx';
$TBS->Show(OPENTBS_DOWNLOAD, $output_file);
exit;

圖片的進階用法

在 Word 模板中設定圖片

打開 Word (.docx) ,選擇一張要被替換的圖片,

設定 TBS 標籤(放入圖片的「替代文字」區域):

選取圖片 → 右鍵 → 圖片格式在「替代文字」欄位輸入以下內容

[img.user_logo;ope=changepic]
pic 是變數名稱,稍後在 PHP 代碼中會用到,這樣 OpenTBS 就知道這張圖片要被替換!

使用 OPENTBS_CHANGE_PICTURE 手動更換圖片

其他參數

要根據原始圖片的框架大小設計的話可以使用

其他 adjust 參數:

參數說明
adjust=inside圖片自動調整以適應框架(推薦
adjust=samewidth圖片的寬度與模板圖片相同
adjust=sameheight圖片的高度與模板圖片相同
adjust=100%圖片維持原始大小

範例

[onshow.pic;ope=changepic;adjust=samewidth;default=current;tagpos=inside]

特殊關鍵字

onshow : 會直接使用php中的同名變數做替換

結論

OpenTBS 是一個強大且輕量的 PHP 插件,能夠讓開發者方便地生成 Word、Excel、PowerPoint 等格式的動態文件,特別適用於報表生成、合約填寫、數據輸出等應用場景,如果你的項目需要動態生成 Office 文檔,可以試試 OpenTBS,它將為你帶來極大的便利!

Google Chrome 擴充功能存放位置(windows、mac、linux)

Google Chrome 擴充功能存放位置(windows、mac、linux)

Google Chrome 擴充功能可以自訂瀏覽體驗並增加額外功能,但他的下載存放路徑藏的非常的深,以下是 Chrome 擴充功能的存放位置的詳細介紹:

Chrome 擴充功能存放位置

Windows 系統:

在 Windows 系統中,Chrome 擴充功能通常存放在以下路徑中:

C:\Users\[你的用戶名稱]\AppData\Local\Google\Chrome\User Data\Default\Extensions\
在這個文件夾中,每個擴充功能都有一個獨特的資料夾,名稱通常是由一串字母和數字組成的 ID。這個 ID 是擴充功能在 Chrome Web Store 的唯一標識。

macOS 系統:

在 macOS 系統中,Chrome 擴充功能的存放位置位於:

~/Library/Application Support/Google/Chrome/Default/Extensions/




與 Windows 系統類似,每個擴充功能都有一個以擴充功能 ID 命名的文件夾。

Linux 系統:

在 Linux 系統中,Chrome 擴充功能的存放位置通常在:

~/.config/google-chrome/Default/Extensions/




每個擴充功能的資料夾名稱也是由擴充功能的 ID 組成。

管理 Chrome 擴充功能

要管理已安裝的擴充功能,可以在 Chrome 瀏覽器中輸入 chrome://extensions/ 並按下 Enter 鍵。這將打開一個頁面,列出所有已安裝的擴充功能,你可以在這裡啟用、禁用或刪除擴充功能,在你打開「開發人員」功能後,可以讀取許多的詳細資訊。

提升內容變現效率,Portaly 助你輕鬆管理金流與粉絲名單

提升內容變現效率,Portaly 助你輕鬆管理金流與粉絲名單

Portaly 一款由台灣團隊「真實引擎」開發的社群微型網站工具,可以協助創作者在數分鐘內建立專屬的 Link-in-Bio 頁面,整合 Facebook、Instagram、YouTube 與 Podcast 等多個平台的連結

主要功能特色:

  1. 高度客製化的頁面設計:Portaly 提供多種佈景主題、配色和版面配置,使用者可以輕鬆打造符合個人品牌風格的頁面。
  2. 多樣化的經營工具:除了基本的連結整合,Portaly 還提供作品展示、商品導購、收集名單等功能,滿足創作者多元的需求。
  3. 銷售變現功能:創作者可以透過 Portaly 銷售數位商品,如線上課程、電子書、模板檔案等,並支援金流串接,協助創作者實現流量變現。
  4. 數據分析與追蹤:平台提供流量數據監控,讓使用者了解頁面訪問情況,進而優化行銷策略。
  5. 支援多語言介面:Portaly 支援繁體中文和英文介面,對中文市場的創作者特別友善。

方案選擇:

Portaly 提供免費的基本方案,讓使用者可以建立功能完善的頁面。若需要更多進階功能,如無限區塊與分頁、自訂主題與配色、自訂網域、E-mail 名單收集等,則可選擇付費的頂級方案。