Содержание
Как подключить Playwright MCP к Claude
Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.
Материал редакции Зерокодера. Счёт по выдаче снят собственным прогоном 13 октября 2026 года; цитаты источников приведены дословно. Обновлено: октябрь 2026.
Подключить Playwright MCP к Claude — значит зарегистрировать в Claude Code внешний сервер браузерной автоматизации. По документации Microsoft сервер Playwright MCP даёт возможности управления браузером через Playwright, а Anthropic описывает регистрацию командой claude mcp add. Ниже — установка, регистрация, запуск браузера и проверка инструментов. Мы скачали подборку результатов веб-поиска по запросу «Как подключить Playwright MCP к Claude»: текст отдали 8 из 10.
Прямой ответ и границы продукта
Playwright MCP — это сервер протокола Model Context Protocol, который предоставляет возможности автоматизации браузера на базе Playwright. Так его определяет документация Microsoft в репозитории проекта. Claude Code — клиент, который подключается к таким серверам и получает их инструменты в своём окружении.
Границы задачи очерчены узко. Речь идёт о подключении конкретного сервера Playwright MCP к Claude Code: установка, регистрация, браузер, первый просмотр публичной страницы по документированному примеру и проверка инструментов. Это не общая библиотека end-to-end тестирования и не настройка GitHub Copilot. Playwright как фреймворк для тестов живёт отдельно и решает другие задачи.
Что даёт связка на практике. Claude получает инструменты вроде browser_navigate — переход по URL, и browser_snapshot — снимок доступности текущей страницы. Документация Microsoft описывает browser_snapshot как снимок дерева доступности, который полезнее скриншота, с параметрами target, filename, depth и boxes. Инструмент помечен как read-only.
Сервер запускается как отдельный процесс, а Claude Code общается с ним по протоколу MCP. Регистрация сводится к одной команде, которую приводит документация Microsoft: claude mcp add playwright npx @playwright/mcp@latest. Дальше клиент сам поднимает процесс сервера при обращении.
Границы стоит держать в голове при выборе инструмента. Если задача — прогонять готовые e2e-тесты в CI, нужен Playwright как библиотека. Если задача — дать ассистенту глаза и руки в браузере для исследования страницы, подходит MCP-сервер. Смешение двух сценариев приводит к путанице в ожиданиях.
Условия доступа и источник требований
Базовое требование одно: Node.js 20 или новее. Эту цифру приводит документация Microsoft на странице установки. Проверить версию можно командой node --version в терминале; если она ниже, обновите Node.js до актуальной ветки.
Браузер скачивается автоматически при первом использовании. Формулировка документации Microsoft: браузер загружается сам при первом запуске. Отдельная установка Chromium или другого движка вручную не нужна — сервер позаботится об этом в момент первого обращения.
Актуальные требования живут в двух местах. Первое — страница установки на playwright.dev, раздел Installation. Второе — README репозитория microsoft/playwright-mcp на GitHub. Обе страницы поддерживает Microsoft, и обе обновляются вместе с релизами. Сверяться стоит именно с ними, потому что сторонние гайды быстро устаревают.
Claude Code со своей стороны описан в документации Anthropic на code.claude.com. Там же — синтаксис команды claude mcp add и правила передачи аргументов серверу. Для stdio-серверов двойное тире -- отделяет опции самого Claude, такие как --transport, --env и --scope, от команды и аргументов запуска сервера. Это важно, когда вы добавляете свои флаги.
Совместимость версий проверяется просто. Node.js 20+ — со стороны среды. Актуальный пакет @playwright/mcp@latest — со стороны сервера. Claude Code — со стороны клиента. Если все три условия выполнены, регистрация проходит без дополнительных настроек.
Порядок действий по шагам
Порядок из документации Microsoft и Anthropic сводится к четырём шагам. Каждый проверяется отдельно, поэтому сбой легко локализовать.
Шаг первый — проверка Node.js. Откройте терминал и выполните node --version. Ожидаемый результат — 20 или выше. Если версия ниже, обновите Node.js и перезапустите терминал, чтобы PATH подхватил новый бинарник.
Шаг второй — регистрация сервера. Выполните команду из документации Microsoft:
claude mcp add playwright npx @playwright/mcp@latest
Здесь playwright — имя, под которым сервер появится в списке. npx @playwright/mcp@latest — команда запуска. Claude Code сохранит эту связку и будет поднимать процесс при обращении.
Шаг третий — проверка списка. Команда claude mcp list из документации Anthropic покажет зарегистрированные серверы. В выводе должен появиться playwright. Если его нет, регистрация не прошла — вернитесь к шагу второму и проверьте синтаксис.
Шаг четвёртый — проверка статуса внутри сессии. В Claude Code команда /mcp показывает состояние серверов. Документация Anthropic описывает её как проверку статуса сервера. Здесь видно, поднялся ли процесс и отвечает ли он.
Таблица ниже собирает шаги и признаки успеха.
| Шаг | Команда | Признак успеха |
|---|---|---|
| Проверка среды | node --version |
20 или выше |
| Регистрация | claude mcp add playwright npx @playwright/mcp@latest |
Команда завершилась без ошибки |
| Список серверов | claude mcp list |
В выводе есть playwright |
| Статус в сессии | /mcp |
Сервер отмечен как подключённый |
После четвёртого шага сервер готов принимать вызовы инструментов. Первое обращение запустит скачивание браузера, поэтому первый запрос может занять больше времени, чем последующие.
Учебный пример и критерии проверки
Пример из документации Microsoft задаёт простую задачу: перейти на https://news.ycombinator.com и перечислить пять верхних историй. Для самостоятельной проверки откройте эту публичную страницу и сравните названия первых историй с ответом Claude.
Откройте https://news.ycombinator.com обычным браузером, затем попросите Claude перейти по тому же адресу и перечислить верхние истории. Сервер использует browser_navigate с параметром url и browser_snapshot для снимка доступности. README Microsoft поясняет, что переходы к file:// по умолчанию заблокированы.
Критерии самостоятельной проверки делятся на три уровня. Первый: Claude называет заголовок открытой страницы. Второй: Claude перечисляет верхние истории в порядке страницы. Третий: названия и адреса историй совпадают с теми, которые видны в вашем браузере на момент проверки.
Если все три критерия выполнены, связка работает. Если Claude отвечает общими словами, значит снимок не пришёл или инструмент не вызвался. Проверьте статус через /mcp и повторите запрос.
Готовый промпт для первого запуска:
Открой https://news.ycombinator.com и перечисли пять верхних историй с их названиями и адресами. Ничего не меняй на странице, только прочитай.
Вариации той же задачи:
Открой [адрес] и перечисли все ссылки на странице с их текстом.
Открой [адрес] и найди все элементы с классом [имя класса], перечисли их тексты.
Открой [адрес] и составь краткое описание страницы в [число] предложениях.
Открой [адрес] и проверь, есть ли на странице форма; если да, перечисли поля.
Открой [адрес] и сравни заголовок страницы с текстом в теге title.
В квадратных скобках подставьте свои значения. Числовые лимиты в промптах задавайте словами «кратко» или «подробно», если не хотите жёстких границ.
Смежные варианты и выбор по задаче
Playwright MCP подключается не только к Claude Code. Документация Microsoft перечисляет клиентов: VS Code, Cursor, Claude Code, Claude Desktop и другие. Выбор зависит от того, где вы работаете.
Claude Desktop — настольное приложение. Документация Playwright описывает установку через кнопку в интерфейсе. Подходит, когда браузерная автоматизация нужна вне редактора кода.
Claude Code — терминальный клиент. Регистрация идёт командой claude mcp add. Подходит для работы в проекте, где ассистент уже открыт в терминале.
Cursor и VS Code — редакторы с поддержкой MCP. Документация Microsoft описывает установку для каждого отдельно. Подходят, когда вся работа идёт внутри редактора.
Таблица сравнения сценариев:
| Клиент | Способ подключения | Когда выбирать |
|---|---|---|
| Claude Code | claude mcp add playwright npx @playwright/mcp@latest |
Работа в терминале проекта |
| Claude Desktop | Установка через интерфейс | Автоматизация вне редактора |
| Cursor | Настройка MCP в редакторе | Работа внутри редактора |
| VS Code | Настройка MCP в редакторе | Работа внутри редактора |
Отдельно стоит вопрос о режиме браузера. Документация Microsoft упоминает headed-режим, выбор браузера, профиль пользователя и таймаут простоя в разделе Configuration. Эти настройки передаются серверу при регистрации через флаги после --.
Если задача — разовый просмотр страницы, хватит базовой регистрации. Видимый браузер включён по умолчанию; флаг --headless запускает его без графического окна. Если нужен конкретный движок, укажите его в конфигурации. Все параметры описаны в README проекта.
Типичные проблемы и диагностика
Проблема первая — сервер не появляется в списке. Проверьте claude mcp list. Если playwright отсутствует, команда регистрации не выполнилась. Частая причина — опечатка в имени пакета или отсутствие npx в PATH.
Проблема вторая — сервер в списке, но не отвечает. Откройте /mcp внутри Claude Code. Документация Anthropic описывает эту команду как проверку статуса. Если статус не «подключён», процесс не поднялся. Проверьте версию Node.js: ниже 20 сервер не запустится.
Проблема третья — браузер не скачивается. Документация Microsoft говорит, что браузер загружается автоматически при первом использовании. Если загрузка не проходит, проверьте доступ к сети и место на диске. Повторите запрос — сервер попробует снова.
Проблема четвёртая — инструменты не вызываются. Claude отвечает текстом, но не обращается к браузеру. Убедитесь, что запрос явно просит открыть страницу. Формулировка «открой адрес и опиши» работает надёжнее, чем «расскажи про сайт».
Проблема пятая — конфликт аргументов. Если вы добавляете свои флаги, используйте -- для отделения опций Claude от команды сервера. Документация Anthropic описывает это правило для stdio-серверов. Без разделителя флаги уйдут не туда.
Диагностика строится от простого к сложному. Сначала node --version, потом claude mcp list, потом /mcp, потом пробный запрос. Каждый шаг отсекает свой класс причин.
Частые вопросы
Что такое Playwright MCP?
Это сервер протокола Model Context Protocol, который даёт возможности автоматизации браузера на базе Playwright. Так его определяет документация Microsoft. Claude Code подключается к нему как клиент и получает инструменты для работы со страницами. Сервер запускается отдельным процессом.
Какая версия Node.js нужна?
Документация Microsoft называет Node.js 20 или новее. Проверить версию можно командой node --version. Если она ниже, обновите Node.js перед регистрацией сервера. Без этого шага сервер не запустится.
Как проверить, что сервер подключился?
Выполните claude mcp list — в выводе должно быть имя playwright. Внутри сессии Claude Code команда /mcp показывает статус сервера. Если он отмечен как подключённый, можно пробовать первый запрос. Документация Anthropic описывает обе команды.
Нужно ли устанавливать браузер вручную?
Нет. Документация Microsoft говорит, что браузер скачивается автоматически при первом использовании. Первый запрос может занять больше времени из-за загрузки. Последующие обращения работают быстрее.
Чем Playwright MCP отличается от обычного Playwright?
Playwright — библиотека для написания и запуска e2e-тестов. MCP-сервер даёт ассистенту инструменты для работы с браузером в реальном времени. Документация Microsoft перечисляет инструменты вроде browser_navigate и browser_snapshot. Выбор зависит от задачи: тесты в CI или исследование страницы ассистентом.
Если вы работаете с другими MCP-серверами, посмотрите материал как подключить MCP-инструменты к DeepSeek. Для сценариев с редактором кода пригодится разбор как подключить DeepSeek к Aider. А если нужно прервать зависшую сессию ассистента, поможет инструкция как остановить Claude Code.