kogiQA MCP Web Browser
官方这是一个网页浏览器,能让您的编码助手(如Claude Code)代您访问网站,并协助您识别错误或创建UI测试用例。
你可以用 kogiQA Web Browser MCP 做什么?
让您的助手通过自然语言驱动真实浏览器——无需选择器。
- 调试样式问题 — 让助手检查页面并解释元素溢出或错位的原因,然后建议CSS修复方案。
- 修复控制台错误 — 请助手浏览页面、收集控制台错误,并在您的源代码中应用修复。
- 绘制并记录您的应用 — 指示助手探索内部链接,并生成每个页面功能的Markdown概览。
- 生成端到端测试 — 请求覆盖流程正常路径和验证错误的Cypress测试。
- 运行探索性测试 — 让助手在表单中尝试边界输入,并报告异常或不一致的行为。
文档
kogiQA MCP Web Browser
一个基于 Model Context Protocol (MCP) 的服务器,利用 kogiQA 提供浏览器自动化能力。该服务器使 LLM 能够通过自然语言与网页交互,无需截图或视觉调优模型。
用途:
- 调试页面上的样式问题
- 自动修复控制台错误
- 绘制并记录你的 Web 应用的功能
- 自动编写端到端测试
- 自动化应用的探索性测试
参见示例提示 Usage Examples
kogiQA MCP 与 Playwright MCP 的对比
kogiQA MCP Server 提供了一个浏览器,该浏览器融合了 kogiQA 浏览器控制算法的能力。这使得代理无需选择器即可与页面交互,节省时间和令牌。
安装
自动安装:
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 客户端