visualdiff
visualdiff包装了SnapDiff视觉测试API：验证一个UI 改变与你想要做的事情相匹配，区别两页（或一页） 根据存储的基线)，捕获任何URL的屏幕截图，以及 将原始HTML/CSS直接渲染为图像。一个二进制服务于 命令行接口和stdio MCP服务器。
需要API密钥。集 SNAPDIFF_API_KEY 一把钥匙从
SnapDiff仪表板;在发出任何请求之前调用失败
不见了。API基URL可以被覆盖
SNAPDIFF_API_URL;未设置时，呼叫转到
https://api.snapdiff.ai/v1.
安装
npx @reneturcios/visualdiff screenshot https://example.com
或者运行容器镜像：
docker run -i -e SNAPDIFF_API_KEY=sk_live_... ghcr.io/cloudcorprecords/visualdiff
容器默认为MCP服务器（见下文）。通过CLI 参数将其用作CLI。
命令行界面
export SNAPDIFF_API_KEY=sk_live_...
visualdiff verify myproj pricing https://staging.example.com/pricing "added a yearly billing toggle"
visualdiff compare https://staging.example.com --before https://www.example.com
visualdiff compare http://localhost:3000 --project myproj --page-name homepage
visualdiff screenshot https://example.com --width 800 --full-page
visualdiff html-to-image "<h1>Hello</h1>" --css "h1 { color: navy; }" --width 1200 --height 630
visualdiff --version
命令打印上游JSON负载。退出代码: 0 在
成功, 1 当调用失败时（包括丢失API密钥或错误）
上游API错误)， 2 使用错误。
MCP服务器
一个箱子能同时满足两个人的需要。这个 mcp subcommand启动stdio MCP
服务器:
npx -y @reneturcios/visualdiff mcp
MCP客户端配置：
{
"mcpServers": {
"visualdiff": {
"command": "npx",
"args": ["-y", "@reneturcios/visualdiff", "mcp"],
"env": { "SNAPDIFF_API_KEY": "sk_live_..." }
}
}
}
工具
| 工具 | 输入 | 它返回什么 |
|---|---|---|
snapdiff_verify_ui_change | project， page_name， after， intent (所有必需的);可选 intent_regions， branch， threshold， match_tolerance_percent， ignore_selectors， full_page | 判决(pass， expected_change_detected， unexpected_regression， no_change_detected，或者 needs_human_review),一个 next_action，和 review_url． 需要一个具有存储页面基线的项目。 |
snapdiff_compare_pages | after (需要);+ before，或者 project + page_name 对于基线模式；可选 branch， threshold， ignore_selectors， full_page | 差值百分比加上高亮显示的差值图像。 |
snapdiff_capture_screenshot | url (需要);可选 full_page， dark_mode， selector， width | 页面截图。 |
snapdiff_html_to_image | html (需要);可选 css， width， height | 渲染的图像（OG卡、社交图像、电子邮件标题）。 |
每个工具作为POST发送到基础下的每个工具端点 使用API密钥作为承载令牌的URL。可选参数 请求体中完全省略了未提供的。
开发
npm install
npm run build # tsc -> dist/
npm test # node test runner over test/*.test.ts, no network (fake fetch fixtures)
npm run dev # run the CLI from source via tsx
许可证
MIT -见 LICENSE.