AIによるビジュアルリグレッションテストの自動化方法

AIがScreenshotOneを使用して、特定の要素やページ全体のスクリーンショットを撮影し、それらをベースラインと比較して視覚的な差異を見つけ出します。この仕組みにより、手動でクリックすることなく、レイアウト崩れやCSSの問題を検知できます。UIのどこに問題があるのか、明確な内訳が提供されます。

1. 01

   UIのキャプチャ

   AIが特定のURLや単一のコンポーネントを対象とし、現在の状態の最新画像を撮影します。

   take_element_screenshottake_full_page_screenshot
2. 02

   変化の分析

   エージェントが撮影した画像を確認し、パディング、フォント、配置などの予期しない変化を探します。

   take_screenshot
3. 03

   状態の比較

   新しい画像とベースラインを比較し、何が変化したのかを正確に特定します。

   take_screenshot
4. 04

   結果の報告

   AIが視覚的な差異を要約し、チャットインターフェース上に提示します。

   take_element_screenshot

ScreenshotOne Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcpコピー

Claude Desktop

以下の手順で数秒で接続できます。

1. 1In Claude Desktop, open Settings → Connectors.
2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
3. 3Click Add and start a new chat — ScreenshotOne capabilities are ready to use.

設定 · claude_desktop_config.jsonコピー

{
  "mcpServers": {
    "screenshotone-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_JUwwYa83yWRRMbOnbxUmQsFRB6tFeXnZOYxfQrXu/mcp"
    }
  }
}

• Claude
• ChatGPT
• Cursor
• VS Code
• Windsurf
• Claude Code
• JetBrains
• Cline

一度の接続でMCPをクライアントに連携できます。認証情報は暗号化されプライバシーが守られます。詳細な機能一覧はコネクターのページで確認できます。

• 01

  AIは検出したCSSのバグを修正できますか？

  いいえ。AIができるのは視覚的な差異の確認と報告のみです。バグを修正するには、手動でコードを編集する必要があります。

• 02

  AIはベースライン画像を自動的に更新しますか？

  いいえ。AIは既存のベースラインとの差異を特定します。変更が意図的なものである場合は、AIにそれを伝えてベースラインを更新させる必要があります。

• 03

  ログインが必要な背後の要素もテストできますか？

  はい。必要なセッションデータを提供するか、提供されたツールを通じてページにアクセスできる場合は可能です。

• 04

  ローカルの開発サーバー上でテストを実行できますか？

  AIがスクリーンショットを撮影できるのは、パブリックに到達可能、またはネットワーク経由でアクセス可能なURLのみです。

• 05

  AIがウェブサイトのファイルを削除することはありませんか？

  ありません。このMCPは視覚データをキャプチャするためのツールのみを提供します。サーバー上のファイルを変更、削除、またはアップロードすることはできません。

• ScreenshotOneについて他に質問がありますか？ ScreenshotOne コネクターの全機能を見る