Нарисовали страницу - запускаете тестовый прогон. Через Playwright MCP агент открывает ваш сайт, нажимает кнопки и заполняет формы. Но управлять браузером дорого. Сначала выберите MCP или CLI под задачу.
Выбрали MCP - проверяйте свою тестовую страницу без доступа к личным аккаунтам. Заранее задайте размеры окна, ожидаемый результат и лимит повторов. На выходе просите отчёт со скриншотами.
Что такое Playwright MCP: открывает сайт, нажимает кнопки
Playwright MCP - сервер, через который агент управляет браузером. Инструмент browser_snapshot возвращает дерево доступности: элементы страницы и ссылки на них для действий. browser_take_screenshot отдельно сохраняет скриншот для проверки внешнего вида.
browser_navigate открывает адрес, browser_click нажимает элемент, browser_fill_form заполняет поля. browser_resize меняет размер окна; browser_console_messages и browser_network_requests возвращают сообщения консоли и сетевые запросы.
На мобильной версии проверьте: ничего ли там не убежало, всё ли помещается в экран.
Общий выбор расширений Claude Code - в отдельной статье.
Материалы из моих видео можно забрать в канале:
MCP или CLI: что выбрать для проверки
| Задача | Что рассмотреть | Почему | Что принять на выходе |
|---|---|---|---|
| Исследовать незнакомый интерфейс своего сайта | MCP | Сохраняет состояние браузера для последовательных действий | Проверенные сценарии и замечания с доказательствами |
| Повторять проверки в кодовом проекте | CLI+SKILLS | По README Microsoft, вызовы CLI не загружают большие схемы инструментов и деревья в контекст | Воспроизводимую проверку по заданному ожиданию |
А вот делать большие парсеры, которые посмотрят тысячи конкурентов и выдадут вам портянку стратегическую, - бесполезное занятие: это будет невероятно дорого.
Промпт /goal с лимитом попыток я выложил в канале бесплатно - пост от 23.06. Забрать можно здесь.
Как подключить MCP и не отдать ему личный браузер
Нужно устанавливать только из официальных источников. И что попалось, с интернета не хватать.
В README Microsoft от 08.11.2026 указаны Node.js 18 или новее и MCP-клиент. Команда для Claude Code:
claude mcp add playwright npx @playwright/mcp@latest@latest - подвижная метка. Перед применением сверьте требования выбранного выпуска в README Microsoft.
До открытия страницы у добавленного сервера playwright задайте поля:
command: "npx"
args: ["@playwright/mcp@latest", "--isolated"]Постоянный профиль хранит авторизацию. --isolated держит состояние в памяти до закрытия браузера. Расширение использует существующие вкладки и сессии. Здесь выбирайте изолированный режим без личного профиля, расширения и --storage-state: этот параметр может загрузить авторизацию.
Не входите в личные аккаунты, не совершайте реальные покупки, не удаляйте рабочие данные. Не включайте безусловное автоподтверждение инструментов. Используйте свою тестовую среду и тестовые данные; опасные действия подтверждайте вручную.
Подключение MCP и выбор прав для Claude Code - в отдельной статье.
MCP не является границей безопасности. --allowed-origins и --blocked-origins её тоже не обеспечивают и не действуют на перенаправления. Запреты в задании техническую защиту не создают. browser_run_code_unsafe выполняет произвольный код в процессе сервера; для этой проверки он не нужен.
Проверьте, что в клиенте появились инструменты playwright. Поручите открыть разрешённый адрес тестовой страницы и вернуть снимок доступности. Нужны ответ инструмента и читаемый снимок, а не слова агента «подключил». При ошибке подключения остановитесь.
Что поручить агенту: прогоните страницу, но не бесконечно
Шаблон задания: заполните перед запуском. Лимит в 2 прохода - условие этого задания, а не настройка сервера.
Адрес и среда: [своя тестовая страница].
Разрешённые страницы: [перечень]. Вне перечня остановитесь.
Тестовые данные: [данные без личной авторизации и рабочих записей].
Сценарии:
- Пройдите меню: [пункты]. Ожидаемые переходы: [адреса].
- Проверьте [элементы] при размерах окна [ширина и высота
для компьютера, планшета, телефона]. Ожидание: [макет,
элементы помещаются и доступны].
- Проверьте сообщение об ошибке формы: [неверные тестовые данные].
Ожидаемое сообщение: [текст или понятный пользователю смысл].
Форму с действительными данными не отправляйте.
Запреты: вход в личные аккаунты, реальные покупки, удаление рабочих
данных и безусловное автоподтверждение инструментов.
Не меняйте сайт и ожидаемые результаты.
При запросе авторизации, платеже, удалении или действии вне
разрешённого остановитесь и запросите подтверждение.
Лимит: 2 прохода - исходная проверка и повторное воспроизведение
замечаний. Затем остановитесь. Исправления - отдельная задача.
Отчёт: отдельная строка для каждого сценария на каждом размере окна.
Укажите ожидаемый и фактический результат, статус и подтверждение.
Приложите полученные ошибки консоли и сети.Если вы собираете свои проекты с ИИ-агентами, посмотрите программу практикума СмыслоКода.
Проверьте, все ли элементы остаются на месте, всеми ли удобно пользоваться. Попросите скриншоты для компьютера, планшета и телефона. Сравните их с макетом: выбранные размеры не означают проверку всех устройств.
Как принять отчёт, а не слово «готово»
Принимайте результат по тому, что агент показал: скриншотам, снимкам доступности и журналам.
Кстати, я снял «Полный гайд - Связка для первого агента Hermes Agent», обязательно посмотрите.
В нём показываю подключения через MCP и API, CLI-программы и какие права давать агенту. Посмотрите перед тем, как подключать ему другие инструменты.
Шаблон отчёта, не результат прогона:
| URL | Шаги воспроизведения | Заранее заданное ожидание | Фактический результат | Статус | Артефакт | Приоритет | Результат повторной проверки |
|---|---|---|---|---|---|---|---|
| [адрес] | [сценарий, размер окна, действия] | [ожидание для сценария и размера] | [наблюдение] | [статус] | [скриншот, снимок или журнал] | [решение владельца] | [повторное наблюдение] |
Статусы задайте так:
- «Пройдено» - результат соответствует ожидаемому, есть подтверждение.
- «Ошибка» - результат отличается от ожидаемого.
- «Не проверено» - нет доступа, сработала остановка или нет подтверждения.
Приоритет определяете вы: насколько ошибка мешает вашему сценарию. «Не проверено» не считайте успешной проверкой.
К каждой строке приложите подтверждение. Снимок доступности не подтверждает вёрстку, скриншот - отправку формы или отсутствие сетевой ошибки. По шагам отчёта должно быть понятно, как повторить проверку. Ожидаемый результат задавайте заранее, не меняйте его под то, что показал сайт.
Другие проверки кода от ИИ - в отдельной статье.
Когда остановиться
После 2 проходов - отчёт. Расширять ли проверку, решаете вы. Если дальше нужны повторяемые проверки внутри проекта, рассмотрите CLI+SKILLS.
Допустим, название в списке совпало с названием открытой карточки. Но отвечает ли карточка поисковому запросу? Для этого заранее задайте отдельное условие проверки. Пройденные сценарии не гарантируют, что других ошибок нет.
А что вы первым поручите проверить на своём сайте: меню, мобильную вёрстку или форму? Напишите в комментариях в канале.
Источники
- Microsoft: Playwright MCP README - MCP/CLI, подключение, профили, инструменты и безопасность. Сверено 08.11.2026.
Новые материалы - дайджестом, без спама
Гайды выходят регулярно. Подпишись, чтобы не пропускать: пришлю подборку в Telegram или на email. Раз в неделю или каждый день - выбираешь сам.
