# Тестирование в браузере с ИИ-агентом: пусть агент проверит

URL: https://agentvera.dev/ru/blog/ai-agent-browser-testing/ · Опубликовано: 2026-10-24

Тестирование в браузере с ИИ-агентом через Playwright MCP: агент открывает ваше веб-приложение в настоящем браузере, кликает, читает консоль и чинит ошибки.

**Коротко:**

- С Playwright MCP кодинг-агент открывает страницы, кликает, вводит текст, делает скриншоты и читает сообщения консоли, то есть сам проверяет свои правки в настоящем браузере.
- Playwright MCP можно добавить в Claude Code или Codex вручную; AgentVera запускает для него изолированный Chrome и показывает вкладки в реальном времени.
- Браузер AgentVera работает со своим профилем, без ваших личных cookie и паролей, а ошибки консоли уходят агенту одним кликом.

**Тестирование в браузере с ИИ-агентом означает, что кодинг-агент открывает ваше веб-приложение в настоящем браузере, проходит по нему кликами и читает консоль, то есть проверяет собственную правку, а не гадает.** Обычно браузер агенту дают через Playwright MCP, MCP-сервер, который превращает действия браузера в инструменты. Его можно добавить в Claude Code или Codex самостоятельно или взять AgentVera: он запускает для ваших агентов изолированный Chrome и показывает каждую вкладку в реальном времени.

В этом руководстве: что агент умеет делать в браузере, ручная настройка, браузер AgentVera и сценарий сквозной проверки изменения.

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

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

С браузером цикл замыкается:

1. Агент меняет код.
2. Открывает страницу, проходит сценарий кликами и делает скриншот.
3. Читает сообщения консоли.
4. Исправляет найденное и проверяет снова.

Результат вы всё равно просматриваете сами, но очевидные поломки ловятся до вашего взгляда.

## Что агент умеет с 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 добавьте сервер из каталога проекта:

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

Для Codex добавьте его в `~/.codex/config.toml`:

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

Затем запустите dev-сервер и дайте агенту конкретную задачу:

```text
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-сервер](/ru/blog/what-is-mcp-server/).

## Браузер AgentVera

[AgentVera](/ru/) — десктопное приложение для 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**, так что можно выбрать одну ошибку.

Это тот же механизм отправки агенту, что и в остальном приложении; см. [отправку агенту](/ru/features/send-to-agent/).

### Откройте в нём свой dev-сервер

Когда агент запускает dev-сервер, порт появляется на вкладке Ports правой панели с вариантами **Open in the AgentVera browser** и **Open in the system browser**. Ссылки, которые печатают агенты, тоже открываются во встроенном браузере; чтобы открыть системный, удерживайте ⌥ при клике.

Браузер AgentVera входит в бесплатный тариф.

## Сценарий сквозной проверки изменения

Вот схема, которая хорошо работает для правок интерфейса:

1. Создайте агента с включённым **AgentVera browser**, лучше в отдельном git worktree.
2. Попросите изменение и проверку сразу, например: «Добавь подсказку о надёжности пароля в форму регистрации. Затем открой страницу регистрации, попробуй слабый и сильный пароль, сделай скриншот каждого и проверь консоль».
3. Следите за страницей Browser, пока агент работает. Если он застрял на входе в аккаунт, перехватите управление, войдите и скажите агенту продолжать.
4. Если в консоли появились ошибки, нажмите **Fix errors**.
5. Когда сценарий заработает, попросите агента записать его как файл теста Playwright, чтобы проверка с этого момента шла в CI.
6. Перед слиянием просмотрите diff и скриншоты.

Пятый шаг важен. Браузер через MCP отлично находит и подтверждает проблемы, но это не набор тестов. Обычный файл теста гарантирует, что сценарий будет работать и через месяц.

### Хорошие промпты

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

Точно указывайте URL и то, как выглядит успех. «Протестируй приложение» оставляет агенту слишком много свободы; «зарегистрируйся и убедись, что на дашборде показано имя нового пользователя» даёт цель, которую можно проверить.

## Что стоит учитывать

- **Агент может нажать на что угодно.** Направляйте его на локальное или тестовое окружение, а не на продакшн с реальными данными.
- **Входы в аккаунты.** У браузера AgentVera свой профиль, поэтому войти в нём нужно один раз. Используйте тестовые аккаунты.
- **Скриншоты расходуют контекст.** Просите их, когда они нужны, а не на каждом шаге.
- **Выбирайте подходящий вариант браузера.** Claude in Chrome использует ваш настоящий Chrome и его сессии; браузер AgentVera держит их отдельно.

Если вы создаёте сайт с агентом с нуля, весь процесс показан в статье [создание сайта с помощью ИИ](/ru/blog/build-website-with-ai/), а привычки, которые не дают агенту сбиться с пути, описаны в [как заниматься вайб-кодингом](/ru/blog/how-to-vibe-code/).

[Скачайте AgentVera](/ru/download/), чтобы дать агентам браузер, за которым можно наблюдать, или прочитайте подробнее на странице [браузера для агентов](/ru/features/agent-browser/).

## Частые вопросы

**Как ИИ-агент пользуется браузером?** Через MCP-сервер, например Playwright MCP. Сервер отдаёт действия браузера как инструменты: перейти по адресу, кликнуть, ввести текст, сделать скриншот, прочитать сообщения консоли. Агент вызывает их так же, как любые другие инструменты.

**Это то же самое, что писать тесты на Playwright?** Нет. С Playwright MCP агент управляет браузером вживую, как вы проверяли бы правку руками. Это удобно для исследования и проверки. Для проверок, которые идут на каждом коммите, попросите агента превратить найденное в обычные файлы тестов Playwright.

**Видит ли браузер AgentVera мои личные данные Chrome?** Нет. AgentVera запускает отдельный Chrome со своим профилем. Ваш личный профиль Chrome, cookie и пароли до него не доходят.

**Какие агенты могут пользоваться браузером AgentVera?** Те, что работают с MCP-серверами: Claude Code, Codex, Gemini CLI, Copilot и большинство других поддерживаемых CLI. Aider MCP не поддерживает. Удалённым агентам по SSH эта опция недоступна.

**Какой браузер нужен AgentVera?** Установленный Chrome, Edge, Brave или Chromium. AgentVera запускает его со своим профилем и подключает к нему Playwright MCP, так что отдельный браузер для агента ставить не нужно.

---

**Об AgentVera.** AgentVera — настольное приложение для macOS, Windows и Linux от Solviera Teknoloji. Оно запускает 18 ИИ-агентов для программирования (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) рядом, по проектам, в настоящих терминалах с собственными установками CLI и входами пользователя. В бесплатном тарифе количество агентов не ограничено. Скачать: https://agentvera.dev/ru/download/ · Цены: https://agentvera.dev/ru/pricing/