Playwright в Claude Code: подключение браузера и проверка сайта

Playwright можно подключить к Claude Code как браузерный инструмент через официальный Playwright MCP, а затем попросить агента открыть тестовую страницу, выполнить действия и показать проверяемый результат. Для начала нужны Claude Code, Node.js, доступ к безопасному тестовому сайту и право запускать локальные команды. Если нужен повторяемый автоматический тест в проекте, после исследования страницы оформите его отдельным тестом Playwright, а не полагайтесь только на диалог с агентом.

Что именно связывается

Claude Code управляет задачей и вызывает инструмент, а Playwright MCP открывает браузер и взаимодействует со страницей. Официальный репозиторий Microsoft описывает этот сервер как интерфейс браузерной автоматизации для ИИ-агентов на основе структуры страницы. Это не означает, что Claude Code сам стал браузером или что доступ к любому сайту безопасен.

Если вы ещё не подключали внешние инструменты, сначала полезно понять как устроен MCP в Claude Code. Для выбора между Claude Code и обычным чатом смотрите первый проект в Claude Code. Здесь рассматривается именно связка с Playwright, её проверка и границы.

Когда выбрать MCP, а когда тестовый код

Выберите MCP для разового исследования интерфейса, поиска устойчивых элементов и ручной приёмки сценария в диалоге. Если проверку нужно запускать после каждого изменения сайта, запишите явные шаги и утверждения в Playwright Test. Основной репозиторий Playwright различает Playwright Test, CLI и MCP: тестовый раннер рассчитан на повторяемые проверки, а MCP даёт инструмент браузера агенту. Это правило выбора помогает не выдавать удачный единичный проход за автоматический контроль качества.

• Разовый вопрос о том, что происходит после нажатия кнопки: подойдёт браузерное исследование через MCP.
• Проверка, которая должна падать при регрессии в сборке: используйте Playwright Test с явными утверждениями.
• Страница с оплатой или настоящими клиентскими данными: сначала создайте тестовый контур и заглушки, затем проверяйте сценарий.
• Сайт, где важна визуальная верстка: структурные снимки MCP дополняйте просмотром изображения в отдельной проверке.

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

Начните с десктопного приложения Claude Code: настройки MCP в .mcp.json или ~/.claude.json действуют и там (документация Anthropic). Ниже показан терминальный способ; для него проверьте, что Claude Code запускается и что на компьютере есть Node.js и npx. Затем добавьте локальный сервер по документации Claude Code для stdio MCP и инструкции Microsoft для Claude Code. Команду запускайте в терминале своего компьютера, не в тексте задания агенту. Точный набор доступных браузеров и требований сверяйте с документацией вашей установленной версии.

claude mcp add --transport stdio playwright -- npx @playwright/mcp@latest
claude mcp get playwright

Первая команда добавляет конфигурацию, вторая показывает сведения и состояние сервера. Согласно документации Claude Code, запись «Added» подтверждает сохранение настройки, но работоспособность соединения нужно проверить отдельно. Внутри сеанса откройте /mcp, убедитесь, что сервер доступен, и только затем дайте агенту тестовую задачу.

1. Откройте отдельный тестовый проект или рабочую папку без чужих секретов. Запустите установочную команду из блока выше.
2. Проверьте claude mcp get playwright и состояние в /mcp. При ошибке подключения сначала проверьте запуск npx и сообщение самого сервера.
3. Попросите Claude открыть публичную тестовую страницу и прочитать заголовок. Это проверяет доступность инструмента без изменения данных.
4. Попросите выполнить один безвредный сценарий: перейти по ссылке, найти элемент и сообщить наблюдаемое состояние.
5. Сверьте сообщение агента со страницей или журналом инструмента. Если нужно повторять сценарий, перенесите его в тестовый файл.

Как сформулировать безопасное первое задание

Пример: «Откройте публичную демонстрационную страницу. Найдите форму по видимой подписи, заполните её вымышленными данными, остановитесь до отправки и перечислите элементы, по которым проверяли результат». Такая формулировка задаёт допустимую границу и наблюдаемый результат. В документации Playwright MCP показан сценарий работы через структурные сведения о странице, поэтому называйте элементы так, как их видит пользователь, а не придумывайте селекторы до осмотра.

Для проверки своего сайта используйте тестовый домен или локальную копию с тестовыми аккаунтами. Не подключайте агенту личный профиль браузера ради первого опыта. У Playwright MCP по умолчанию возможен постоянный профиль с сохранением сеанса; официальная документация также описывает изолированные сеансы. Выберите отдельный профиль для испытаний и храните состояние входа как секрет, если оно вообще необходимо.

По теме: Claude Code Teams: как запустить команду агентов в 2026

Как принять результат

Попросите агента назвать адрес страницы, шаги и видимые признаки успеха. Затем самостоятельно повторите ключевое действие или проверьте файл тестового отчёта. Успех не равен фразе «готово»: важно, что нужный элемент появился, ошибка не скрыта и на сервере не возникло нежелательного действия. Для проверки достоверности финального текста используйте чек-лист проверки ответа ИИ-агента. Действия браузера и состояние страницы дополнительно проверяйте отдельно.

• Адрес тестовой страницы совпадает с заданным, переходы не ушли на посторонний домен.
• Агент использовал видимые подписи или структуру страницы и назвал конкретный элемент проверки.
• В сценарии с записью состояние проверено отдельным чтением, а не выводом агента.
• Повторный запуск не создаёт лишних заявок, писем или платежей.
• В отчёте видны неудачные шаги и ограничения, а не только успешный финал.

Если браузер открылся, но элемент не найден, проверьте, загрузилась ли страница, не перекрыта ли она всплывающим окном и доступна ли подпись элемента. Если команда регистрации успешна, а инструмент не появился, откройте /mcp и проверьте статус соединения. Если страница требует вход, используйте отдельный тестовый аккаунт и не вставляйте cookie или токены в чат.

Для первого прогона выбирайте страницу без реальных платежей и сообщений. Подключённый браузер расширяет возможности агента, поэтому заранее ограничьте допустимые действия.

Какие ограничения остаются

MCP позволяет исследовать живую страницу, но результат разового сеанса зависит от состояния сайта, сети и браузера. Повторяемые проверки должны храниться в проекте как явные тесты. Документация Playwright Test описывает утверждения и изоляцию контекстов для таких прогонов. Структурная проверка также не заменяет осмотр мелких визуальных дефектов, доступности с клавиатуры и поведения на разных размерах экрана.

Не используйте эту схему для обхода капчи, ограничений доступа или согласия пользователя. На стороннем сайте содержимое страницы может содержать инструкции, не относящиеся к вашей задаче; документация Anthropic рекомендует доверять источнику MCP-сервера и учитывать риск внедрённых инструкций. Важные действия оставляйте под ручным подтверждением.

Частые вопросы

Можно ли подключить Playwright без написания теста?

Да, MCP даёт Claude Code браузерный инструмент для исследовательского сеанса. Для регулярной проверки нужен тестовый сценарий с явными утверждениями.

Почему сервер добавлен, но браузер не работает?

Сохранение конфигурации ещё не доказывает соединение. Проверьте claude mcp get playwright, панель /mcp, запуск npx и сообщение об ошибке.

Нужен ли доступ к личному браузеру?

Нет. Начните с отдельного тестового профиля и публичной демонстрационной страницы. Подключение к рабочим учётным записям требует отдельного решения о доступе.

Что делать после удачного прохода?

Запишите шаги как повторяемый тест, добавьте проверку ожидаемого элемента или состояния и запустите тест после изменения сайта.