Браузер для агента: Playwright MCP

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

Короткий ответ

Playwright MCP — это официальный сервер от Microsoft, который выдаёт агенту настоящий браузер. Агент открывает страницы, кликает, печатает, делает скриншоты и проверяет вёрстку сам. Это обычный MCP-сервер, поэтому подключается одной командой из терминала:

claude mcp add playwright -- npx @playwright/mcp@latest

Перезапустил сессию Claude Code — и у агента появились глаза и руки в вебе. Дальше ты просто просишь его словами: «открой такую-то страницу и проверь вёрстку», а инструмент он подберёт сам.

Что понадобится

• Установленный и работающий Claude Code (команда claude доступна в терминале).
• Node.js с npx — именно он поднимает сервер Playwright, поэтому качать что-то заранее не нужно.
• Понимание, что это MCP-сервер. Механика подключения тут ровно та же, что для любого MCP: одна команда claude mcp add, список через claude mcp list, удаление через claude mcp remove. Если про MCP пока туманно — про него есть отдельный гайд; здесь ты просто применяешь тот же приём к конкретному серверу-браузеру.

Зачем браузеру агент, а агенту браузер

Без браузера агент про внешние страницы только догадывается. Он меняет отступы и предполагает, что получилось. Классика жанра: «поправил» вёрстку, отрапортовал «готово», а ты открываешь сайт на телефоне — и там всё разъехалось. Проверить он не мог: глаз не было.

С браузером агент перестаёт угадывать и начинает вести себя как живой пользователь. Что он теперь умеет:

• Открыть страницу. Перейти по адресу и увидеть, что там на самом деле отрисовалось, а не что написано в коде.
• Кликать и печатать. Нажать кнопку, заполнить форму, пройти сценарий целиком — как человек, который реально зашёл на сайт.
• Сделать скриншот. Снять картинку страницы, в том числе на узкой, мобильной ширине, где ломается чаще всего.
• Проверить вёрстку и консоль. Посмотреть на реальный вид глазами и увидеть настоящие ошибки: битые ссылки, 404, красные сообщения JavaScript.

Ключевая мысль: браузер превращает агента из «читателя кода» в «пользователя, который зашёл на сайт». Он не рассуждает о твоей странице — он её открывает, смотрит и отвечает по факту, со скриншотом в доказательство.

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

Подключение — одна команда в терминале, в папке твоего проекта:

claude mcp add playwright -- npx @playwright/mcp@latest

Обрати внимание на двойной дефис --. Он отделяет опции самого Claude от команды, которая запускает сервер: всё, что стоит после --, уходит серверу как есть. Здесь playwright — это имя, под которым сервер будет виден в списке, а npx @playwright/mcp@latest — команда, которой он поднимается.

Браузер удобно иметь под рукой в любом проекте, а не только в текущем. Тогда добавляй его в user-scope — он станет доступен во всех твоих проектах на этой машине:

claude mcp add --scope user playwright -- npx @playwright/mcp@latest

Важно: после claude mcp add перезапусти сессию Claude Code. Новые инструменты подхватываются при старте сессии — пока не перезапустишь, агент их не увидит, даже если claude mcp list уже показывает сервер.

Как пользоваться

Магия в том, что тебе не нужно ничего кликать самому и не нужно называть инструмент. Ты ставишь задачу обычными словами, а агент делает всю рутину. Например:

«Открой такую-то страницу и скажи, не съехала ли вёрстка на мобильной ширине». Агент сам открывает браузер, выставляет узкую ширину, делает скриншот, смотрит на него и отвечает по факту: съехала или нет — с картинкой.

Ты формулируешь что проверить, а как — забота агента. Несколько сценариев, где это ловит ошибку до пользователя:

• Проверка вёрстки. Не только на десктопе, но и на мобильной ширине — там ломается чаще всего.
• Пользовательский путь. Пройти сценарий целиком: открыть, нажать «Купить», заполнить форму — и убедиться, что кнопка реально работает, а не просто «выглядит кликабельной».
• Отладка фронтенда. Найти причину бага по настоящей консоли — увидеть конкретную ошибку JS или 404, а не гадать по коду.

Совет: всегда проси проверять скриншотом — «открой и покажи, как это выглядит». Тогда агент отвечает по реальному виду страницы, а не по своей догадке о том, что должно было получиться. Проверка глазами — это и есть разница между «должно работать» и «работает».

Проверить, что подключилось

После добавления сервера логично убедиться, что он на месте и живой.

claude mcp list

Показывает список всех подключённых серверов и их статус — подключён или отвалился. Playwright должен быть в списке.

Прямо внутри чата Claude Code работает команда /mcp — она показывает серверы и статус подключения. А если браузер больше не нужен — убираешь его так:

claude mcp remove playwright

Частые ошибки

FAQ

Надо ли ставить сам браузер отдельно?

Нет. Playwright поднимет всё, что нужно, сам — через npx при первом запуске. Отдельно скачивать и настраивать браузер не требуется, поэтому первый старт и бывает чуть дольше обычного.

Это безопасно?

Агент действует в браузере от твоего имени: клик по кнопке — настоящий клик, отправка формы — настоящая отправка. Это не симуляция. Поэтому давай задачи осознанно, как с любым MCP: формы, оплаты и логины в важные аккаунты — сначала на тестовой странице, а не на боевом сайте с живыми клиентами. Если действие нельзя легко откатить — сначала тест, потом бой.

Чем это отличается от доступа к вебу или поиска?

Поиск и веб-доступ читают текст страниц — что там написано. Браузер даёт другое: агент кликает и проверяет интерфейс глазами — как кнопка себя ведёт, не съехала ли вёрстка, что в консоли. Поиск отвечает на «что написано на странице», браузер — на «как страница работает и выглядит».

Что ты увидишь

Агент реально открывает страницу в браузере и прикладывает скриншот как доказательство — отвечает по факту, а не по догадке:

> открой localhost:3000 и проверь шапку

✔ Открыл страницу, сделал скриншот (1280×720)
Шапка на месте, но логотип съезжает на узкой ширине.

Итог

Без браузера агент про внешние страницы только догадывается; с браузером — проверяет их глазами. Playwright MCP от Microsoft подключается одной командой claude mcp add playwright -- npx @playwright/mcp@latest — это тот же приём, что для любого MCP-сервера. Дальше ты просишь агента обычными словами открыть страницу и проверить вёрстку, а он сам кликает, заполняет формы, делает скриншот и читает консоль. Проси проверять скриншотом, а действия с формами и логинами держи на тесте — браузер даёт агенту силу настоящего пользователя.

А про то, как вообще устроены MCP-серверы и как безопасно выдавать агенту доступы наружу, — в соседних гайдах. Браузер — это его глаза; дальше добавим ему память и связи с внешним миром.