SnapVisor MCP

Xem xét các bản dựng kiểm tra hồi quy hình ảnh, phê duyệt hoặc từ chối các thay đổi ảnh chụp màn hình, và quản lý các dự án SnapVisor. Máy chủ từ xa với đăng nhập OAuth.

Máy chủ MCP được lưu trữ

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

Cài vào Claude Code, Codex, Cursor và nhiều công cụ khác

Tài liệu

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