裝完這個，Claude Code 就有眼睛了
Claude Code 能讀程式碼、寫測試、改 bug、查文件。但有一件事它做不到：去看某個網頁現在顯示什麼。
每次你叫它爬某個頁面、確認某個元素、填某個表單，你都要先自己打開瀏覽器，複製內容貼進去，再讓它處理。這個摩擦點不致命，但它每天發生，每次都打斷你的流程。
microsoft/webwright 解決的就是這件事。裝完之後，你的 Claude Code 可以直接開瀏覽器。
Webwright 是什麼
Webwright 是 Microsoft Research 開發的開源瀏覽器 agent 框架，設計理念是「A Terminal Is All You Need For Web Agents」。
它的核心思路非常直接：不要給 LLM 一個遙控器，給它一個終端機。
傳統的瀏覽器 agent 框架大多採取「步驟式控制」——給 LLM 看截圖，讓它告訴你接下來要點哪裡、輸入什麼、滾動多少。這種方式每一步都需要模型做決策，round trip 很多，出錯就要重來。
Webwright 的做法不一樣。它讓 LLM 直接寫 Playwright 腳本和 bash 指令：
- 分析任務需求
- 寫一段 Playwright 程式碼
- 執行，看結果
- 如果出錯，讀錯誤訊息，修腳本
- 重複直到完成
這個模式更接近一個工程師在解決問題的方式，而不是一個機器人在按按鈕。
基準測試數字
在 Odysseys（長程網頁任務基準）上：
- Webwright + GPT-5.4：60.1%
- 前一個 SOTA（Opus 4.6）：44.5%
- 進步幅度：+15.6 個百分點
在 Online-Mind2Web（300 個網頁任務）上：86.7%，是所有開源 harness 裡最高的。
這不是小幅改進，是架構層面帶來的飛躍。
為什麼 code-as-action 比 step-by-step 更有效
兩種方式都能完成任務，但過程完全不同：
步驟式的問題在於每次截圖都是模型的決策起點，資訊密度低、token 消耗高、任何細微的 UI 變化都可能讓整個流程卡住。
code-as-action 的優勢：
錯誤是可讀的。 Playwright 的錯誤訊息很明確——ElementNotFoundError、TimeoutError、selector 失效。LLM 讀錯誤訊息修程式碼，比看一張模糊截圖猜為什麼失敗快得多。
腳本可以重用。 完成任務後，你留下的是一段真正可執行的 Playwright 腳本，而不是一串截圖紀錄。這段腳本下次還能用。
適合長程任務。 Odysseys 測試的是需要多步驟跨頁面的長任務，步驟式 agent 在這種情境下很容易在中途失去狀態，code-as-action 則可以把整個流程寫成一個結構化的腳本。
Task2UI 模式
2026 年 5 月新增的功能：任務完成後，Webwright 會把結果渲染成一個 HTML 報告，你可以直接在瀏覽器裡查看，也可以存下來分享。比如「爬取競品定價頁並整理成表格」這種任務，完成後你拿到的不是一份純文字輸出，而是一個可以互動的 HTML 頁面。
安裝與啟用
前置需求：Node.js 18+，以及已安裝 Claude Code。
Step 1：透過 Claude Code plugin 安裝
/plugin install webwright@webwright
Claude Code 會自動下載並載入 webwright skill。安裝後不需要重啟，指令立刻可用。
Step 2：安裝 Playwright 瀏覽器
npx playwright install chromium
Webwright 預設使用 Chromium，也支援 Firefox 和 WebKit。
Step 3：設定 API key
Webwright 支援 OpenAI、Anthropic、OpenRouter 三個後端。在 Claude Code 環境下，它會自動沿用你的 Anthropic API key，不需要額外設定。
基本用法：
裝完之後，直接在 Claude Code 裡描述你要做的事：
幫我去 https://example.com/pricing 擷取所有方案的名稱和價格，整理成 JSON
Claude Code 會呼叫 Webwright skill，自動開瀏覽器執行，把結果帶回來。
它能幫你做什麼
有了瀏覽器能力，Claude Code 能處理的任務範圍大幅擴展：
競品與市場研究
叫它去爬幾個競品網站的 pricing 頁面、feature 列表、最新公告，整理成對比表格。這類任務以前要花半小時手動複製，現在描述清楚就好。
表單自動化
填報名表、提交申請、登入某個後台確認狀態——只要你能描述步驟，它就能執行。
視覺回歸測試
「去這個 URL 截圖，跟上週的截圖比對，告訴我哪裡有差異。」這種任務對傳統 CI 工具很麻煩，對 Webwright 來說是基本操作。
動態內容擷取
SPA 頁面、需要登入才能看到的內容、JavaScript 動態渲染的資料——這些是傳統爬蟲的死角，Playwright 能原生處理。
工作流自動化
如果你的開發流程有重複性的瀏覽器操作——每次 release 要手動更新某個後台、每週要去某個頁面抓報告——現在可以把這些步驟描述給 Claude Code，讓它寫腳本一次搞定。
想讓開發環境更順手，工具選對了才能省時間。這份 桌面 4 件套開發者選物 整理了機械鍵盤、USB-C Hub、螢幕掛燈的 CP 值組合，適合想整理桌面的工程師參考。
一個工具改變的不只是功能
Webwright 不算複雜，它的原理碼才約 1,500 行。但它把一個關鍵能力帶進了 Claude Code 的工作流：主動去看。
之前的 Claude Code 是一個很強的程式助手，但它的感知範圍只到你貼給它的東西。你是它的眼睛，你看到什麼，它才能處理什麼。Webwright 讓它能自己去看。
這個轉變不只是「多了一個功能」，而是 coding agent 的感知邊界往外推了一步。下一個問題是：當它能自己瀏覽網頁了，你想讓它去做什麼？