Glance Claude Code 的真实浏览器，支持截图、自动化测试

赋予 AI 真实的浏览器视野

通过 30 个专用 MCP 工具，让 Claude Code 真正看见并操作你的应用。基于 Playwright 构建的 Chromium 浏览器环境，支持从简单的页面导航到复杂的多步骤端到端测试场景。

✨ 核心交互能力

实时视觉反馈 — 截图以 base64 格式直接返回，Claude 看到的是实际渲染的像素画面，而非猜测 DOM 结构
完整可访问性快照 — 将页面结构转换为文本树，包含每个链接、按钮、输入框的标签、角色和状态信息
精准操作控制 — 点击、填写表单、拖拽、悬停、按键输入，支持完整的用户交互模拟
多标签页管理 — 新建、切换、列出和关闭标签页，处理复杂的跨页面工作流

🎯 测试与验证

12 种断言类型 — 包括元素存在性、文本内容、CSS 类、URL 匹配、控制台无错误等验证方式
视觉回归测试 — 像素级截图对比（基于 pixelmatch），自动检测 UI 变化，支持基线管理
会话录制 — 记录完整的测试执行过程，便于回溯和调试
网络监控 — 捕获所有 HTTP 请求和浏览器控制台消息，及时发现失败的 API 调用或 JavaScript 异常

💡 快速开始
在终端运行以下命令添加 Glance 到 Claude Code：

claude mcp add glance -- npx glance-mcp

如需实时观察浏览器窗口（headed 模式）：
claude mcp add glance -e BROWSER_HEADLESS=false -- npx glance-mcp

🛡️ 安全配置

提供三层安全配置文件，适配不同环境需求：

local-dev — 本地开发环境，平衡功能与安全性
restricted — 受限模式，严格的 URL 过滤和执行策略
open — 开放配置，适用于受控的自动化场景

支持通过环境变量自定义行为：BROWSER_HEADLESS（无头模式）、BROWSER_VIEWPORT_WIDTH/HEIGHT（视口尺寸）、BROWSER_TIMEOUT（超时设置）以及 BROWSER_SECURITY_PROFILE（安全级别）。

📊 可靠性数据

在生产环境中已验证运行 300+ 个测试步骤，通过率达 97%。兼容 Claude Code、Cursor、Windsurf、Claude Desktop 及所有支持 MCP 协议的客户端。

🔧 工具概览

涵盖导航类（navigate, go_back, go_forward）、交互类（click, type, hover, drag, fill_form）、观察类（screenshot, snapshot, evaluate）、测试类（assert, scenario_run, visual_compare）以及会话管理类（session_start, session_end, watch_events）等 30 个精细工具。