Playwright – 測試與 AI 代理的瀏覽器自動化

是什麼

Playwright 是由 Microsoft 維護的開源框架，可使用 JavaScript/TypeScript（以及 Python、.NET、Java）控制 Chromium、Firefox 和 WebKit。它主要是一個 Web 自動化與端對端測試 庫，但 README 也強調了特殊工具，使相同的瀏覽器控制可用於 AI 代理（Claude、Copilot 等）。

核心組件

組件	適用對象	取得方式	功能
Playwright Test	QA 工程師、撰寫端對端測試的開發者	npm init playwright@latest 或 npm i -D @playwright/test	支援並行執行、自動等待、內建定位器、追蹤、隔離瀏覽器上下文的測試執行器。
Playwright CLI	需要輕量級命令列介面的編碼助手代理	npm i -g @playwright/cli	簡單命令（open、type、screenshot 等），代理可呼叫而無需載入完整模式。
Playwright MCP	希望獲得確定性、基於模式的瀏覽器控制的 LLM 驅動代理	npx @playwright/mcp@latest（或 VS Code 擴充）	執行 模型上下文協定 伺服器，將頁面作為可存取性樹暴露；代理透過元素參考（e5、e10）進行互動。
Playwright Library	任何撰寫自訂腳本的人——爬蟲、PDF 生成、裝置模擬	npm i playwright	低階 API，用於啟動瀏覽器、導航、截圖、產生 PDF、攔截網路、模擬裝置等。
VS Code 擴充	偏好 IDE UI 的開發者	從市場安裝	用於執行/除錯測試、使用 CodeGen 產生程式碼、選擇定位器和檢視追蹤的 UI。

對 AI/LLM 工作的重要性

• MCP 伺服器 為 LLM 提供頁面的結構化視圖（可存取性樹），使模型無需視覺即可發出精確操作（click e5），避免了傳送完整截圖所導致的 token 膨脹。
• CLI 是一種 token 高效的橋樑：代理可發出簡短命令，CLI 將其轉換為 Playwright 操作。
• 傳統測試與 AI 驅動自動化使用相同的底層瀏覽器引擎，確保一致性。

典型工作流程（測試）

1. 安裝 npm init playwright@latest – 建立包含測試執行器的專案並安裝瀏覽器。
2. 撰寫測試 使用 test 和 expect API。像 page.getByRole('button', {name:'Submit'}) 這樣的定位器對 UI 變更具有韌性。
3. 執行 npx playwright test。測試在不同瀏覽器中並行執行，每個在獨立的上下文中執行。
4. 除錯 使用內建追蹤（trace: 'on-first-retry'）和 Trace Viewer UI。

典型工作流程（LLM 代理）

1. 啟動 MCP npx @playwright/mcp@latest（或安裝 VS Code 伺服器）。
2. 設定代理 指向 MCP 伺服器。
3. 提示 LLM：「導航至 https://demo.playwright.dev/todomvc 並新增三個項目。」
4. 模型接收可存取性快照，選擇元素參考，並將操作發回 MCP，MCP 在真實瀏覽器中執行。

語言與平台

• Node.js（主要）– 上述所有功能。
• Python、.NET、Java – 透過語言特定的繫結提供相同的自動化能力。
• 在 Linux、macOS、Windows 上以無頭或有頭模式執行。

學習更多

• 文件與 API 參考 – https://playwright.dev
• MCP 伺服器倉儲 – https://github.com/microsoft/playwright-mcp
• CLI 倉儲 – https://github.com/microsoft/playwright-cli
• VS Code 擴充 – README 中的市場連結。
• Discord 社群 – https://aka.ms/playwright/discord

---

TL;DR

Playwright 是一個生產級的瀏覽器自動化工具包，支援端對端測試，並透過其 MCP 伺服器與 CLI 為 LLM 驅動的代理提供清晰、結構化的介面，無需視覺模糊即可控制瀏覽器。安裝符合目標的組件，撰寫測試或提示，讓 Playwright 處理驅動 Chromium、Firefox 和 WebKit 的繁重工作。