讓 OpenCode 藉助 Playwright CLI 操作當前 Chrome 頁面
整理版優先睇
最近我嘗試了一種比較輕量的瀏覽器自動化方式：不寫完整的 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
最近我嘗試了一種比較輕量的瀏覽器自動化方式：不寫完整的 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 工…
- 讓 OpenCode 藉助 Playwright CLI 操作當前 …
- 讓 OpenCode 藉助 Playwright CLI 操作當前 …
- 讓 OpenCode 藉助 Playwright CLI 操作當前 …
- 讓 OpenCode 藉助 Playwright CLI 操作當前 …
- 讓 OpenCode 藉助 Playwright CLI 操作當前 …
可記低 Workflow
最近我嘗試了一種比較輕量的瀏覽器自動化方式：不寫完整的 Playwright 腳本，也不額外配置 MCP，而是讓 OpenCode 通過終端調用 Playwright CLI，直接讀取當前已經打開的 Chrome 頁面。這個方式適合下面幾類…
內容片段
"C:\Program Files\Google\Chrome\Application\chrome.exe" ^ --remote-debugging-port=9222 ^ --user-data-dir="%TEMP%\chrome-debug"整理版
最近我嘗試了一種比較輕量的瀏覽器自動化方式：不寫完整的 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
最近我試咗一種比較輕量嘅瀏覽器自動化方法：唔寫完整嘅 Playwright 腳本，亦唔額外配置 MCP，而係等 OpenCode 經終端機呼叫 Playwright CLI，直接讀取而家已經開咗嘅 Chrome 頁面。
呢個方式適合以下幾類場景：
想令 AI 分析而家嘅網頁結構； 想令 AI 根據而家嘅頁面生成自動化操作建議； 想重用自己 Chrome 入面嘅登入狀態，例如 B 站、後台系統、管理平台； 唔想每次都新開一個乾淨嘅瀏覽器； 唔想一開波就配置 MCP，只想先用 CLI 行通。
整體流程係：
Chrome 當前頁面
↓
開啓遠程調試
↓
playwright-cli attach
↓
playwright-cli snapshot
↓
opencode 讀取命令輸出並分析頁面
一、安裝 Playwright CLI
Playwright 係微軟維護嘅瀏覽器自動化工具，支援 Chromium、Firefox 同 WebKit，可以用嚟做測試、腳本同 AI Agent 工作流程。官方都有提供 CLI 同相關自動化能力。(Playwright[1])
如果本機未有 Node.js，就要先安裝 Node.js。安裝完成之後，確認命令可以用：
node -v
npm -v
然後安裝 Playwright 相關依賴：
npm i -D @playwright/test
npx playwright install
如果你係用某個獨立嘅 playwright-cli 工具，確認佢係咪已經可以用：
playwright-cli --help
如果命令唔存在，可以 Check 下而家個項目或者全局環境到底裝咗邊個 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 係咪可以連接而家嘅 Chrome
Chrome 設定好之後，喺終端機執行：
playwright-cli attach --cdp=chrome
如果你係用 Edge，就可能係：
playwright-cli attach --cdp=edge
連接成功之後，可以讀取而家頁面嘅快照：
playwright-cli snapshot
snapshot 唔係普通截圖，而係頁面嘅可訪問性結構。佢通常會包含：
頁面標題； 按鈕； 連結； 輸入框； 可以點擊嘅元素； 元素嘅可訪問性名稱。
呢個比普通截圖更適合 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-cli
opencode 係一個可以喺本地終端機運行嘅 AI coding agent。官方文檔都有提供透過安裝腳本或者 npm 安裝嘅方式，例如：(Z.AI[2])
curl -fsSL https://opencode.ai/install | bash
或者：
npm install -g opencode-ai
安裝完成之後，喺項目目錄入面啟動：
opencode
可以直接將下面呢段話 send 俾 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 Port 模式，可以重新啟動一個用嚟除錯嘅 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=chrome
playwright-cli snapshot
playwright-cli screenshot --filename=page.png
playwright-cli evaluate "document.title"
playwright-cli evaluate "location.href"
總結
呢套方案嘅重點唔係「等 AI 打開一個新瀏覽器」，而係等 AI 透過 Playwright CLI 接入你而家已經開咗嘅 Chrome 頁面。
佢嘅優點係：
可以重用而家瀏覽器嘅登入狀態； 唔需要一開始就配置 MCP； 命令可以複製、可以審計、可以重現； 適合等 opencode 分析頁面結構； 後續容易轉成正式 Playwright 自動化腳本。
如果只係想快啲等 AI 睇頁面，CDP 直連都做到；但如果希望過程標準、透明、可重現，playwright-cli + Chrome 遠程調試 + opencode 係一個好實用嘅組合。
Playwright: Fast and reliable end-to-end testing for modern ...: undefined
[2]OpenCode - Overview - Z.AI DEVELOPER DOCUMENT: undefined
最近我嘗試了一種比較輕量的瀏覽器自動化方式：不寫完整的 Playwright 腳本，也不額外配置 MCP，而是讓 OpenCode 通過終端調用 Playwright CLI，直接讀取當前已經打開的 Chrome 頁面。
這個方式適合下面幾類場景：
想讓 AI 分析當前網頁結構； 想讓 AI 根據當前頁面生成自動化操作建議； 想複用自己 Chrome 裏的登錄態，比如 B 站、後台系統、管理平台； 不想每次都新開一個乾淨瀏覽器； 不想上來就配置 MCP，只想先用 CLI 跑通。
整體流程是：
Chrome 當前頁面
↓
開啓遠程調試
↓
playwright-cli attach
↓
playwright-cli snapshot
↓
opencode 讀取命令輸出並分析頁面
一、安裝 Playwright CLI
Playwright 是微軟維護的瀏覽器自動化工具，支持 Chromium、Firefox 和 WebKit，可以用於測試、腳本和 AI Agent 工作流。官方也提供了 CLI 和相關自動化能力。(Playwright[1])
如果本機還沒有 Node.js，需要先安裝 Node.js。安裝完成後，確認命令可用：
node -v
npm -v
然後安裝 Playwright 相關依賴：
npm i -D @playwright/test
npx 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 是否能連接當前 Chrome
Chrome 設置好以後，在終端執行：
playwright-cli attach --cdp=chrome
如果你使用的是 Edge，則可能是：
playwright-cli attach --cdp=edge
連接成功後，可以讀取當前頁面快照：
playwright-cli snapshot
snapshot 不是普通截圖，而是頁面的可訪問性結構。它通常會包含：
頁面標題； 按鈕； 連結； 輸入框； 可點擊元素； 元素的可訪問性名稱。
這比普通截圖更適合 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-cli
opencode 是一個可以在本地終端運行的 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=chrome
playwright-cli snapshot
playwright-cli screenshot --filename=page.png
playwright-cli evaluate "document.title"
playwright-cli evaluate "location.href"
總結
這套方案的重點不是“讓 AI 打開一個新瀏覽器”，而是讓 AI 通過 Playwright CLI 接入你當前已經打開的 Chrome 頁面。
它的優點是：
可以複用當前瀏覽器登錄態； 不需要一開始就配置 MCP； 命令可複製、可審計、可復現； 適合讓 opencode 分析頁面結構； 後續容易轉成正式 Playwright 自動化腳本。
如果只是想快速讓 AI 看頁面，CDP 直連也能做到；但如果希望過程標準、透明、可復現，playwright-cli + Chrome 遠程調試 + opencode 是一個很實用的組合。
Playwright: Fast and reliable end-to-end testing for modern ...: undefined
[2]OpenCode - Overview - Z.AI DEVELOPER DOCUMENT: undefined