MCP (Протокол контекста модели)

Что он может делать?

WebdriverIO MCP - это сервер протокола контекста модели (MCP), который позволяет ИИ-ассистентам, таким как Claude Desktop и Claude Code, автоматизировать и взаимодействовать с веб-браузерами и мобильными приложениями.

Почему WebdriverIO MCP?

• Ориентирован на мобильные устройства: В отличие от серверов MCP только для браузеров, WebdriverIO MCP поддерживает автоматизацию нативных приложений iOS и Android через Appium
• Кросс-платформенные селекторы: Умное обнаружение элементов автоматически генерирует несколько стратегий локаторов (accessibility ID, XPath, UiAutomator, iOS predicates)
• Экосистема WebdriverIO: Построен на проверенном фреймворке WebdriverIO с его богатой экосистемой сервисов и репортеров

Он обеспечивает единый интерфейс для:

• 🖥️ Настольных браузеров (Chrome - в режиме с графическим интерфейсом или headless)
• 📱 Нативных мобильных приложений (Симуляторы iOS / Эмуляторы Android / Реальные устройства через Appium)
• 📳 Гибридных мобильных приложений (переключение между нативным контекстом и WebView через Appium)

через пакет @wdio/mcp.

Это позволяет ИИ-ассистентам:

• Запускать и управлять браузерами с настраиваемыми размерами, режимом headless и опциональной начальной навигацией
• Переходить по веб-сайтам и взаимодействовать с элементами (клик, ввод текста, прокрутка)
• Анализировать содержимое страницы через дерево доступности и обнаружение видимых элементов с поддержкой пагинации
• Делать скриншоты, автоматически оптимизированные (изменение размера, сжатие до макс. 1МБ)
• Управлять cookies для обработки сессий
• Управлять мобильными устройствами, включая жесты (нажатие, свайп, перетаскивание)
• Переключать контексты в гибридных приложениях между нативным и webview
• Выполнять скрипты - JavaScript в браузерах, мобильные команды Appium на устройствах
• Работать с функциями устройств, такими как поворот, клавиатура, геолокация
• и многое другое, смотрите Инструменты и Конфигурацию

информация

ПРИМЕЧАНИЕ для мобильных приложений Мобильная автоматизация требует запущенного сервера Appium с установленными соответствующими драйверами. См. Предварительные требования для инструкций по настройке.

Установка

Самый простой способ использовать @wdio/mcp - через npx без локальной установки:

npx @wdio/mcp

Или установите его глобально:

npm install -g @wdio/mcp

Использование с Claude

Для использования WebdriverIO MCP с Claude, измените конфигурационный файл:

{
    "mcpServers": {
        "wdio-mcp": {
            "command": "npx",
            "args": ["-y", "@wdio/mcp"]
        }
    }
}

После добавления конфигурации перезапустите Claude. Инструменты WebdriverIO MCP будут доступны для автоматизации браузера и мобильных устройств.

Использование с Claude Code

Claude Code автоматически определяет серверы MCP. Вы можете настроить его в .claude/settings.json вашего проекта или в .mcp.json.

Или добавьте его глобально в .claude.json, выполнив:

claude mcp add --transport stdio wdio-mcp -- npx -y @wdio/mcp

Проверьте его, запустив команду /mcp внутри Claude Code.

Примеры быстрого старта

Автоматизация браузера

Попросите Claude автоматизировать задачи в браузере:

"Открой Chrome и перейди на https://webdriver.io"
"Нажми на кнопку 'Get Started'"
"Сделай скриншот страницы"
"Найди все видимые ссылки на странице"

Автоматизация мобильных приложений

Попросите Claude автоматизировать мобильные приложения:

"Запусти мое iOS приложение на симуляторе iPhone 15"
"Нажми на кнопку входа"
"Сделай свайп вверх для прокрутки вниз"
"Сделай скриншот текущего экрана"

Возможности

Автоматизация браузера (Chrome)

Функция	Описание
Управление сессией	Запуск Chrome в режиме с графическим интерфейсом/headless с настраиваемыми размерами и опциональным URL для навигации
Навигация	Переход по URL
Взаимодействие с элементами	Клик по элементам, ввод текста, поиск элементов по различным селекторам
Анализ страницы	Получение видимых элементов (с пагинацией), дерево доступности (с фильтрацией)
Скриншоты	Захват скриншотов (автоматически оптимизированных до макс. 1МБ)
Прокрутка	Прокрутка вверх/вниз на настраиваемое количество пикселей
Управление cookies	Получение, установка и удаление cookies
Выполнение скриптов	Выполнение пользовательского JavaScript в контексте браузера

Автоматизация мобильных приложений (iOS/Android)

Функция	Описание
Управление сессией	Запуск приложений на симуляторах, эмуляторах или реальных устройствах
Сенсорные жесты	Нажатие, свайп, перетаскивание
Обнаружение элементов	Умное обнаружение элементов с несколькими стратегиями локаторов и пагинацией
Жизненный цикл приложения	Получение состояния приложения (через execute_script для активации/завершения)
Переключение контекста	Переключение между нативным контекстом и webview в гибридных приложениях
Управление устройством	Поворот устройства, управление клавиатурой
Геолокация	Получение и установка GPS-координат устройства
Разрешения	Автоматическая обработка разрешений и оповещений
Выполнение скриптов	Выполнение мобильных команд Appium (pressKey, deepLink, shell и т.д.)

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

Автоматизация браузера

• Chrome должен быть установлен в вашей системе
• WebdriverIO автоматически управляет ChromeDriver

Мобильная автоматизация

iOS

1. Установите Xcode из Mac App Store
2. Установите инструменты командной строки Xcode:

   xcode-select --install

3. Установите Appium:

   npm install -g appium

4. Установите драйвер XCUITest:

   appium driver install xcuitest

5. Запустите сервер Appium:

   appium

6. Для симуляторов: Откройте Xcode → Window → Devices and Simulators для создания/управления симуляторами
7. Для реальных устройств: Вам понадобится UDID устройства (40-символьный уникальный идентификатор)

Android

1. Установите Android Studio и настройте Android SDK
2. Установите переменные окружения:

   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/emulator
   export PATH=$PATH:$ANDROID_HOME/platform-tools

3. Установите Appium:

   npm install -g appium

4. Установите драйвер UiAutomator2:

   appium driver install uiautomator2

5. Запустите сервер Appium:

   appium

6. Создайте эмулятор через Android Studio → Virtual Device Manager
7. Запустите эмулятор перед запуском тестов

Архитектура

Как это работает

WebdriverIO MCP действует как мост между ИИ-ассистентами и автоматизацией браузера/мобильных устройств:

┌─────────────────┐     MCP Protocol      ┌─────────────────┐
│  Claude Desktop │ ◄──────────────────►  │    @wdio/mcp    │
│  or Claude Code │      (stdio)          │     Server      │
└─────────────────┘                       └────────┬────────┘
                                                   │
                                             WebDriverIO API
                                                   │
                    ┌──────────────────────────────┼──────────────────────────────┐
                    │                              │                              │
            ┌───────▼───────┐             ┌───────▼───────┐             ┌───────▼───────┐
            │    Chrome     │             │    Appium     │             │    Appium     │
            │   (Browser)   │             │     (iOS)     │             │   (Android)   │
            └───────────────┘             └───────────────┘             └───────────────┘

Управление сессиями

• Модель одной сессии: Одновременно может быть активна только одна сессия браузера ИЛИ приложения
• Состояние сессии поддерживается глобально между вызовами инструментов
• Автоматическое отсоединение: Сессии с сохраненным состоянием (noReset: true) автоматически отсоединяются при закрытии

Обнаружение элементов

Браузер (Веб)

• Использует оптимизированный скрипт браузера для поиска всех видимых, взаимодействующих элементов
• Возвращает элементы с CSS-селекторами, ID, классами и ARIA-информацией
• По умолчанию фильтрует элементы, видимые в области просмотра

Мобильные (нативные приложения)

• Использует эффективный разбор XML-структуры страницы (2 HTTP-запроса вместо 600+ для традиционных запросов)
• Платформо-специфическая классификация элементов для Android и iOS
• Генерирует несколько стратегий локаторов для каждого элемента:
  • Accessibility ID (кросс-платформенный, наиболее стабильный)
  • Resource ID / Name атрибут
  • Совпадение по тексту / метке
  • XPath (полный и упрощенный)
  • UiAutomator (Android) / Predicates (iOS)

Синтаксис селекторов

Сервер MCP поддерживает несколько стратегий селекторов. См. Селекторы для подробной документации.

Веб (CSS/XPath)

# CSS селекторы
button.my-class
#element-id
[data-testid="login"]

# XPath
//button[@class='submit']
//a[contains(text(), 'Click')]

# Текстовые селекторы (специфичные для WebdriverIO)
button=Exact Button Text
a*=Partial Link Text

Мобильные (кросс-платформенные)

# Accessibility ID (рекомендуется - работает на iOS и Android)
~loginButton

# Android UiAutomator
android=new UiSelector().text("Login")

# iOS Predicate String
-ios predicate string:label == "Login"

# iOS Class Chain
-ios class chain:**/XCUIElementTypeButton[`label == "Login"`]

# XPath (работает на обеих платформах)
//android.widget.Button[@text="Login"]
//XCUIElementTypeButton[@label="Login"]

Доступные инструменты

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

Инструменты для браузера

Инструмент	Описание
start_browser	Запуск браузера Chrome (с опциональным начальным URL)
close_session	Закрытие или отсоединение от сессии
navigate	Переход по URL
click_element	Клик по элементу
set_value	Ввод текста в поле ввода
get_visible_elements	Получение видимых/интерактивных элементов (с пагинацией)
get_accessibility	Получение дерева доступности (с фильтрацией)
take_screenshot	Захват скриншота (автоматически оптимизированного)
scroll	Прокрутка страницы вверх или вниз
get_cookies / set_cookie / delete_cookies	Управление cookies
execute_script	Выполнение JavaScript в контексте браузера

Инструменты для мобильных устройств

Инструмент	Описание
start_app_session	Запуск приложения iOS/Android
tap_element	Нажатие на элемент или по координатам
swipe	Свайп в определенном направлении
drag_and_drop	Перетаскивание между местоположениями
get_app_state	Проверка, запущено ли приложение
get_contexts / switch_context	Переключение контекста в гибридных приложениях
rotate_device	Поворот в портретный/ландшафтный режим
get_geolocation / set_geolocation	Получение или установка GPS-координат
hide_keyboard	Скрытие экранной клавиатуры
execute_script	Выполнение мобильных команд Appium

Автоматическая обработка

Разрешения

По умолчанию сервер MCP автоматически предоставляет разрешения приложениям (autoGrantPermissions: true), устраняя необходимость в ручной обработке диалогов разрешений во время автоматизации.

Системные оповещения

Системные оповещения (например, "Разрешить уведомления?") по умолчанию автоматически принимаются (autoAcceptAlerts: true). Это можно настроить для отклонения с помощью autoDismissAlerts: true.

Конфигурация

Переменные окружения

Настройте подключение к серверу Appium:

Переменная	По умолчанию	Описание
APPIUM_URL	127.0.0.1	Имя хоста сервера Appium
APPIUM_URL_PORT	4723	Порт сервера Appium
APPIUM_PATH	/	Путь сервера Appium

Пример с пользовательским сервером Appium

{
    "mcpServers": {
        "wdio-mcp": {
            "command": "npx",
            "args": ["-y", "@wdio/mcp"],
            "env": {
                "APPIUM_URL": "192.168.1.100",
                "APPIUM_URL_PORT": "4724"
            }
        }
    }
}

Оптимизация производительности

Сервер MCP оптимизирован для эффективного взаимодействия с ИИ-ассистентами:

• Формат TOON: Использует Token-Oriented Object Notation для минимального использования токенов
• Разбор XML: Обнаружение мобильных элементов использует 2 HTTP-запроса (вместо 600+ традиционно)
• Сжатие скриншотов: Изображения автоматически сжимаются до макс. 1МБ с использованием Sharp
• Фильтрация области просмотра: По умолчанию возвращаются только видимые элементы
• Пагинация: Большие списки элементов могут разбиваться на страницы для уменьшения размера ответа

Поддержка TypeScript

Сервер MCP написан на TypeScript и включает полные определения типов. Если вы расширяете или интегрируете сервер программно, вы получите преимущества автодополнения и типовой безопасности.

Обработка ошибок

Все инструменты разработаны с надежной обработкой ошибок:

• Ошибки возвращаются в виде текстового содержимого (никогда не выбрасываются), поддерживая стабильность протокола MCP
• Описательные сообщения об ошибках помогают диагностировать проблемы
• Состояние сессии сохраняется даже при сбое отдельных операций

Варианты использования

Обеспечение качества

• Выполнение тестовых сценариев с помощью ИИ
• Визуальное регрессионное тестирование с помощью скриншотов
• Аудит доступности через анализ дерева доступности

Веб-скрапинг и извлечение данных

• Навигация по сложным многостраничным потокам
• Извлечение структурированных данных из динамического контента
• Обработка аутентификации и управление сессиями

Тестирование мобильных приложений

• Кросс-платформенная автоматизация тестирования (iOS + Android)
• Валидация процесса онбординга
• Тестирование глубоких ссылок и навигации

Интеграционное тестирование

• Тестирование сквозных рабочих процессов
• Верификация интеграции API + UI
• Проверка кросс-платформенной согласованности

Устранение неполадок

Браузер не запускается

• Убедитесь, что Chrome установлен
• Проверьте, что никакой другой процесс не использует порт отладки по умолчанию (9222)
• Попробуйте режим headless, если возникают проблемы с отображением

Ошибка подключения к Appium

• Проверьте, что сервер Appium запущен (appium)
• Проверьте конфигурацию URL и порта Appium
• Убедитесь, что соответствующий драйвер установлен (appium driver list)

Проблемы с симулятором iOS

• Убедитесь, что Xcode установлен и обновлен
• Проверьте, что симуляторы доступны (xcrun simctl list devices)
• Для реальных устройств проверьте правильность UDID

Проблемы с эмулятором Android

• Убедитесь, что Android SDK правильно настроен
• Проверьте, что эмулятор запущен (adb devices)
• Проверьте, что переменная окружения ANDROID_HOME установлена

Ресурсы

• Справочник по инструментам - Полный список доступных инструментов
• Руководство по селекторам - Документация по синтаксису селекторов
• Конфигурация - Параметры конфигурации
• FAQ - Часто задаваемые вопросы
• GitHub репозиторий - Исходный код и вопросы
• NPM пакет - Пакет на npm
• Протокол контекста модели - Спецификация MCP