Playwright MCP: как настроить и проверять сайты с ИИ

Сервер Playwright MCP от Microsoft связывает Claude Code, Codex, Cursor и агента Copilot в VS Code с Playwright — фреймворком для автоматизации браузера. Я рекомендую использовать его для исследовательского тестирования и разбора сбоев, а важные находки затем превращать в проверенные человеком тесты, которые можно запускать повторно.

Как работает Playwright MCP

Агент получает инструменты управления браузером и структурированное описание страницы. MCP, или Model Context Protocol, — протокол, через который агент вызывает эти инструменты. Сервер выполняет действия в браузере, а агент решает, какое действие запросить следующим.

Снимок дерева доступности можно сравнить с указателем в здании: он помогает найти помещения и двери по их назначению и названию. Так же снимок страницы описывает кнопки, ссылки, текстовые поля и их доступные имена. Агент выбирает нужный элемент в этой структуре, и ему не приходится угадывать по картинке, куда нажать. В стандартном режиме модель с поддержкой изображений не нужна. Обзор Microsoft

Ещё до установки стоит выбрать подход. Сейчас Microsoft предлагает пользователям агентов для разработки также рассмотреть Playwright CLI с навыками (skills), а MCP описывает как удобный вариант для сохранения состояния браузера и многократного изучения структуры страницы. Выбирайте MCP, если такой непрерывный диалог с браузером соответствует вашей задаче. Если агент уже уверенно работает через команды оболочки, сравните этот вариант с CLI. Сам по себе выбор инструмента ещё не доказывает, что клиентский сценарий прошёл проверку. Сравнение MCP и CLI от Microsoft

Другие инструменты для такого стека разбираем в подборке лучших MCP-серверов на 2026 год.

Как подключить сервер к Claude Code, Codex, Cursor или VS Code

Понадобятся Node.js 18 или новее и клиент с поддержкой MCP. Команды и конфигурации ниже воспроизводят примеры из README Microsoft. Выберите свой клиент: это отдельные варианты установки, а не последовательность действий для всех редакторов. Требования и установка

Claude Code

Выполните команду без изменений:

claude mcp add playwright npx @playwright/mcp@latest

Codex

Выполните команду без изменений:

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

Другой вариант — добавить в ~/.codex/config.toml:

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

Cursor

Для ручной настройки откройте разделы, указанные в README: Cursor Settings -> MCP -> Add new MCP Server. Задайте имя, выберите тип command и введите:

npx @playwright/mcp@latest

Через Edit можно проверить конфигурацию или добавить аргументы. В README также есть кнопка Install in Cursor.

VS Code

Выполните команду CLI для VS Code в точности как показано:

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

После этого сервер станет доступен агенту GitHub Copilot в VS Code. В README Microsoft также есть кнопки установки и ссылка на руководство по настройке MCP в VS Code.

Общая конфигурация JSON

Для клиентов, которые используют стандартную конфигурацию JSON из README, пример выглядит так:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Где разместить конфигурацию, смотрите в инструкции для своего клиента выше. Альтернативный способ настройки Codex использует TOML, а не этот JSON. Выбрать самого агента поможет обзор ИИ-агентов для разработки с тестированием в браузере.

Как выбрать браузер и способ взаимодействия со страницей

Для начала используйте видимое окно браузера, изолированный профиль и снимки структуры страницы. Параметры добавляются в список аргументов сервера после @playwright/mcp@latest. Ниже приведены настройки из справочника Microsoft.

Снимки структуры и vision отличаются способом взаимодействия со страницей. В стандартном режиме нужные элементы определяются через browser_snapshot. Инструмент browser_take_screenshot сохраняет скриншот для визуальной проверки, но сам по себе снимок экрана не включает клики по координатам. Для --caps=vision в README перечислены browser_mouse_click_xy, browser_mouse_down, browser_mouse_drag_xy, browser_mouse_move_xy, browser_mouse_up и browser_mouse_wheel. Клиент и модель должны уметь анализировать возвращаемые изображения. Справочник инструментов

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

Какие инструменты нужны для проверки сайта

Базовый набор охватывает навигацию, взаимодействие со страницей и сбор материалов проверки. В таблице основные инструменты автоматизации и работы с вкладками из README сгруппированы по задачам агента. Список инструментов Microsoft

Действия на основе снимка используют ссылку на элемент из этого снимка или уникальный селектор. Селектор — это способ указать конкретный элемент страницы. После существенного изменения страницы обновляйте снимок: прежний элемент уже может быть неактуален.

Дополнительные возможности включаются отдельно. В таблице параметров перечислены vision, pdf и devtools; в разделах об инструментах также явно описаны config, network, storage и testing:

• PDF: --caps=pdf добавляет browser_pdf_save.
• Материалы для отладки: --caps=devtools включает трассировку, видео, запись действий, аннотации, подсветку и возобновление приостановленного выполнения. Например, browser_start_tracing и browser_stop_tracing задают начало и конец записи трассировки.
• Проверки условий: --caps=testing добавляет browser_generate_locator, browser_verify_element_visible, browser_verify_list_visible, browser_verify_text_visible и browser_verify_value. Проверка условия, или assertion, задаёт то, что должно быть истинно.
• Имитация работы сети: --caps=network добавляет browser_network_state_set, browser_route, browser_route_list и browser_unroute для проверки без сети и подмены запросов.
• Хранилища: --caps=storage добавляет просмотр и редактирование cookie, local storage и session storage, а также browser_storage_state и browser_set_storage_state.
• Итоговая конфигурация: --caps=config добавляет browser_get_config.

Это группы, описанные в README, а не гарантия того, что любой клиент сразу покажет все инструменты. Если нужного инструмента нет, сверьте список инструментов установленного пакета и включённые возможности с README. Полное описание инструментов

Три задачи, полезные для бизнеса

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

Проверить путь к оформлению заказа

Разработчик интернет-магазина может поручить агенту пройти гостевое оформление заказа на тестовом стенде: убедиться, что выбранный товар попал в корзину, заполнить адрес доставки вымышленными данными и остановиться до реального платежа. Ценность такой проверки — найти ошибку, блокирующую покупку, раньше клиента.

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

Проверить сайт после деплоя

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

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

Протестировать формы на вымышленных данных

Разработчик SaaS-продукта может проверить обязательные поля формы регистрации без авторизации, сообщения валидации и возможность исправить ошибки в локальной или тестовой среде. Нужно остановиться до создания настоящего аккаунта либо отправлять данные только в специально подготовленный тестовый приёмник.

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

Разбор примера: гостевой заказ не доходит до оплаты

Чётко ограничьте задачу агента и потребуйте подтверждений для его выводов. Ниже — учебный пример сквозной проверки с заранее заданным дефектом. Это не отчёт о тестировании действующего магазина.

В приложении из примера есть гостевая корзина, форма доставки и страница оплаты. Форма доставки ошибочно отправляет поле почтового индекса как postal, а бэкенд ожидает postalCode. Используйте локальный или тестовый стенд без авторизации, с вымышленными данными и без подключения к реальным платежам.

Дайте агенту такое задание, подставив вместо URL в квадратных скобках адрес своего тестового стенда:

Изоляцию нужно включить в конфигурации сервера параметром --isolated: одного упоминания в промпте для настройки сервера недостаточно.

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

Пример отчёта агента:

Следующий шаг — исправить сопоставление и повторить оба сценария: с некорректными и корректными данными. Когда поведение подтверждено, поручите агенту подготовить регрессионный тест на Playwright, проверьте его условия и добавьте в существующую систему запуска тестов. Этот последний этап относится к вашему процессу разработки: сам по себе диалог через MCP не заменяет набор регрессионных тестов.

Где проверки дают сбой и к чему получает доступ агент

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

Учитывайте следующие практические ограничения:

• Неоднозначная структура страницы: Элементы без доступных имён и интерфейсы, во многом построенные на canvas, снижают пользу структурного описания. Я рекомендую исправлять доступные подписи в приложениях, которые вы контролируете, и обращаться к визуальным материалам там, где структуры недостаточно.
• Изменение состояния: Повторный рендеринг, всплывающее окно или переход с задержкой могут сделать следующий шаг агента ошибочным. Прежде чем продолжать, проверьте получившееся состояние и дождитесь нужного текста или перехода.
• Конфликты профилей: Постоянный профиль может обслуживать только один экземпляр браузера одновременно. Для клиентов, параллельно работающих в одной рабочей области, Microsoft рекомендует изолированные сессии или разные значения --user-data-dir.
• Различия между средами: Docker-реализация из README поддерживает только Chromium в режиме headless. Не стоит считать, что в этом контейнере доступны все браузеры из общей таблицы CLI.
• Неполное покрытие: Переход на страницу не подтверждает корректную работу всех правил валидации, браузеров, устройств или результатов обработки на бэкенде. Скриншот тоже не доказывает, что заказ правильно сохранился. Таковы ограничения предлагаемого процесса проверки.

Ограничения профилей и Docker описаны в README Microsoft.

Доступ к браузеру означает реальный доступ. Microsoft прямо указывает, что Playwright MCP не является границей безопасности. Профиль по умолчанию сохраняет состояние браузера; дополнительное расширение Chrome/Edge может подключаться к уже открытым вкладкам и сессиям с выполненным входом. Для задач из этой статьи используйте изолированную сессию без импортированных cookie и без подключения к повседневному браузеру. Профили и работа расширения

Агент может запрашивать страницы, доступные из среды браузера. В зависимости от сети это могут быть не только публичные сайты, но и серверы разработки или внутренние сервисы. Правила для origin не заменяют сетевую изоляцию: --allowed-origins и --blocked-origins не ограничивают перенаправления и прямо обозначены как механизм, который не является границей безопасности. Параметр --allowed-hosts относится к проверке хостов входящих запросов MCP-сервера, а не к списку сайтов, которые разрешено посещать браузеру. Конфигурация и безопасность

Доступ к файлам требует такой же осторожности. Согласно документации, по умолчанию он ограничен корневыми каталогами рабочей области, а переходы по file:// заблокированы. Параметр --allow-unrestricted-file-access ослабляет эти правила. Microsoft описывает файловые проверки как предохранительные ограничения, а не как надёжную изоляцию. Ещё существеннее то, что browser_run_code_unsafe выполняет JavaScript в процессе сервера и получает возможности этого процесса. Управляйте доступом к инструменту через разрешения клиента и ограничивайте среду сервера. Схема конфигурации и инструменты

Скриншоты, текст страниц, сообщения консоли и тела запросов могут раскрывать данные агенту. Используйте вымышленные записи и только тестовые эндпоинты. Останавливайтесь до реального списания денег, отправки сообщения, создания аккаунта или другой отправки данных с последствиями, если именно это действие не было явно разрешено.

Что выбрать: Playwright MCP, Chrome DevTools MCP или Browserbase?

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

Microsoft также предоставляет --cdp-endpoint для подключения к эндпоинту браузера. Поэтому интерфейс, через который работает агент, и место запуска браузера — два отдельных решения. Browserbase — не другое название сервера Microsoft. Более широкий выбор разбираем в подборке лучших браузеров для ИИ-агентов.

Из чего складывается стоимость и какие два сервиса можно создать

Сравнивать стоит затраты на текущий процесс проверки и на весь автоматизированный процесс целиком. Репозиторий Playwright MCP распространяется по лицензии Apache, но его установка не предоставляет модель агента, вычислительные ресурсы, тестовые стенды или проверку человеком.

Подставьте собственные значения:

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

Как конкретный ориентир по хостингу: у Browserbase тариф Developer стоит $20 в месяц и включает 100 часов работы браузера, затем — $0.12 за час работы браузера. Это расходы на браузерную инфраструктуру, а не полная стоимость проверки оформления заказа агентом. Тарифы Browserbase

Наиболее перспективная идея: приёмочная проверка релизов как услуга

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

Признаки спроса пока скромные: оценки DataForSEO по англоязычным запросам в США, полученные в октябре 2026 года, показывают 110 запросов в месяц для «automated browser testing» и 10 для «checkout testing». Это поисковые запросы, а не покупатели. Такие данные дают основание сначала проверить спрос на узкую услугу у действующих клиентов, прежде чем вкладываться в полноценный программный продукт.

Главная сложность — поддержка: меняющиеся сценарии, неоднозначные условия проверок и ложные тревоги могут съесть трудозатраты, которые вы рассчитывали сэкономить. Устойчивое преимущество дают полезный приёмочный чек-лист и надёжный разбор результатов, а не установка общедоступного MCP-сервера, который может установить кто угодно.

Вторая идея: сервис проверки форм на тестовом стенде

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

В той же выборке DataForSEO по англоязычным запросам в США для «website form testing» оценивается 10 запросов в месяц. Для самостоятельного канала привлечения это слабый сигнал. Я бы продавал такую проверку как дополнение к обслуживанию сайта, а перед созданием отдельного продукта подтвердил бы устойчивый повторный спрос.

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

Частые вопросы о настройке

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

Если вам нужен процесс браузерных проверок, встроенный в выпуск релизов, мы разрабатываем ИИ-агентов для бизнес-процессов.