閱讀站

最近我嘗試了一種比較輕量的瀏覽器自動化方式：不寫完整的 Playwright 腳本，也不額外配置 MCP，而是讓 OpenCode 通過終端調用 Playwright CLI，直接讀取當前已經打開的 Chrome 頁面。這個方式適合下面幾類場景：想讓 AI 分析當前網頁結構；想讓 AI 根據當前頁面生成自動化操作建議；想複用自己 Chrome 裏的登錄態，比如 B 站、後台系統、管理平台；不想每次都新開一個乾淨瀏覽器；不想上來就配置 MCP，只想先用 CLI 跑通。整體流程是：Chrome 當前頁面 ↓開啓遠程調試 ↓playwright-cli attach ↓playwright-cli snapshot ↓opencode 讀取命令輸出並分析頁面一、安裝 Playwright CLIPlaywright 是微軟維護的瀏覽器自動化工具，支持 Chromium、Firefox 和 WebKit，可以用於測試、腳本和 AI Agent 工作流。官方也提供了 CLI 和相關自動化能力。(Playwright[1])如果本機還沒有 Node.js，需要先安裝 Node.js。安裝完成後，確認命令可用：node -vnpm -v然後安裝 Playwright 相關依賴：npm i -D @playwright/testnpx playwright install如果你使用的是某個獨立的 playwright-cli 工具，確認它是否已經可用：playwright-cli --help如果命令不存在，可以先檢查當前項目或全局環境中到底安裝的是哪個 CLI。有些環境裏是：npx playwright --help有些環境裏才是：playwright-cli --help這一步的目標很簡單：確保終端裏可以執行 Playwright 相關命令，並且 opencode 也能調用這些命令。二、在 Chrome 中開啓當前瀏覽器實例的遠程調試新版 Chrome 可以直接給當前瀏覽器實例開啓遠程調試。在 Chrome 地址欄打開：chrome://inspect/#remote-debugging找到：Allow remote debugging for this browser instance勾選它。開啓後需要重啓Chrome瀏覽器。這個選項的含義是：允許外部工具請求控制當前 Chrome 瀏覽器，包括讀取頁面、Cookie、站點數據，以及導航到其他 URL。因此只建議在可信環境裏臨時開啓，用完之後可以關掉。如果開啓成功，後續工具就有機會連接你當前已經打開的 Chrome 頁面。三、測試 playwright-cli 是否能連接當前 ChromeChrome 設置好以後，在終端執行：playwright-cli attach --cdp=chrome如果你使用的是 Edge，則可能是：playwright-cli attach --cdp=edge連接成功後，可以讀取當前頁面快照：playwright-cli snapshotsnapshot 不是普通截圖，而是頁面的可訪問性結構。它通常會包含：頁面標題；按鈕；連結；輸入框；可點擊元素；元素的可訪問性名稱。這比普通截圖更適合 AI 分析，因為 AI 可以直接看到頁面結構，而不是隻看圖片。如果想保存輸出，方便讓 opencode 分析，可以執行：playwright-cli snapshot > page_snapshot.txt如果想保存截圖，可以執行：playwright-cli screenshot --filename=page.png也可以讀取當前頁面標題或 URL：playwright-cli evaluate "document.title"playwright-cli evaluate "location.href"四、讓 opencode 使用 playwright-cliopencode 是一個可以在本地終端運行的 AI coding agent。官方文檔中也提供了通過安裝腳本或 npm 安裝的方式，例如：(Z.AI[2])curl -fsSL https://opencode.ai/install | bash或者：npm install -g opencode-ai安裝完成後，在項目目錄中啓動：opencode可以直接把下面這段話發給 opencode：分析我當前已經打開的 Chrome 頁面。五、常見問題1. playwright-cli attach --cdp=chrome 失敗怎麼辦？先確認 Chrome 已經開啓：chrome://inspect/#remote-debugging並勾選：Allow remote debugging for this browser instance然後重新執行：playwright-cli attach --cdp=chrome如果仍然失敗，可以讓 opencode 不要繞路，而是先執行：playwright-cli --help確認當前安裝的 CLI 是否真的支持 attach 和 --cdp=chrome。2. 為什麼 http://127.0.0.1:9222/json/version 打不開？因為你使用的是 Chrome 新版“當前瀏覽器實例遠程調試”，它不一定等同於傳統的 --remote-debugging-port=9222 模式。如果你需要傳統 CDP 端口模式，可以重新啓動一個調試用 Chrome："C:\Program Files\Google\Chrome\Application\chrome.exe" ^ --remote-debugging-port=9222 ^ --user-data-dir="%TEMP%\chrome-debug"然後連接：playwright-cli attach --cdp=http://127.0.0.1:9222不過這種方式會打開一個新的用戶目錄，不是你默認 Chrome 的登錄狀態。3. 為什麼不直接用默認用戶目錄啓動 9222？理論上可以，但不推薦。如果默認 Chrome 已經在運行，啓動參數可能不會生效；而且把日常使用的默認用戶目錄直接暴露給遠程調試，有安全風險。更穩妥的做法是使用 Chrome 當前實例的遠程調試能力，或者複製一份調試專用 profile。4. snapshot 和 screenshot 有什麼區別？snapshot 讀取的是頁面結構，比如按鈕、輸入框、連結和標題，適合 AI 分析和自動化操作。screenshot 是截圖，適合查看視覺效果，但不一定能準確知道按鈕和輸入框的可操作名稱。通常建議先用：playwright-cli snapshot必要時再補充：playwright-cli screenshot --filename=page.png六、推薦工作流最終比較順手的工作流是：在 Chrome 中打開目標頁面，比如 B 站、後台系統或業務頁面；進入 chrome://inspect/#remote-debugging；開啓 Allow remote debugging for this browser instance；打開 opencode；要求它只通過 playwright-cli 執行命令；先 attach；再 snapshot；根據頁面結構讓 AI 分析或繼續操作。核心命令如下：playwright-cli attach --cdp=chromeplaywright-cli snapshotplaywright-cli screenshot --filename=page.pngplaywright-cli evaluate "document.title"playwright-cli evaluate "location.href"總結這套方案的重點不是“讓 AI 打開一個新瀏覽器”，而是讓 AI 通過 Playwright CLI 接入你當前已經打開的 Chrome 頁面。它的優點是：可以複用當前瀏覽器登錄態；不需要一開始就配置 MCP；命令可複製、可審計、可復現；適合讓 opencode 分析頁面結構；後續容易轉成正式 Playwright 自動化腳本。如果只是想快速讓 AI 看頁面，CDP 直連也能做到；但如果希望過程標準、透明、可復現，playwright-cli + Chrome 遠程調試 + opencode 是一個很實用的組合。參考資料[1] Playwright: Fast and reliable end-to-end testing for modern ...: undefined[2] OpenCode - Overview - Z.AI DEVELOPER DOCUMENT: undefined

完成