kogiQA MCP Web Browser
官方這是一個網頁瀏覽器，能讓您的編碼代理（例如 Claude Code）代您訪問網站，並協助您識別錯誤或建立 UI 測試案例。
你可以用 Kogi QA Web Browser MCP 做什麼？
- 除錯樣式問題 — 要求代理在特定視窗寬度下檢查頁面，識別版面配置問題，並建議 CSS 修復。
- 自動修正主控台錯誤 — 讓代理瀏覽選單中連結的所有頁面，收集主控台錯誤，並在原始碼中套用修復。
- 繪製並記錄網頁應用程式功能 — 指示代理爬取內部連結至設定的深度，並產出一個 Markdown 文件，描述每個頁面及其功能。
- 產生端到端測試 — 描述一個使用者流程（例如，註冊），並要求代理逐步執行，輸出涵蓋快樂路徑與驗證錯誤的 Cypress 測試。
- 執行探索性測試 — 請求在每個表單上進行限時探索性測試，使用邊界案例輸入，並回報任何損壞或不一致之處。
文件
kogiQA MCP 網頁瀏覽器
一個使用 kogiQA 提供瀏覽器自動化功能的模型上下文協定 (MCP) 伺服器。此伺服器讓大型語言模型能透過自然語言與網頁互動，無需螢幕截圖或視覺調校模型。
適用場景：
- 偵錯頁面上的樣式問題
- 自動修復主控台錯誤
- 繪製並記錄網頁應用程式的功能
- 自動撰寫端對端測試
- 自動化應用程式的探索性測試
請參閱範例提示 使用範例
kogiQA MCP 與 Playwright MCP 的比較
kogiQA MCP 伺服器提供的瀏覽器整合了 kogiQA 瀏覽器控制演算法的功能。這讓代理程式無需選擇器即可與頁面互動，節省時間與 token。
安裝
自動安裝：
npx kogiqa-mcp@latest
Claude Code
claude mcp add kogiqa-browser npx kogiqa-mcp@latest
VS Code
點擊下方任一按鈕，即可直接在 VS Code 中安裝：
或者，透過 VS Code CLI 安裝：
code --add-mcp '{"name":"kogiqa-browser","command":"npx","args":["kogiqa-mcp@latest"]}'
Cursor
或者，前往 Cursor Settings → MCP → Add new MCP Server 並輸入指令npx kogiqa-mcp@latest。
標準設定
對於任何其他 MCP 客戶端，請將以下內容新增至您的 MCP 設定中：
{ "mcpServers": { "kogiqa-browser": { "command": "npx", "args": [ "kogiqa-mcp@latest" ] } } }
使用範例
伺服器設定完成後，只需以自然語言與您的代理程式對話即可。由於 kogiQA 無需選擇器，您只需描述您想完成的任務，而非如何找到元素。
對使用者流程進行煙霧測試
Open http://localhost:3000, log in with the demo credentials, add the first product to the cart, and verify that the cart badge shows "1".
偵錯樣式問題
Go to https://myapp.example.com/pricing and check why the "Pro" plan card overflows its container on a 1280px-wide viewport. Suggest a CSS fix.
修復主控台錯誤
Navigate to http://localhost:5173, open every page linked from the main menu, collect all console errors, and fix them in the source code.
繪製並記錄您的應用程式
Explore https://staging.example.com, follow all internal links up to two levels deep, and produce a Markdown document describing each page and its main features.
生成端對端測試
Walk through the sign-up flow at http://localhost:3000/signup and write Cypress end-to-end tests covering the happy path and validation errors.
探索性測試
Do 10 minutes of exploratory testing on http://localhost:8080: try edge-case inputs in every form you find and report anything that looks broken or inconsistent.
需求
- Node.js 20 或更新版本
- VS Code、Cursor、Windsurf、Claude Desktop、Goose、Junie 或其他 MCP 客戶端