Тестирование в браузере с ИИ-агентом означает, что кодинг-агент открывает ваше веб-приложение в настоящем браузере, проходит по нему кликами и читает консоль, то есть проверяет собственную правку, а не гадает. Обычно браузер агенту дают через Playwright MCP, MCP-сервер, который превращает действия браузера в инструменты. Его можно добавить в Claude Code или Codex самостоятельно или взять AgentVera: он запускает для ваших агентов изолированный Chrome и показывает каждую вкладку в реальном времени.
В этом руководстве: что агент умеет делать в браузере, ручная настройка, браузер AgentVera и сценарий сквозной проверки изменения.
Зачем агенту браузер
Без браузера агент, меняющий интерфейс, может только читать код и надеяться. Он не видит, что кнопка спрятана под шапкой, что форма падает при отправке или что при загрузке в консоли появляется ошибка. В итоге вы становитесь глазами агента: открываете страницу, описываете проблему, вставляете текст ошибки.
С браузером цикл замыкается:
- Агент меняет код.
- Открывает страницу, проходит сценарий кликами и делает скриншот.
- Читает сообщения консоли.
- Исправляет найденное и проверяет снова.
Результат вы всё равно просматриваете сами, но очевидные поломки ловятся до вашего взгляда.
Что агент умеет с Playwright MCP
Playwright MCP отдаёт браузер как набор инструментов. Самые частые:
| Инструмент | Что с ним делает агент |
|---|---|
browser_navigate | Открывает URL, например ваш dev-сервер |
browser_snapshot | Читает структуру страницы (дерево доступности), чтобы найти элементы |
browser_click | Нажимает кнопку, ссылку или поле |
browser_type | Вводит текст в поле |
browser_take_screenshot | Снимает, как выглядит страница |
browser_console_messages | Читает логи и ошибки консоли |
Главное здесь снимок страницы (snapshot). Вместо угадывания координат в пикселях агент читает структурированное представление страницы и кликает по элементам через ссылки на них, что намного надёжнее.
Настройка Playwright MCP вручную
Для Claude Code добавьте сервер из каталога проекта:
claude mcp add playwright npx @playwright/mcp@latestДля Codex добавьте его в ~/.codex/config.toml:
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]Затем запустите dev-сервер и дайте агенту конкретную задачу:
Open http://localhost:3000/signup, fill the form with a test email,
submit it, and tell me what happens. Check the console for errors.Это работает, но вы не видите того, что видит агент, пока не попросите скриншоты, а в зависимости от способа запуска сервера браузер может делить состояние с тем, которым вы пользуетесь каждый день. Основы самого MCP разобраны в статье что такое MCP-сервер.
Браузер AgentVera
AgentVera — десктопное приложение для macOS, Windows и Linux, которое запускает CLI кодинг-агентов бок о бок. В нём есть собственный браузер для агентов на базе того же Playwright MCP.
Включение для агента
В диалоге агента у поля Browser три варианта:
| Вариант | Что делает |
|---|---|
| Off | Агент не пользуется браузером |
| AgentVera browser | Через Playwright MCP; вы смотрите вкладки в реальном времени на странице Browser в приложении |
| Claude in Chrome | Только для Claude Code: ваш собственный Chrome с расширением Claude (--chrome) |
Выберите AgentVera browser и запустите агента. AgentVera запускает отдельный headless-Chrome со своим профилем и подключает к нему Playwright MCP агента. Используется уже установленный на компьютере Chrome, Edge, Brave или Chromium. Ваш личный профиль Chrome, cookie и пароли в этот браузер не попадают.
Опция доступна агентам, которые работают с MCP-серверами: Claude Code, Codex, Gemini CLI, Copilot и большинству других поддерживаемых CLI. Удалённым агентам по SSH она недоступна.
Смотрите вкладки вживую и перехватывайте управление
На странице Browser в приложении видны вкладки, которые агент открывает по ходу работы. Это обычный браузер, а не запись: в любой момент можно кликать и печатать, чтобы перехватить управление, например войти в аккаунт или закрыть баннер с cookie, а потом вернуть управление агенту.
В панели инструментов есть всё привычное: адресная строка, назад, вперёд и обновление, поиск по странице, масштаб, закладки и история, а также Screenshot, который сохраняет снимок в папку «Загрузки». В контекстном меню есть Inspect для DevTools, а браузер можно открыть в отдельном окне. Страница также показывает адрес, к которому подключаются агенты.
Отправка ошибок консоли агенту
На странице Browser для каждой вкладки есть панель консоли. Два быстрых действия замыкают цикл без копирования и вставки:
- Fix errors отправляет агенту последние ошибки консоли с просьбой их исправить.
- У каждой строки есть Fix и Send to agent, так что можно выбрать одну ошибку.
Это тот же механизм отправки агенту, что и в остальном приложении; см. отправку агенту.
Откройте в нём свой dev-сервер
Когда агент запускает dev-сервер, порт появляется на вкладке Ports правой панели с вариантами Open in the AgentVera browser и Open in the system browser. Ссылки, которые печатают агенты, тоже открываются во встроенном браузере; чтобы открыть системный, удерживайте ⌥ при клике.
Браузер AgentVera входит в бесплатный тариф.
Сценарий сквозной проверки изменения
Вот схема, которая хорошо работает для правок интерфейса:
- Создайте агента с включённым AgentVera browser, лучше в отдельном git worktree.
- Попросите изменение и проверку сразу, например: «Добавь подсказку о надёжности пароля в форму регистрации. Затем открой страницу регистрации, попробуй слабый и сильный пароль, сделай скриншот каждого и проверь консоль».
- Следите за страницей Browser, пока агент работает. Если он застрял на входе в аккаунт, перехватите управление, войдите и скажите агенту продолжать.
- Если в консоли появились ошибки, нажмите Fix errors.
- Когда сценарий заработает, попросите агента записать его как файл теста Playwright, чтобы проверка с этого момента шла в CI.
- Перед слиянием просмотрите diff и скриншоты.
Пятый шаг важен. Браузер через MCP отлично находит и подтверждает проблемы, но это не набор тестов. Обычный файл теста гарантирует, что сценарий будет работать и через месяц.
Хорошие промпты
- «Открой страницу, сделай snapshot и перечисли все кнопки, которые ничего не делают при нажатии».
- «Поставь ширину как у телефона, сделай скриншот и исправь всё, что вылезает за экран».
- «Пройди оформление заказа с тестовой картой, затем перечисли все ошибки консоли и неудавшиеся запросы, которые увидел».
Точно указывайте URL и то, как выглядит успех. «Протестируй приложение» оставляет агенту слишком много свободы; «зарегистрируйся и убедись, что на дашборде показано имя нового пользователя» даёт цель, которую можно проверить.
Что стоит учитывать
- Агент может нажать на что угодно. Направляйте его на локальное или тестовое окружение, а не на продакшн с реальными данными.
- Входы в аккаунты. У браузера AgentVera свой профиль, поэтому войти в нём нужно один раз. Используйте тестовые аккаунты.
- Скриншоты расходуют контекст. Просите их, когда они нужны, а не на каждом шаге.
- Выбирайте подходящий вариант браузера. Claude in Chrome использует ваш настоящий Chrome и его сессии; браузер AgentVera держит их отдельно.
Если вы создаёте сайт с агентом с нуля, весь процесс показан в статье создание сайта с помощью ИИ, а привычки, которые не дают агенту сбиться с пути, описаны в как заниматься вайб-кодингом.
Скачайте AgentVera, чтобы дать агентам браузер, за которым можно наблюдать, или прочитайте подробнее на странице браузера для агентов.