playwright - Playwright: браузер для проверки сайтов

Когда звать

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

Что это

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

В основе - Playwright, известная библиотека Microsoft для проверки сайтов в браузере. По README проекта сервер работает не по картинке экрана, а по структуре страницы: агент получает список кнопок, полей и ссылок с их подписями и действует по нему. Поэтому ему не нужна модель, которая «смотрит» на скриншот, и клики получаются точнее.

В официальном каталоге плагинов Claude Code есть плагин playwright с автором Microsoft. Внутри него тот же самый сервер @playwright/mcp@latest, просто упакованный плагином.

Зачем он нам

Мы пользуемся им, когда агент должен проверить свою работу глазами пользователя: открыть собранную страницу, нажать кнопки, отправить форму, посмотреть, как страница выглядит на телефоне, и прочитать ошибки в консоли. Без браузера агент может только сказать «код выглядит правильно». С браузером он проверяет, что страница правда открывается и работает.

Для сайтов, где нужен твой вход (кабинеты, почта, таблицы), мы берём Claude in Chrome: он работает в твоём настоящем Chrome. Playwright по умолчанию открывает свой отдельный браузер, и входов в нём нет, пока ты не войдёшь туда сам.

Как поставить в Claude Code

Нужен Node.js версии 18 или новее - сервер запускается через npx. Команды сверены с README репозитория microsoft/playwright-mcp и документацией Claude Code на 28 сентября 2026 года.

Командой в терминале (так написано в README Microsoft):

claude mcp add playwright npx @playwright/mcp@latest

По документации Claude Code такая команда подключает сервер только в текущей папке проекта. Чтобы он был во всех проектах, добавь --scope user:

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

Плагином из официального каталога. Тот же сервер, одной командой внутри Claude Code:

/plugin install playwright@claude-plugins-official

Ставь что-то одно: либо командой, либо плагином, иначе у агента будет два одинаковых браузера. После установки перезапусти сессию и набери /mcp - в списке должен появиться playwright. Подробно про MCP-серверы и плагины - в статье плагины для Claude Code.

Как поставить в Codex

В README Microsoft есть отдельная инструкция для Codex:

codex mcp add playwright npx "@playwright/mcp@latest"

Второй способ - дописать сервер в файл настроек ~/.codex/config.toml:

[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]

По документации Codex настройки MCP лежат в этом же файле, а для одного проекта можно завести .codex/config.toml в папке проекта. Как в Codex устроены скиллы и плагины - в статье Codex skills.

Как звать и что писать

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

проверь сайт

Открой через Playwright http://localhost:4321. Проверь главную страницу:
все кнопки первого экрана ведут туда, куда подписаны, форма заявки
отправляется с тестовыми данными и показывает «спасибо».
Потом включи ширину телефона 390 пикселей и сделай скриншот.
В конце перечисли ошибки из консоли и что с ними делать.

Во втором случае агент знает адрес, сценарий и что считать успехом. На первый запрос он откроет страницу, скажет «всё загрузилось» и остановится.

Полезные настройки

Настройки дописываются в конец команды установки, после @playwright/mcp@latest. Всё ниже - из таблицы настроек в README.

• --headless - браузер работает без окна. По умолчанию окно видно, и ты смотришь, что делает агент.
• --browser - какой браузер открывать: chrome, firefox, webkit (движок Safari), msedge.
• --device "iPhone 15" - открыть сайт так, будто это телефон. Есть и короткий вариант --mobile.
• --isolated - профиль браузера живёт только в памяти и после сессии стирается. Удобно для проверок «как новый посетитель».
• --caps vision,pdf,devtools - дополнительные инструменты: клики по координатам, сохранение страницы в PDF, инструменты разработчика.
• --extension - подключиться к уже открытому Chrome или Edge через расширение Playwright Extension. Тогда агент видит твои вкладки и входы. Установка расширения описана в репозитории microsoft/playwright.

Что держать в голове

• Это не защита. В README прямо написано: Playwright MCP не является границей безопасности. Агент в браузере может перейти по любой ссылке и нажать любую кнопку, поэтому на боевых кабинетах с деньгами следи за ним сам.
• Входы сохраняются. По умолчанию у сервера постоянный профиль браузера: если ты вошёл на сайт в его окне, вход останется до следующей сессии. На Mac профиль лежит в ~/Library/Caches/ms-playwright/, у каждого проекта свой.
• Один профиль - одна сессия. Если открыть две сессии агента в одной папке проекта, они будут спорить за один профиль. Для параллельной работы README советует --isolated или отдельную папку профиля через --user-data-dir.
• Тратит контекст. Каждый шаг агент получает структуру страницы целиком. На длинных проверках контекст заполняется быстрее, чем в обычной работе с кодом.

Playwright MCP и Playwright CLI

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

Вопросы и ответы

Это бесплатно? Да. Сервер открытый, лицензия Apache 2.0 указана в репозитории и в пакете @playwright/mcp.

Работает ли в Codex? Да, как MCP-сервер: команда codex mcp add или запись в ~/.codex/config.toml.

Почему агент не видит Playwright? Чаще всего не перезапущена сессия, нет Node.js или сервер подключён в другой папке проекта. В Claude Code проверь командой /mcp, в Codex - codex mcp list.

Чем отличается от Claude in Chrome? Playwright - отдельный браузер для проверок, работает в Claude Code и Codex. Claude in Chrome - твой собственный Chrome со всеми входами, только для Claude.

Автор и источник

Сервер открытый, чужой, автор - Microsoft. Мы его не меняли. Описание и команды сверены с README репозитория microsoft/playwright-mcp, пакетом @playwright/mcp, каталогом claude-plugins-official и документацией MCP в Claude Code и Codex на 28 сентября 2026 года. Проект часто обновляется, поэтому детали сверяй по первоисточнику.