VIAN COMMUNITY FREE

Как настроить Claude Desktop для управления браузером через Playwright MCP: полное руководство

ИИ и нейросети
Пошаговая инструкция по настройке Playwright MCP в Claude Desktop для автоматического управления браузером. Быстрая работа с Тильдой, CRM и любыми сайтами без скриншотов.

Введение: почему Claude Desktop может управлять браузером

Многие пользователи Claude Desktop задаются вопросом: может ли Claude управлять браузером как ChatGPT? Ответ — да, и даже быстрее, если правильно настроить инструмент Playwright MCP.
В отличие от визуальных агентов, которые делают скриншот перед каждым действием (что занимает 3-8 секунд), Playwright MCP работает с текстовым DOM-деревом страницы. Это ускоряет работу в 5-10 раз.
В этой статье вы узнаете, как с нуля настроить управление браузером в Claude Desktop для автоматизации работы с Тильдой, CRM-системами, админками сайтов и любыми другими веб-интерфейсами.

Что такое Playwright MCP и зачем он нужен

MCP (Model Context Protocol) — это протокол, который позволяет Claude Desktop подключать внешние инструменты. Playwright — это фреймворк от Microsoft для автоматизации браузеров.
Вместе они дают вам возможность:
  • Управлять браузером через текстовые команды в чате
  • Автоматизировать рутинные задачи на сайтах
  • Работать с Тильдой, WordPress, CRM и другими платформами
  • Сохранять сессии и cookies между запусками

Шаг 1. Установка Node.js и Playwright MCP

Откройте терминал на Mac (или PowerShell на Windows) и выполните команды:

Установка Node.js (если ещё не установлен)

Скачайте Node.js с официального сайта nodejs.org или через Homebrew:
brew install node

Установка Playwright MCP

npm install -g @playwright/mcp

Установка браузеров для Playwright


npx playwright install chromium

Проверка установки

npx @playwright/mcp --help
Если вы видите список команд — установка прошла успешно.

Шаг 2. Настройка конфига Claude Desktop

Откройте настройки

  1. Запустите Claude Desktop
  2. Нажмите ⌘ + , (на Mac) или перейдите в меню → Settings
  3. Выберите раздел Developer
  4. Нажмите Edit Config

Замените содержимое конфига

Вставьте следующий код в файл claude_desktop_config.json:
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp",
        "--user-data-dir",
        "/Users/ВАШЕ_ИМЯ/tilda_profile"
      ]
    }
  }
}
Важно: замените /Users/ВАШЕ_ИМЯ/ на ваш реальный путь к домашней папке.

Что делает этот конфиг

  • command: "npx" — запускает Playwright через Node.js
  • --user-data-dir — сохраняет cookies и сессии в папку tilda_profile
  • Браузер открывается визуально — вы видите, что делает агент

Шаг 3. Перезапуск и проверка

  1. Полностью закройте Claude Desktop ( + Q, не просто свернуть)
  2. Закройте все окна Chrome (⌘ + Q), чтобы избежать конфликта профилей
  3. Запустите Claude Desktop заново
  4. Перейдите в Settings → Developer и проверьте, что статус playwright стал зелёным (Connected)

Шаг 4. Первое использование

Напишите в чат Claude Desktop:
Открой https://tilda.cc
Должно произойти следующее:
  • Откроется новое окно Chromium (не ваш обычный Chrome)
  • Claude загрузит сайт Тильды
  • Вы сможете управлять браузером через текстовые команды

Шаг 5. Авторизация и сохранение сессии

Первая авторизация

  1. Попросите Claude открыть страницу входа: «Открой https://tilda.cc и войди в мой аккаунт»
  2. Введите логин и пароль в открывшемся окне браузера
  3. Cookies автоматически сохранятся в папку /Users/ВАШЕ_ИМЯ/tilda_profile

Все последующие запуски

Теперь при каждом запуске Claude будет открывать Тильду уже авторизованным. Не нужно вводить пароль снова.

Шаг 6. Примеры задач для автоматизации

Работа с Тильдой

Открой Тильду (сессия уже сохранена).
Перейди в проект "Мой сайт", открой главную страницу.
Найди блок с заголовком "О компании" и измени его на "О нашей команде".
Нажми кнопку сохранения.

Работа с CRM или админкой

Открой https://firm.example.com
Зайди в раздел "Клиенты".
Найди последнего добавленного клиента и открой его карточку.
Скопируй его email и телефон.

Многосайтовые задачи

1. Открой Тильду и проверь, опубликована ли главная страница.
2. Открой Google Analytics и посмотри количество посетителей за сегодня.
3. Если посетителей больше 100, добавь в Тильду блок с акцией.

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

Тильда — это сложное React-приложение с динамическими элементами. Вот как улучшить работу:

1. Увеличьте таймауты

Тильда долго грузит блоки и показывает анимации. Добавьте в конфиг:
"playwright": {
  "command": "npx",
  "args": [
    "-y",
    "@playwright/mcp",
    "--user-data-dir",
    "/Users/ВАШЕ_ИМЯ/tilda_profile",
    "--timeout-action",
    "15000",
    "--timeout-settle",
    "2000"
  ]
}

2. Используйте понятные селекторы

Вместо:
«Найди кнопку сохранения в правом верхнем углу»
Пишите:
«Нажми на кнопку с текстом "Сохранить"»

3. Работайте с Zero Block осторожно

Zero Block использует абсолютное позиционирование. Если Claude не находит элементы, добавьте в промпт:
«Сделай скриншот страницы и найди элемент визуально»

Частые проблемы и решения

Ошибка "Server disconnected"

Причина: Playwright MCP не установлен или не найден.
Решение:
npm install -g @playwright/mcp

Ошибка "Debugger is not attached"

Причина: Playwright пытается подключиться к уже запущенному Chrome.
Решение: Закройте все окна Chrome (⌘ + Q) перед запуском Claude Desktop.

Браузер не открывается

Причина: Конфликт с другим процессом или неправильный путь.
Решение: Проверьте путь в --user-data-dir и убедитесь, что папка существует:
mkdir -p /Users/ВАШЕ_ИМЯ/tilda_profile

Заключение

Настройка Playwright MCP в Claude Desktop занимает 10-15 минут, но экономит часы ручной работы. Вы получаете универсального браузерного ассистента, который работает с любыми сайтами: Тильдой, WordPress, CRM, админками и другими веб-интерфейсами.
Главное преимущество — скорость. Работая через DOM вместо скриншотов, Claude выполняет задачи в 5-10 раз быстрее визуальных агентов.
Попробуйте настроить Playwright MCP прямо сейчас и автоматизируйте рутинные задачи на ваших сайтах!
2026-08-22 00:34