SnapVisor MCP

审查视觉回归构建,批准或拒绝截图更改,并管理SnapVisor项目。远程服务器,支持OAuth登录。

托管 MCP 服务器

npx add-mcp 'https://mcp.snapvisor.io/'

可安装到 Claude Code、Codex、Cursor 等客户端

文档

Snapvisor

Canonical: https://snapvisor.io/docs

Snapvisor is a visual testing platform built on an open-source engine. Capture screenshots from your existing test suite, compare them with a baseline, and review changes on your pull requests.

Snapvisor is a visual regression testing platform built on a proven open-source visual-diff engine. It captures screenshots from the test suite you already run — Playwright, Cypress, Puppeteer, Storybook, or any tool that writes image files — compares them against an approved baseline, and posts the result as a status check on your pull request.

Why visual testing [#why-visual-testing]

Unit tests verify logic, not pixels. Visual regressions slip through green suites all the time:

  • Silent layout shifts — a CSS tweak two components away moves your checkout button below the fold.
  • Broken typography — a font fails to load and your headline wraps into the navbar.
  • Responsive regressions — perfect at 1440px, broken at 375px.

Snapvisor surfaces these as reviewable screenshot diffs instead of letting them ship.

Quickstart [#quickstart]

Snapvisor uses the open-source @snapvisor SDKs (drop-in forks of the @argos-ci SDKs) to capture screenshots and upload them for comparison. Follow these steps to create your first build.

1. Create a project and grab your token [#1-create-a-project-and-grab-your-token]

Sign in to the Snapvisor app, create a project, and copy its ARGOS_TOKEN from the project settings. This token authenticates uploads for that one project.

export ARGOS_TOKEN="<your project token>"
Keep the token secret — store it as a CI secret, never commit it. See [Access tokens](/tokens) for the difference between project tokens and personal access tokens.

2. Install an SDK [#2-install-an-sdk]

Install the CLI, plus the adapter for your test runner. Snapvisor has official SDKs for Playwright, Cypress, Puppeteer, Storybook, and a framework-agnostic core.

npm install --save-dev @snapvisor/cli
npm install --save-dev @snapvisor/playwright

3. Capture and upload in CI [#3-capture-and-upload-in-ci]

Run your tests so they write screenshots to a folder, then upload that folder. On a pull request, Snapvisor diffs the upload against the branch baseline and posts a status check with a link to review.

# after your tests have written screenshots to ./screenshots
npx @snapvisor/cli upload ./screenshots
Snapvisor selects an eligible baseline using your base branch and Git history. Approved builds can become the reference for later comparisons.

How it works [#how-it-works]

  1. Capture — your CI uploads screenshots from the Storybook stories, Playwright, or Cypress specs you already run.
  2. Diff — each screenshot is compared against an eligible baseline with a perceptual engine that reduces anti-aliasing and rendering noise.
  3. Review — changes land as a status check on your pull request. Approve the intended ones, reject the regressions. Approved builds become eligible baselines for later comparisons.

Next steps [#next-steps]

At a glance [#at-a-glance]

  • Perceptual pixel diffing with anti-aliasing detection and adjustable thresholds
  • Approve/reject review workflow with per-branch baselines
  • GitHub and GitLab pull-request status checks
  • Parallel testing: shard large suites across machines and review them as one build
  • Slack and email notifications
  • A remote MCP server so AI agents can review your UI
  • Built on an inspectable open-source core; contact support for self-hosting access