glance (Debug Base)

Glance

AI-powered browser automation for Claude Code

by DebugBase

Navigate, click, screenshot, test — all from your terminal.

______________________________________________________________________

什么是Glance？

一瞥是 MCP服务器 这给了Claude Code一个真正的浏览器。与其猜测你的网络应用程序是什么样子，克劳德实际上可以 看见 它 互动 有了它，以及 测试 它

You: "Test the login flow on localhost:3000"

Claude: *opens browser* *navigates* *fills form* *clicks submit*
        *takes screenshot* *verifies redirect* *checks for errors*
        "Login flow works. Found 1 console warning about..."

特性

• 30个MCP工具 用于完全控制浏览器
• 内联截图 --Claude看到浏览器看到的内容
• 辅助功能快照 --整页结构为文本
• 测试场景运行器 --用JSON定义多步骤测试
• 12种断言类型 --exists、textContains、urlEquals等
• 会话录制 --记录和回放浏览器会话
• 视觉回归 --像素级屏幕截图比较
• 网络和控制台监控 --捕获错误和失败的请求
• 安全控制 --URL分配列表/拒绝列表、速率限制、JS执行策略
• 头部模式 --实时查看浏览器

快速开始

1.安装

npm install -g glance-mcp

或者直接添加到克劳德代码中：

claude mcp add glance -- npx glance-mcp

2.配置

添加到您的 .mcp.json:

{
  "mcpServers": {
    "glance": {
      "command": "npx",
      "args": ["glance-mcp"],
      "env": {
        "BROWSER_HEADLESS": "false"
      }
    }
  }
}

3.使用

只需让Claude与您的web应用程序进行交互：

"Open localhost:3000 and take a screenshot"
"Test the signup flow with invalid email"
"Check if the pricing page has all three tiers"
"Run a visual regression test on the dashboard"

工具参考

浏览器控件（19个工具）

测试自动化（7个工具）

会话和可视化（4个工具）

测试场景

用JSON定义多步骤测试场景：

{
  "name": "Login Flow",
  "steps": [
    { "name": "Go to login", "action": "navigate", "url": "http://localhost:3000/login" },
    { "name": "Enter email", "action": "type", "selector": "input[type='email']", "value": "user@test.com" },
    { "name": "Enter password", "action": "type", "selector": "input[type='password']", "value": "password123" },
    { "name": "Click submit", "action": "click", "selector": "button[type='submit']" },
    { "name": "Wait for redirect", "action": "sleep", "ms": 2000 },
    { "name": "Verify dashboard", "action": "assert", "type": "urlContains", "expected": "/dashboard" },
    { "name": "Screenshot result", "action": "screenshot", "screenshotName": "post-login" }
  ]
}

断言类型

配置

所有配置都是通过环境变量进行的：

安全配置文件

运作原理

graph LR
    A["Claude Code
(Agent)"] -- "MCP stdio
tools & results" --> B["Glance
(MCP Server)"]
    B -- "Playwright
automation API" --> C["Browser
(Chromium)"]
    C -- "screenshots
DOM snapshots" --> B
    B -- "inline images
a11y trees" --> A

1. Claude Code通过MCP（stdio传输）连接到Glance
2. 克劳德称这些工具为 browser_navigate, browser_screenshot
3. Glance将这些转换为剧作家命令
4. 屏幕截图以base64图像的形式返回——Claude确实看到了页面
5. 可访问性快照为Claude提供了完整的DOM结构文本

实际使用情况

Glance已经在生产应用程序上进行了战斗测试：

• DebugBase （debugbase.io）--12个场景，104个测试步骤，97%的通过率
• GitScribe人工智能 --16个场景，196个测试步骤，96%的通过率

需求

• Node.js 18+
• Playwright兼容浏览器（自动安装）

发展

git clone https://github.com/DebugBase/glance.git
cd glance
npm install
npx playwright install chromium
npm run build
npm start

Claude代码集成

代理人： e2e-tester

Glance附带了用于全面浏览器测试的Claude Code代理定义。代理知道所有30个工具，并遵循结构化的测试工作流程：导航、截图、断言、报告。

You: "Test the entire login flow on localhost:3000"
Agent: Opens browser → navigates → fills forms → clicks → screenshots → asserts → reports

技能： /glance-test

快速E2E测试流道。只需提供一个URL：

/glance-test https://myapp.com

该技能将：

1. 导航到URL
2. 页面截图和快照
3. 发现所有导航链接
4. 用断言测试每个页面
5. 检查控制台是否存在JS错误
6. 生成通过/失败报告

贡献

我们欢迎捐款！请看 贡献.md 作为指导方针。

许可证

麻省理工学院 --建造于 DebugBase