Эта страница переведена с помощью Cloud Translation API.

Автоматизируйте тестирование пользовательского интерфейса с помощью Gemini CLI, BrowserMCP и Playwright.

1. Введение

Тестирование веб-приложений может быть утомительным занятием. Традиционное тестирование пользовательского интерфейса часто напоминает постоянную борьбу с уязвимостью. Приходится писать сложные скрипты, управлять хрупкими CSS и XPath селекторами и преодолевать множество препятствий, чтобы просто проверить работоспособность простого пользовательского сценария.

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

В этом практическом занятии мы рассмотрим, как использовать Gemini CLI и инструменты для работы с мультимодальными интерфейсами, такие как BrowserMCP. Вы узнаете, как создавать и запускать автоматизированные тесты пользовательского интерфейса с использованием естественного языка. Обратите внимание, что для участия в этом практическом занятии не требуется предварительных знаний о фреймворках и инструментах для тестирования пользовательского интерфейса.

Что вы узнаете

Что такое протокол контекста модели (MCP) и почему он меняет правила игры.
Как BrowserMCP позволяет агентам искусственного интеллекта управлять веб-браузерами.
Как запускать автоматизированные тесты пользовательского интерфейса из Gemini CLI.
Понимание навыков агентов и их преимуществ.
Обучение агента использованию программы Playwright в сочетании с определенным навыком.
Краткий обзор субагента Antigravity Browser.
Другие варианты использования управления браузером.

Что вы будете делать

Настройте среду разработки.
Ознакомьтесь с демонстрационным приложением, которое нуждается в тестировании.
Для взаимодействия с приложением через BrowserMCP используйте Gemini CLI.
Научите своего агента использовать Playwright с навыком работы с агентами.

2. Предварительные требования

Прежде чем мы перейдем к самому интересному, давайте убедимся, что у вас есть все необходимое.

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

Инструменты

Для выполнения этой лабораторной работы предполагается, что у вас уже есть:

браузер Chrome
Gemini CLI (который, в свою очередь, зависит от Node.js )
Гит

В инструкциях предполагается, что вы работаете в среде Linux (или WSL) или macOS. Если вы используете Windows (как и я), вы можете следовать инструкциям, используя WSL .

(Обратите внимание, что

BrowserMCP не будет работать из Google Cloud Shell.

(Поскольку он будет подключаться только к локальному браузеру, работающему на том же компьютере.)

Создайте проект в Google Cloud.

Если у вас уже есть ключ API Gemini, вы можете использовать его и пропустить этот шаг.

В противном случае вам понадобится проект Google Cloud, чтобы следовать инструкциям. Мы не будем развертывать никакие сервисы Google Cloud, но вам понадобится проект, чтобы связать с ним ключ API Gemini. (Ключ необходим для использования Gemini.)

Если вы знакомы с Google Cloud, вы можете создать новый проект здесь . В качестве альтернативы, вы можете создать проект Google Cloud прямо из Google AI Studio .

Создайте бесплатный API-ключ Gemini.

Теперь создайте свой API-ключ Gemini в Google AI Studio . Нажмите «Получить API-ключ».

Вы увидите что-то подобное:

Здесь будут перечислены ваши существующие ключи, если таковые имеются. Или, чтобы создать новый ключ, нажмите «Создать ключ API».

Здесь вы можете выбрать существующий проект Google Cloud или создать новый. Я создал новый проект под названием agentic-ui-demo:

На данный момент у нас есть проект и соответствующий API-ключ Gemini. Мы еще не включили оплату, поэтому ограничены щедрой бесплатной квотой. Но если вам нужно больше квоты, вы можете включить оплату, нажав на кнопку «Настроить оплату».

Настройка среды разработки

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

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

Далее создайте копию файла .env.template , назвав его .env . Это можно сделать в редакторе или просто выполнить следующую команду:

cp .env.template .env

Обновите этот файл .env, указав свой API-ключ. (Помните: никогда не добавляйте в репозиторий файл .env информацию, подобную вашему API-ключу!) Самый простой способ сделать это — открыть его в редакторе.

Теперь давайте загрузим переменную окружения:

source .env

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

make install

3. Наше демонстрационное приложение

Сегодня мы тестируем приложение The Dazbo Omni-Dash — футуристическую панель управления телеметрией безопасности в темном стиле. (Да, она была написана с использованием Vibe Code!)

Почему именно это приложение?

Он создан для обеспечения реалистичной тестовой поверхности, обладающей следующими характеристиками:

Имитация аутентификации: процесс входа в систему, требующий ввода определенных учетных данных.
Динамический контент: карты телеметрии и журналы безопасности, имитирующие данные в реальном времени.
Интерактивные состояния: Навигационные меню и поля ввода форм, изменяющиеся в зависимости от действий пользователя.
Современные технологии: Создано с использованием React и Vite для быстрой и отзывчивой работы.

Запуск приложения

Для запуска приложения просто выполните команду:

make dev

Сервер разработки должен запуститься очень быстро, и приложение будет доступно по адресу http://localhost:5173 .

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

4. Сложности тестирования пользовательского интерфейса

Традиционное тестирование пользовательского интерфейса, как известно, крайне сложно правильно организовать и ещё сложнее поддерживать. К распространённым проблемам относятся:

«Нестабильность» тестов: тесты, которые проходят одну минуту, а на следующей терпят неудачу из-за проблем со временем, состояний гонки или медленной загрузки ресурсов.
Ненадежные селекторы: зависимость от определенных структур DOM (например, div > div > button), которые ломаются при малейшем изменении пользовательского интерфейса, что приводит к постоянной необходимости поддержки скриптов.
Высокая сложность освоения: от разработчиков требуется освоить сложные предметно-ориентированные языки программирования и особенности фреймворков (Cypress, Selenium, Playwright) только для того, чтобы автоматизировать простой клик.
Соответствие среды: Борьба со сложно воспроизводимыми состояниями приложения и дополнительными затратами на очистку тестовых данных.

Нам нужен способ тестирования, который фокусируется на намерениях, а не на реализации .

5. MCP спешит на помощь

Протокол контекста модели (MCP) — это открытый стандарт, позволяющий моделям и агентам искусственного интеллекта взаимодействовать с внешними инструментами, API и данными. Представьте его как универсальный адаптер, позволяющий моделям и агентам находить и запускать доступные им инструменты.

Традиционно интеграция больших языковых моделей (LLM) с внешними данными и инструментами требовала от разработчиков написания пользовательских, жестко закодированных API-подключений для каждого нового источника данных, что создавало неустойчивую проблему интеграции типа «M x N», где каждая новая модель и инструмент многократно увеличивают нагрузку на обслуживание. Протокол контекста модели (MCP) решает эту проблему, устраняя необходимость написания специального кода для управления этими возможностями. Вместо явного кодирования сложных рабочих процессов выполнения разработчики могут полагаться на LLM для интерпретации запросов пользователя на естественном языке и динамического определения того, какие инструменты использовать в режиме реального времени.

Когда пользователь вводит команду на естественном языке (например , «Перейдите на localhost:5173, войдите как 'admin' и нажмите кнопку «Отправить» ), LLM обнаруживает доступные возможности и генерирует структурированный запрос для вызова конкретного инструмента. Клиент MCP выступает в роли транслятора, перенаправляя этот запрос на указанный сервер MCP, который выполняет действие или получает данные и возвращает контекст модели. Это позволяет ИИ действовать автономно, без необходимости для разработчика жестко прописывать конкретный путь выполнения.

Благодаря созданию универсального стандарта MCP, который часто называют «USB-C для приложений ИИ», открывается возможность массового повторного использования готовых решений . Разработчики могут создать сервер MCP один раз, и любой совместимый с MCP хост ИИ сможет мгновенно к нему подключиться, устраняя проблему интеграции M x N. Вам больше не нужно создавать пользовательские API-мосты для каждой платформы; вместо этого вы можете использовать экосистему готовых серверов MCP с открытым исходным кодом для распространенных сервисов, таких как GitHub, Slack, базы данных и т. д., подключая их напрямую к вашим рабочим процессам агентной интеграции. Эта модульная архитектура, работающая по принципу «подключи и работай», гарантирует, что если вы позже смените поставщика LLM или обновите свои инструменты, ваша основная интеграционная инфраструктура останется полностью неизменной.

6. Автоматизация с помощью BrowserMCP

Что такое BrowserMCP?

Это первый инструмент, с которым мы сегодня поработаем. BrowserMCP — это MCP-сервер, который предоставляет агентам ИИ «глаза» и «руки», необходимые для взаимодействия с веб-браузером. В двух словах, он имитирует взаимодействие человека с браузером. Это проект с открытым исходным кодом, и вы можете ознакомиться с репозиторием на GitHub здесь . Ознакомиться с основной документацией BrowserMCP можно здесь .

Вот некоторые из его возможностей:

Она может переходить по URL-адресам.
Она может проверять DOM.
Он может нажимать кнопки и вводить текст в формы.
Она поддерживает перетаскивание объектов.
Она может читать логи консоли браузера.
Это быстро: автоматизация происходит локально на вашем компьютере.

Установка Browser MCP

Для использования BrowserMCP необходимо выполнить два действия:

Установите расширение BrowserMCP в Chrome (или любой другой браузер на основе Chromium).
Настройте сервер MCP для вашего агента.

Для установки расширения просто следуйте инструкциям здесь . Это займет всего несколько секунд. После установки нажмите кнопку «Подключить» в расширении, чтобы ваш агент мог управлять текущей вкладкой. (Очевидно, что в текущей вкладке должна быть запущена демонстрационная версия приложения!)

Далее нам необходимо добавить конфигурацию MCP в наш клиент:

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

Где это настраивается? Это зависит от вашего агента. Например, в Gemini CLI: ~/.gemini/settings.json . Это будет выглядеть примерно так:

Тестирование с помощью BrowserMCP

А теперь самое интересное. Сначала запустим Gemini CLI (с помощью команды gemini ) в новой терминальной сессии. (Напомним, что демонстрационное приложение запущено в нашей исходной терминальной сессии.) Внутри Gemini CLI выполните команду ` /mcp , чтобы убедиться в правильности установки. Вы должны увидеть список инструментов, примерно такой:

Если вы не запустили демонстрационное приложение ранее, запустите его сейчас:

make dev

Нам нужно открыть приложение в браузере Chrome и подключить расширение BrowserMCP в этой вкладке. Перейдите по ссылке из команды run . Затем щелкните значок расширения BrowserMCP и нажмите «Подключить».

Теперь мы можем использовать Gemini CLI для запуска теста. Скопируйте и вставьте эту командную строку в Gemini CLI:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Gemini CLI может сначала проверить, запущено ли демонстрационное приложение на указанном порту. Затем он предложит вам подтвердить действия, которые планирует выполнить инструмент:

Разрешите Gemini CLI запустить все инструменты BrowserMCP для этой сессии. Затем вернитесь в браузер и наблюдайте за автоматическим взаимодействием!

Несколько замечаний по поводу приведенного выше задания:

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

Круто, правда?

На этом пока всё с BrowserMCP, поэтому отключите его в своём браузере.

7. Автоматизация с помощью навыков и драматурга

Ограничения BrowserMCP

BrowserMCP — отличная программа, но у неё есть несколько ограничений. Например:

Для этого требуется уже существующая сессия браузера с подключенным расширением BrowserMCP. (Новые сессии не создаются.)
Он не поддерживает браузеры, отличные от Chromium.
Для этого необходимо запустить отдельный браузерный процесс на том же компьютере, где работает сервер MCP.
Оно не может работать с локальной файловой системой. Например, оно не может создавать локальные файлы для подтверждения скриншотов или загружать и сохранять файлы из веб-приложения, такие как загружаемые PDF-файлы.
Это недетерминированная система. Она будет пытаться выполнять действия, которые вы ей укажете, но локальное состояние, например, неожиданное всплывающее окно, может нарушить взаимодействие.
Он не поддерживает работу в "безголовом" режиме, то есть не может запускаться в конвейере CI/CD без реального окна браузера.

Драматург

Playwright — гораздо более сложный инструмент. Это хорошо зарекомендовавшая себя платформа для автоматизации и тестирования браузеров с открытым исходным кодом. Она может делать многое из того, что не может BrowserMCP, включая все перечисленные выше функции.

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

Но с такими дополнительными возможностями значительно усложняется и процесс обучения.

Навыки

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

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

Вот что действительно умно: поэтапное раскрытие информации. Вместо того чтобы втискивать в начальный запрос системы LLM все мыслимые документы API и правила фреймворка тестирования — что занимает всё контекстное окно и расходует токены с невероятной скоростью — агент считывает навык только тогда, когда это действительно необходимо. Это позволяет сохранить базовый контекст лаконичным и эффективным, получая подробные инструкции «как это сделать» именно тогда, когда это нужно. И да, навык, безусловно, может включать инструкции по использованию конкретных серверов MCP для выполнения задачи.

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

Если вы хотите узнать больше о навыках, ознакомьтесь со следующей информацией:

Почему навыки идеально подходят для драматурга

Использование навыка здесь — отличное решение. Playwright невероятно мощный инструмент, но его синтаксис может быть сложным. Предоставив агенту навык Playwright, нам не нужно беспокоиться о том, что наш магистр права будет распознавать устаревший синтаксис или писать ненадежные селекторы. Мы предоставляем ему тщательно отобранное, авторитетное руководство о том, как правильно использовать Playwright.

Я собираюсь использовать Playwright CLI и связанный с ним навык.

При таком подходе мы устанавливаем Playwright CLI локально, а затем предоставляем нашему агенту необходимые знания для его использования. Во избежание путаницы: я не устанавливаю сервер Playwright MCP.

Установка

Для начала установим открытый исходный код Microsoft Playwright CLI. Если вы еще этого не сделали, закройте Gemini CLI, набрав / quit`. Затем в терминале:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

А теперь добавим навык. Эта команда загрузит подпапку с навыком непосредственно с GitHub в нашу папку Gemini skills:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Теперь мы можем это проверить.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Это должно запустить сессию браузера, открытую по указанному URL-адресу.

Я также хочу, чтобы Gemini мог использовать Playwright в режиме "с управлением", то есть с видимым пользовательским интерфейсом. Но навык не указывает Gemini, как это сделать. Поэтому я добавил следующие строки в раздел Core ~/.gemini/skills/playwright-cli/SKILL.md :

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Тестирование с помощью Playwright

Как и прежде, нам нужно запустить приложение (если оно еще не запущено). Сделайте это из начальной сессии терминала:

make dev

Затем в другой терминальной сессии временно отключим BrowserMCP, чтобы агент не путался в выборе используемых инструментов. Перезапустите Gemini CLI и выполните следующую команду:

/mcp disable browsermcp

Теперь мы попросим Gemini перейти к нашему приложению с помощью Playwright. Но в отличие от BrowserMCP, нам не нужно сначала запускать браузер. Playwright сделает это за нас с помощью локального процесса.

Введите следующую команду в командную строку Gemini:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Как всегда, Gemini CLI запросит разрешение перед запуском любых инструментов.)

В чём здесь отличие?

Нам не нужно было сначала запускать браузер.
Нам не потребовалось запускать и подключать расширение для браузера.
Нам не нужно сначала сообщать агенту о необходимости выйти из системы. Тест запускается из "чистой" сессии.
Мы можем делать скриншоты и сохранять их в локальные файлы.

Вскоре после этого в output папке должен появиться файл dashboard.png .

Обратите внимание, что вы увидите вызовы инструментов, выполняемые в Gemini CLI, но не увидите пользовательский интерфейс в браузере. Это потому, что Playwright по умолчанию работает в «безголовом режиме».

Но если вы запустите программу повторно с измененным приглашением, вы также сможете увидеть пользовательский интерфейс:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

Вкратце, вывод Gemini CLI должен выглядеть примерно так:

Как же это было здорово!

8. Это можно сделать в условиях антигравитации без дополнительной настройки!

В состав Google Antigravity входит Browser Subagent , предоставляющий возможности, аналогичные Playwright CLI. Когда вы запрашиваете у Gemini в Antigravity интерактивное создание URL-адреса, этот субагент запускается автоматически.

Этот вспомогательный агент берет вашу основную задачу (например, «Проверить работоспособность формы входа»), визуально анализирует макет страницы с помощью скриншотов и DOM, а затем самостоятельно определяет клики и нажатия клавиш. По сути, это визуальный, мультимодальный ИИ, перемещающийся по сети так же, как это делал бы человек. И самое лучшее? Он автоматически записывает видео и делает скриншоты всего, что делает, сохраняя их прямо в ваше локальное рабочее пространство в качестве визуального доказательства выполненной работы. Компания Antigravity называет эти визуальные доказательства «артефактами» .

Примечание для пользователей WSL: заставить работать Browser Agent в Antigravity — довольно сложная задача. Мне удалось это сделать , но я обнаружил, что подагент работает нестабильно и ненадежно в этой среде. Вот почему мне так нравится Playwright CLI!

9. Другие варианты использования автоматизации браузера

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

Если вы создаёте собственных агентов искусственного интеллекта, вот несколько способов, как вы можете использовать такие инструменты, как BrowserMCP или Playwright CLI, для выполнения основной работы:

Персональный помощник по исследованиям: Представьте, что вы указываете своему агенту на определенный URL-адрес и просите его провести исследование по определенной теме, но для доступа к сайту требуется авторизация и навигация по сложным меню. Вместо того чтобы писать собственный веб-скрейпер, который сломается на следующей неделе, вы просто говорите своему агенту войти в систему, найти нужные данные и составить для вас краткое изложение.
Интегратор «на ходу»: У всех нас есть устаревшие интранет-системы, у которых нет API. Вы знаете, о каких я говорю — когда приходится вручную копировать данные из системы А и вставлять их в форму в системе Б. Агент с автоматизацией браузера может выступать в качестве универсального связующего звена, считывая экран устаревшей системы и заполняя форму в новой.
Автоматизированная сортировка и устранение неполадок: Получили оповещение P1 от вашей системы мониторинга в 3 часа ночи? Ваш агент может автоматически открыть URL-адрес конкретной панели мониторинга, прочитать графики или журналы (используя возможности многомодального компьютерного зрения) и опубликовать сводку непосредственно в вашем канале Slack, сэкономив вам драгоценные минуты во время инцидента.

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

10. Заключение

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

Вы узнали:

Тестирование пользовательского интерфейса не обязательно должно быть сложным: сосредоточившись на цели теста, а не на хрупкой реализации DOM, мы можем значительно сократить затраты на его обслуживание.
Протокол контекста модели (MCP) предоставляет вашим агентам универсальный доступ к инструментам, данным и средам по принципу «подключи и работай».
BrowserMCP — это невероятный инструмент для интеграции возможностей агентского управления в ваши локальные, существующие сессии Chrome.
Skills и Playwright CLI открывают новый уровень повторяемого, детерминированного автоматизированного тестирования — и все это благодаря прогрессивному раскрытию информации.
Вспомогательный браузерный агент Antigravity делает еще один шаг вперед, внедряя автономную многомодальную навигацию и запись артефактов прямо из коробки.

А теперь вперед, автоматизируйте скучные задачи!

Полезные ссылки

Если вы хотите глубже изучить инструменты и концепции, которые мы сегодня рассмотрели, ознакомьтесь с этими ресурсами:

Код репозитория

Репозиторий agentic-ui-testing на GitHub

Основные инструменты и фреймворки

Агентские концепции и навыки

Другой

Работа с Google Antigravity в WSL