Playwright Spatial Layout MCP

Playwright Spatial Layout MCP

vola-treblaMIT
AI-агенты анализируют DOM и знают, что элемент существует. Но они не видят реальную картину: элемент может уехать за край экрана, перекрыться sticky-шапкой или наложиться на соседний блок при адаптивной вёрстке. Стандартное дерево доступности не даёт ответа — нужна геометрия рендера. Playwright Spatial Layout MCP решает эту проблему. Он запускает браузер Playwright и возвращает агенту реальные координаты, размеры, z-index и пересечения элементов. Разработчики и QA-инженеры получают инструмент для анализа падений тестов на основе геометрии страницы, а не логической структуры DOM.
AI и машинное обучениеБраузерыPlaywright
Подключить MCPОткрыть на GitHub
Подключение

Подключить Playwright Spatial Layout MCP

Выберите способ запуска и свой MCP-клиент. Ниже останется одна готовая инструкция, которую можно проверить и скопировать.

1

Способ подключения

2

Куда подключить

3

Скопируйте и проверьте

Claude Desktop / Claude Code

Клиент запускает MCP-сервер как локальный процесс.

  1. 1.Откройте настройки MCP в Claude.
  2. 2.Добавьте сервер с указанной командой и переменными окружения.
  3. 3.Перезапустите Claude, если сервер не появился автоматически.
json
{
  "mcpServers": {
    "playwright-spatial-layout-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "playwright-spatial-layout-mcp"
      ]
    }
  }
}

Сгенерировано из существующей команды запуска. Желательно сверить с README.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Playwright Spatial Layout MCP

Playwright Spatial Layout MCP относится к AI и машинное обучение, Браузеры, Playwright. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
TypeScript
Транспорт
stdio

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Проверьте команду установки и зависимости перед запуском в рабочем окружении.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 1.

Характеристики

Общее

  • СтатусСообщество
  • Разработчикvola-trebla
  • ЛицензияMIT

Технологии

  • Языки
    TypeScript
  • Транспорт
    stdio

Описание

Возможности

  • extract_bounding_boxes — извлекает координаты (x, y), размеры (width, height), z-index и видимость для CSS-селекторов. Можно указать произвольный viewport, например 375×812 для iPhone.
  • detect_visual_occlusion — проверяет, перекрывает ли один элемент другой. Возвращает коэффициент пересечения (0…1) и площадь наложения в пикселях.
  • verify_spatial_relationships — проверяет правила компоновки: выше (above), ниже (below), левее (left_of), правее (right_of), внутри (contains), не пересекаются (not_overlapping). Возвращает pass/fail с пояснением.
  • Эмуляция устройств — анализ вёрстки на разных разрешениях экрана для поиска мобильных багов.
  • Произвольные CSS-селекторы — указывайте любые селекторы, как в обычном Playwright.
  • Пиксельная точность — оперирует реальными пикселями рендера, а не DOM.
  • Автоматическая установка браузеров — Playwright устанавливается через npx без лишних действий.

Как подключить

Добавьте сервер в конфигурацию MCP-клиента. Для Claude Desktop файл конфигурации — claude_desktop_config.json. Простое объявление npx-команды:

{ "mcpServers": { "playwright-spatial-layout": { "command": "npx", "args": ["-y", "playwright-spatial-layout-mcp"] } } }

Перезапустите клиент. При первом запуске сервер автоматически скачает браузеры Playwright, дополнительная настройка не требуется.

Примеры запросов

  • «Проверь, перекрывает ли cookie-баннер кнопку оформления заказа на мобильном разрешении 375×812. Верни процент перекрытия.»
  • «Извлеки bounding boxes для всех элементов с дата-атрибутом data-testid на странице логина. Покажи, какие из них не попадают в видимую область.»
  • «Проверь пространственные отношения: сайдбар должен располагаться слева от основного контента, а шапка — выше hero-секции. Используй verify_spatial_relationships.»
  • «Найди причину, почему кнопка "Отправить" недоступна для клика. Примени detect_visual_occlusion для кнопки и предполагаемого оверлея.»

Технические детали

  • Язык: TypeScript
  • Транспорт: stdio
  • Лицензия: MIT
  • Разработчик: vola-trebla
  • Совместимость: Любой MCP-клиент (Claude Desktop, VS Code Cline, Continue.dev, Cursor IDE)

Поделиться