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

Пошаговая инструкция по настройке 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

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

Запустите Claude Desktop
Нажмите ⌘ + , (на Mac) или перейдите в меню → Settings
Выберите раздел Developer
Нажмите 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. Перезапуск и проверка

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

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

Напишите в чат Claude Desktop:

Открой https://tilda.cc

Должно произойти следующее:

Откроется новое окно Chromium (не ваш обычный Chrome)
Claude загрузит сайт Тильды
Вы сможете управлять браузером через текстовые команды

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

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

Попросите Claude открыть страницу входа: «Открой https://tilda.cc и войди в мой аккаунт»
Введите логин и пароль в открывшемся окне браузера
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 прямо сейчас и автоматизируйте рутинные задачи на ваших сайтах!

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