AI Agent 的 Web 技能雙引擎
讓你的 AI Agent 看得懂、做得到、任務完成有回報！
最近在 AI Agent 的討論區裡，常看到 Playwright 跟 Webwright 這兩個字。
它們到底是什麼？是 Skills 技能嗎？有什麼應用情境？又有什麼特別功能？
Playwright 是「控制瀏覽器的自動化工具」，讓 AI Agent 能像人一樣操作網頁。
Webwright 是 Microsoft Research 提出的框架，讓 AI Agent 用終端機寫 Playwright 程式來完成網頁任務。
它們本身不一定等於 Skills，但很常被包裝成 Agent 的「網頁操作技能」。
一個負責「動手操作」，一個負責「動腦規劃」——合起來才是完整的 Web Agent。
控制瀏覽器的自動化工具
由 Microsoft 開發的開源自動化框架，支援多瀏覽器操作。
AI 驅動的瀏覽器任務代理框架
Microsoft Research 提出的創新框架，讓 AI Agent 能理解網頁並完成複雜任務。
Playwright 負責「操作網頁」、Webwright 負責「想與規劃」—— 任務完成，結果更可靠！
你操作，我執行
給它明確的步驟與選擇器，它一步步精準執行。
你說需求，AI 幫你完成
你用自然語言描述目標，AI 自己拆解步驟並寫程式完成。
支援這兩個關鍵詞，AI Agent 在網頁世界裡幾乎所向無敵。
商品價格追蹤、庫存監控
自動填寫、送出與驗證
從網站擷取結構化資料
AI 資料實驗、自動化測試
自動化內部系統與報表生成
以「幫我找出筆電價格最低的商品」為例，Agent 是這樣完成任務的。
「幫我找出 AI 筆電價格最低的商品！」
理解頁面結構與元素位置
規劃步驟並生成程式碼
執行瀏覽器操作完成任務
回傳結果與摘要，任務完成！✅
早上想到要讓 Agent 自動幫我判斷並填寫偵測到的、已定義好的 Google 表單欄位。
剛剛靠 Playwright 加上可隨時再擴充的 profile.json 檔，
已實作成功，超開心！！
{
"姓名": {
"keys": ["姓名", "name"],
"value": "王小明"
},
"信箱": {
"keys": ["信箱", "郵件", "email", "電子郵件"],
"value": "xiaoming@example.com"
},
"學校": {
"keys": ["學校", "單位", "服務", "school", "organization"],
"value": "○○國小"
},
"縣市": {
"keys": ["縣市"],
"value": "桃園市"
},
"職稱": {
"keys": ["職稱", "職位", "職務", "title"],
"value": "教師"
},
"電話": {
"keys": ["電話", "手機", "phone", "mobile"],
"value": "0912-345-678"
},
"心得或建議": {
"keys": ["心得", "建議", "回饋", "想法", "意見", "feedback", "comment"],
"value": "本次研習內容非常充實且實用，講師講解清晰，收穫良多，非常感謝主辦單位的用心安排！"
}
}
💡 原理：表單上每個欄位的標題，會去比對 keys 陣列裡的關鍵字；命中就自動填入對應的 value。
想多填一個欄位？再加一組就好——不用改程式，只改設定檔。
await page.goto(formUrl);
await page.locator('input[name="姓名"]').fill(profile["姓名"].value);
await page.locator('input[name="電子郵件"]').fill(profile["信箱"].value);
await page.locator('button[type="submit"]').click(); // ✅ 表單已送出如果能把長官已決行的電子公文交給 Agent 幫我們點按、自動歸檔…… 成功的話那真的就太爽了。
慢慢點、慢慢按、慢慢填，真的好累啊——
可以自動化、自動好……人生好美妙！！💫
Playwright 讓 AI Agent 能「操作網頁」， Webwright 讓 AI Agent 能「理解並完成任務」。
掌握這兩個關鍵詞，
讓你的 AI Agent 在網頁世界裡所向無敵 🚀