MCP сервер Safari: визуальное тестирование рендеринга AI
Гайд · Июль 2026

MCP сервер Safari:
Визуальное тестирование рендеринга через AI-агентов

Apple выпустила Safari Technology Preview 247 со встроенным MCP сервером, который подключает AI-агентов напрямую к браузеру Safari. Теперь агент может видеть, как код реально рендерится — делать скриншоты, инспектировать DOM, отслеживать сетевые запросы и проверять вёрстку.

Олег Максимов 13 июля 2026 12 мин чтения

Что такое MCP сервер Safari?

1 июля 2026 года команда WebKit из Apple выпустила Safari Technology Preview 247 с неожиданным дополнением: MCP сервер Safari — сервер протокола Model Context Protocol (MCP), который открывает полный доступ к окну браузера Safari для AI-агентов кода. Ваш агент получает возможность визуально проверять, как код рендерится в Safari, превращая знакомый цикл «написал код — проверил в браузере — повторил» в единый диалоговый процесс.

Любой MCP-совместимый клиент — Claude Code, Codex CLI, VS Code через GitHub Copilot, Cursor, Zed или Claude Desktop — может подключиться к MCP серверу Safari. После подключения агент получает доступ к 17 инструментам браузера: создание скриншотов, навигация по DOM, выполнение JavaScript, мониторинг сетевых запросов, чтение консоли браузера, изменение размера окна, эмуляция медиа-типов и многое другое.

Это значительный сдвиг. Ранее AI-агенты кода не имели прямой визуальной обратной связи — они могли читать ваш код, но не могли видеть, что он производит в браузере. MCP сервер Safari замыкает этот цикл и становится одним из самых практичных дополнений к экосистеме AI-помощников в веб-разработке в 2026 году.

Почему это важно: замыкание визуального цикла

Если вы создаёте веб-сайты, вы знаете этот танец отладки. Вы замечаете проблему с вёрсткой в браузере. Открываете Web Inspector Safari, чтобы найти причину. Кликаете по панели стилей, находите сломанный CSS, переключаетесь в редактор, исправляете, перезагружаете и проверяете снова. Если исправление не сработало — а это бывает часто — вы повторяете весь цикл.

С AI-агентами этот цикл стал немного лучше: вы могли сделать скриншот, описать проблему и позволить агенту предложить исправление. Но это всё равно требовало ручного создания скриншотов, ручного ввода промптов и ручной проверки. Цикл выглядел так: Браузер → Скриншот → Промпт → Агент → Код → Снова браузер.

MCP сервер Safari сжимает это в один вызов. Ваш агент может:

17 доступных инструментов

MCP сервер Safari предоставляет полный набор инструментов браузера. Вот каждый инструмент и его назначение:

browser_console_messages

Возвращает буферизированные сообщения консоли для текущей или указанной вкладки. Агент может автоматически читать ошибки JavaScript, предупреждения и отладочные выводы.

browser_dialogs

Просмотр и ответ на диалоги браузера — accept, dismiss или ввод текста для JavaScript-промптов. Полезно для тестирования alert/confirm/prompt.

close_tab

Закрыть вкладку браузера по её идентификатору. Очистка после тестов без ручного управления вкладками.

create_tab

Создать новую вкладку, опционально загрузив URL. Агент может открывать несколько страниц для сравнительного тестирования.

evaluate_javascript

Выполнить JavaScript-код на странице и вернуть результат. Проверка состояния страницы, замер производительности или выполнение ассертов удалённо.

get_network_request

Получить полную информацию об одном сетевом запросе — заголовки, тело и тайминги. Отладка API-вызовов и загрузки ресурсов.

get_page_content

Извлечь текстовое содержимое страницы в различных форматах: markdown, HTML, JSON. Агент читает полный рендеренный контент как структурированные данные.

list_network_requests

Список сетевых запросов с URL, методом, статусом и таймингами. Поиск медленных ресурсов, ошибочных API-вызовов или неожиданных редиректов.

list_tabs

Список всех открытых вкладок браузера с их идентификаторами и URL. Управление много-вкладочными сценариями тестирования.

navigate_to_url

Перейти по URL и вернуть содержимое загруженной страницы. Базовый инструмент навигации — агент открывает страницу, читает контент и анализирует его.

page_info

Получить информацию о текущей странице: URL, заголовок и статус загрузки. Быстрая проверка перед глубоким анализом.

page_interactions

Выполнение DOM-взаимодействий последовательно: click, type, scroll, hover, keyPress. Автоматизация многошаговых пользовательских сценариев без написания Playwright-скриптов.

screenshot

Создание скриншота текущей страницы в формате PNG. Ключевой инструмент — агент буквально видит то, что видит пользователь. Баги вёрстки, смещённые элементы, визуальные регрессии — всё обнаружимо.

set_emulated_media

Эмуляция CSS медиа-типа, например print или speech. Тестирование адаптивного поведения и стилей для печати программно.

set_viewport_size

Установка размера окна браузера в CSS-пикселях. Тестирование адаптивного дизайна на любых разрешениях — мобильных, планшетах, десктопах — одной командой.

switch_tab

Переключение на другую вкладку по её идентификатору. Агент может открыть эталонную страницу, переключиться обратно на тестовую и сравнить скриншоты.

wait_for_navigation

Ожидание полной загрузки текущей страницы; возвращает финальный URL и заголовок. Необходимо после отправки форм или SPA-переходов.

Настройка MCP сервера Safari

Предварительные требования

Вам понадобится macOS с Safari Technology Preview 247 или новее. Скачайте с developer.apple.com/safari/technology-preview/. После установки:

  1. Откройте Safari Technology Preview
  2. Перейдите в Safari → Настройки → Дополнения и включите «Показывать функции для веб-разработчиков»
  3. Перейдите в Safari → Настройки → Разработка и включите «Разрешить удалённую автоматизацию и внешние агенты»

В Claude Code

Самая простая настройка — одна команда в терминале:

bash
claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

Это регистрирует MCP сервер Safari в Claude Code под именем safari-mcp-stp. Вы можете назвать его как угодно — хоть просто safari. После добавления Claude автоматически обнаружит и будет использовать инструменты браузера, когда вы попросите его что-то проверить в Safari.

В Codex CLI

Та же команда, другой клиент:

bash
codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

В VS Code, Cursor или Zed (ручная настройка)

Для других MCP-совместимых редакторов добавьте конфигурацию сервера в ваш mcp.json или файл настроек редактора:

mcp.json
{
  "safari-mcp-stp": {
    "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
    "args": ["--mcp"]
  }
}

Для VS Code: добавьте в .vscode/mcp.json.
Для Cursor: добавьте в .cursor/mcp.json в раздел mcpServers.
Для Zed: добавьте в ~/.config/zed/mcp.json.

Практические сценарии

1. Визуальное обнаружение багов

Самый убедительный сценарий: ваш агент автоматически находит проблемы с вёрсткой. Вместо того чтобы описывать проблему агенту словами, агент сам открывает Safari, делает скриншот и определяет проблему: 

«Посмотри мой сайт в Safari и найди проблемы с отображением на странице бронирования»

Агент переходит на страницу, делает скриншот, проверяет консоль на ошибки и возвращает структурированный отчёт с конкретными CSS-исправлениями. Именно такой сценарий Apple продемонстрировала в анонсе: агент нашёл два разных бага (один вёрстка, один JavaScript) и предложил исправления для обоих.

2. Кросс-браузерное тестирование

В сочетании с MCP сервером MDN для данных о браузерной совместимости вы получаете мощный конвейер кросс-браузерного тестирования:

  1. Спросите MDN MCP сервер: «Какие CSS-функции на моей странице имеют проблемы с Safari?»
  2. Скажите Safari MCP серверу: «Открой мою страницу, проверь, корректно ли рендерится функция X»
  3. Агент делает скриншоты, проверяет JavaScript-фичи и сообщает о расхождениях

Этот процесс вылавливает Safari-специфичные CSS-баги до того, как они попадут в продакшен. Движок WebKit отличается от Chromium в тонких, но важных деталях — особенно в таких функциях, как subgrid, :has() и container queries.

3. Анализ производительности

MCP сервер Safari позволяет агенту выполнять JavaScript для извлечения реальных метрик производительности:

Агент: извлечение метрик производительности
// Агент может получить навигационные тайминги
const perfData = performance.getEntriesByType('navigation')[0];
console.log(`DOM Content Loaded: ${perfData.domContentLoadedEventEnd}ms`);
console.log(`Load: ${perfData.loadEventEnd}ms`);

Агент также может найти медленные ресурсы через список сетевых запросов, определить блокирующие рендеринг скрипты и проверить производительность Safari-специфичных CSS-свойств. Это особенно ценно для тестирования на реальном Apple-«железе» — профиль производительности Safari отличается от Chrome из-за разных движков рендеринга.

4. Проверка доступности

Ваш агент может проверить распространённые проблемы доступности прямо в Safari:

Вместо запуска отдельного инструмента аудита вы просто спрашиваете агента: «Насколько доступен мой сайт в Safari?» — и он выполняет проверки автоматически.

5. Проверка многошаговых пользовательских сценариев

Сложные пользовательские сценарии — оформление заказа, регистрация, многошаговые формы — выигрывают от автоматизированного тестирования агентом:

  1. Перейти к началу сценария
  2. Заполнить поля формы через page_interactions
  3. Отправить форму и дождаться навигации
  4. Сделать скриншот на каждом шаге
  5. Проверить состояние страницы и сравнить с ожидаемым результатом

Safari MCP vs MDN MCP: дополняющие инструменты

С появлением и MCP сервера MDN, и MCP сервера Safari стоит понять их различия — и то, как они дополняют друг друга:

Аспект Safari MCP MDN MCP
Что делает Подключается к живому Safari для визуального тестирования Подключается к документации MDN для справочных данных
Результаты Скриншоты, состояние DOM, сетевые логи, вывод консоли Текст документации, таблицы совместимости, статус Baseline
Установка Локальная — требуется Safari TP на вашей машине Удалённый HTTP — локальная установка не нужна
Платформа Только macOS (требуется Safari) Кроссплатформенный (работает везде с интернетом)
Лучше всего для Визуальная регрессия, тестирование вёрстки, отладка в Safari Проверка поддержки браузерами, поиск API, статус Baseline
Конфиденциальность Полностью локально — без сетевых вызовов Анонимизированные данные запросов (экспериментальная фаза)

На практике я использую оба вместе. MDN-сервер говорит мне, поддерживает ли функция Baseline на всех браузерах. Safari-сервер проверяет, корректно ли она рендерится в Safari. Они не конкурируют — они дополняют друг друга.

Конфиденциальность и безопасность

Apple спроектировала MCP сервер Safari с учётом конфиденциальности. Он работает полностью на локальной машине и не совершает собственных сетевых вызовов. У него нет доступа к личным данным Safari — автозаполнению, истории браузера, сохранённым паролям или другим вкладкам. Когда он захватывает содержимое страницы, скриншоты или логи консоли, эти данные передаются напрямую вашему AI-агенту — не Apple.

Что происходит с данными после передачи агенту, зависит от используемого агента и модели. Как и с любым инструментом, дающим агенту доступ к браузеру, используйте только те агенты, которым доверяете. Процесс safaridriver --mcp — стандартный компонент macOS без дополнительных сетевых разрешений.

Начало работы

MCP сервер Safari доступен уже сейчас в Safari Technology Preview 247. Установка занимает около трёх минут:

  1. Скачайте и установите Safari Technology Preview с developer.apple.com
  2. Включите функции разработчика и удалённую автоматизацию в настройках Safari
  3. Выполните: claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
  4. Спросите агента: «Найди баги на моём сайте в Safari»

Агент сделает всё остальное. Никаких сложных промптов, ручных скриншотов или переключения окон. Просто диалоговый процесс отладки, который наконец даёт вашему AI ту визуальную обратную связь, которой ему так не хватало.

Для более глубокого изучения экосистемы MCP посмотрите гайд по MCP серверу MDN — вместе эти два инструмента покрывают документацию и визуальное тестирование в едином рабочем процессе.

FAQ

Что такое MCP сервер Safari?
MCP сервер Safari — это сервер протокола MCP (Model Context Protocol), представленный в Safari Technology Preview 247. Он позволяет AI-агентам подключаться к окну браузера Safari и использовать 17 инструментов: скриншоты, инспекция DOM, выполнение JavaScript, мониторинг сетевых запросов и доступ к консоли.
Как установить MCP сервер Safari?
Установите Safari Technology Preview 247+, включите меню «Разработка» и удалённую автоматизацию в настройках Safari. Затем выполните: claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp. Для других агентов настройте через mcp.json.
Какие инструменты предоставляет MCP сервер Safari?
Сервер предоставляет 17 инструментов: browser_console_messages, browser_dialogs, close_tab, create_tab, evaluate_javascript, get_network_request, get_page_content, list_network_requests, list_tabs, navigate_to_url, page_info, page_interactions, screenshot, set_emulated_media, set_viewport_size, switch_tab и wait_for_navigation.
Чем MCP сервер Safari отличается от MDN MCP сервера?
Safari MCP сервер подключается к живому окну браузера для визуального тестирования — скриншоты, инспекция DOM, мониторинг сети. MDN MCP сервер предоставляет документацию и данные о браузерной совместимости. Они дополняют друг друга: MDN подсказывает, какие браузеры поддерживают функцию, а Safari MCP проверяет, корректно ли она рендерится.
Бесплатен ли MCP сервер Safari?
Да, сервер бесплатен и входит в Safari Technology Preview 247. Он работает полностью на локальной машине, не совершает сетевых вызовов и не имеет доступа к личным данным Safari (автозаполнение, история, пароли).
Работает ли MCP сервер Safari с Claude, Codex и VS Code?
Да, он совместим с любыми MCP-клиентами. Apple предоставляет инструкции для Claude и Codex. Для VS Code, Cursor, Zed или Claude Desktop сервер настраивается через mcp.json с путём к safaridriver и флагом --mcp.
Какие сценарии использования поддерживает MCP сервер Safari?
Основные сценарии: визуальная проверка рендеринга, кросс-браузерное тестирование, анализ производительности, проверка доступности (лейблы, ARIA, контраст), автоматическое тестирование UI-взаимодействий и проверка многошаговых процессов (оформление заказа, регистрация).
Связаться

Обсудим ваш проект

Планируете веб-проект и хотите обсудить правильные инструменты и подход к тестированию? Свяжитесь — бесплатная первая консультация.

[email protected] +375 44 568 20 48