Опубликовано: 22 июня 2026 г.
P2ER , агентство цифровых решений, использует Chrome DevTools для агентов, чтобы гарантировать, что только проверенное, работающее программное обеспечение передается людям для окончательной проверки. Преобразовав свой рабочий процесс в агентную инфраструктуру, они предоставили агентам ИИ возможность проводить эмпирическую проверку пользовательского интерфейса, увеличив частоту развертывания с одного раза в неделю до нескольких раз в день.
Задача: обеспечить масштабируемое качество в существующих приложениях.
Компания P2ER предоставляет высококачественные цифровые решения для мировых брендов, включая автопроизводителей, часовые компании и предприятия гостиничного бизнеса. Их главная проблема, как и для многих других компаний, заключалась в работе со сложными существующими приложениями. Внедряя агентное программирование, команда столкнулась с тремя основными препятствиями:
- Надежное тестирование пользовательского интерфейса. Стандартные наборы тестов испытывали трудности с динамическими данными, такими как колебания цен на отели или сезонные предложения в некоторых проектах P2ER. Имитационные данные часто скрывали недостатки интеграции, которые тестировщик-человек обнаружил бы немедленно.
- Проблемы с надежностью агентов. Без явных инструкций агенты ИИ иногда заявляли о завершении задачи, не проверяя это на практике.
- Потеря контекста. Обширные задачи и тайм-ауты модели приводили к тому, что агенты теряли из виду цели сессии. Это затрудняло разработчикам отслеживание и продолжение работы, начатой агентом.
Решение: Создать инфраструктуру для развития ремесленного мастерства.
Компания P2ER создала инфраструктуру, в которой ИИ рассматривается как «партнер по спаррингу», способный также выполнять повторяющиеся задачи разработки. Такой подход позволяет команде масштабировать мастерство, сосредоточившись на архитектуре и творческом решении проблем.
Внедрите эмпирическую проверку с помощью DevTools для сервера MCP агентов.
Для обеспечения надежности P2ER ввел правило обязательной эмпирической проверки. Это инженерное требование, закрепленное в файле AGENTS.md проекта, гласит:
All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.
Вместо того чтобы верить агенту на слово, команда использует Chrome DevTools для агентов, чтобы предоставить им безопасную среду для визуальной и интерактивной навигации по приложению.
Эти «тестовые агенты» выполняют несколько ключевых задач, которые не выполняются стандартными статическими тестами:
- Динамическое тестирование данных: даже в тестовой среде агенты тестируют приложение на реальных, изменяющихся данных (например, на меняющихся ценах на отели в зависимости от сезона), чтобы точно воспринять его так, как это сделал бы пользователь. Это обеспечивается инструментами взаимодействия DevTools для агентов, такими как
new_page,navigate_page,fill,clickиhover, которые указываются в их навыкеgithub-issue-test, позволяя агенту динамически аутентифицироваться и имитировать реалистичный путь клика пользователя. - Визуальный аудит: Агенты выявляют визуальные несоответствия между макетами Figma и фактической реализацией. Используя инструмент
take_screenshotиз DevTools для агентов, их навыкfigma-validateделает снимки экрана высокого разрешения рендеров Storybook в реальном времени для сравнения с экспортированными в Figma изображениями. - Проверка удобства использования: Агенты выявляют отсутствующие переводы или ошибки удобства использования, которые часто упускаются из виду автоматизированными скриптами. Взаимодействуя напрямую с деревом доступности и просматривая визуальные снимки, полученные с помощью
take_snapshotиtake_screenshot, агенты активно сканируют пользовательский интерфейс на наличие аномалий, таких как строки MISSING_MESSAGE, как это явно указано в их автоматизированных рабочих процессах проверки.
Разложить на подзадачи и сохранить их в неизменном виде.
Для борьбы с таймаутами сессий и потерей контекста P2ER строго разделяет работу между субагентами. Затем они дают своим агентам указания действовать в качестве координаторов следующим образом:
Rather than executing everything in the main thread, you must decompose large
or complex objectives into modular subtasks that can be delegated
to specialized subagents.
Чтобы держать владельцев продукта в курсе этого процесса, команда интегрировала специальный навык для агентов, позволяющий отслеживать их работу в задачах GitHub. Это гарантирует, что каждая задача субагента и ее результаты сохраняются и документируются как подзадача с использованием API GitHub, создавая четкий след аудита и постоянный контекст, который могут использовать другие разработчики.
Изолируйте среды для параллельного выполнения.
Для масштабирования процесса разработки, позволяющего нескольким агентам выполнять код параллельно, P2ER требует создания изолированных сред для каждой задачи. Это предотвращает конфликты состояний и проблемы с сетью во время проверки пользовательского интерфейса.
Техническая конфигурация для этой изоляции включает в себя:
- Изолированные рабочие деревья Git: Чтобы предотвратить конфликты файлов и загрязнение рабочего пространства при параллельной работе нескольких агентов, задачи выполняются в изолированных рабочих деревьях Git. Каждому агенту выделяется отдельное пространство файловой системы, куда копируются переменные среды и создаются символические ссылки на зависимости, что гарантирует, что изменения файлов никогда не перезапишут друг друга.
- Уникальные среды: Каждый агент и задача запускают свой сервер разработки Next.js на уникальном изолированном порту. В соответствии с правилами проекта, серверы запускаются динамически с помощью
npx next dev -p <custom_port> --turbopackдля обеспечения параллельного выполнения без сетевых конфликтов. - Клонирование баз данных: Чтобы предотвратить конфликты данных во время параллельного тестирования, P2ER программно дублирует основную базу данных в схему, специфичную для задачи, при запуске агента. После того, как агент завершит проверку и задача будет одобрена, автоматический процесс очистки удаляет изолированную базу данных. Этот жизненный цикл гарантирует, что каждый агент работает в чистом рабочем пространстве и не оставляет после себя никаких "висящих" данных.
- Целенаправленное тестирование: Все браузерные тесты с использованием Chrome DevTools для агентов должны быть нацелены на точно заданный пользовательский порт, выделенный для конкретного экземпляра агента. В требованиях к тестированию запрещено жесткое кодирование портов по умолчанию, поэтому необходимо указывать целевые URL-адреса для тестирования, например,
http://localhost:<custom_port>.
Результат: десятикратное увеличение скорости разработки при сохранении качества.
Переход к агентному программированию с высокими уровнями доверия кардинально изменил результаты работы P2ER. Эти изменения изначально были необходимы для обеспечения надежной работы агента, но они также принесли пользу всему циклу разработки:
- В 10 раз более быстрые рабочие циклы: большинство проблем теперь решаются в течение одного дня, по сравнению с предыдущим средним показателем в 1–3 дня. Частота развертывания увеличилась с одного раза в неделю до нескольких раз в день.
- Стратегический фокус для команд контроля качества : поскольку агенты теперь выявляют базовые регрессии и «легкодоступные уязвимости», команда тестировщиков может сосредоточиться на более сложных и детальных сценариях тестирования.
- Надежные реализации для заинтересованных сторон: Теперь реализации стали более устойчивыми, поскольку тестирование выходит за рамки стандартного «оптимального сценария» разработки программного обеспечения.
- Более четкая коммуникация и отслеживаемость: благодаря применению правила «от человеческого фактора к подвопросу внедрения» заинтересованные стороны получают четкие инструкции о том, какие логичные улучшения были внесены, вместо того чтобы просматривать заявки, перегруженные техническими деталями внедрения и способами их тестирования.
В качестве примера того, как это влияет на скорость разработки, компания P2ER создала новую платформу за шесть месяцев, на что при использовании их традиционных методов ушло бы много лет. Человек по-прежнему остается последним звеном контроля качества, проверяя запросы на слияние (Pull Requests), которые уже были подтверждены агентами.
Технические рекомендации для команд
В процессе разработки этого рабочего процесса компания P2ER выявила несколько стратегий, которые помогли ей перейти от экспериментирования к зрелой модели разработки с использованием агентов.
Эти стратегии могут помочь другим командам усовершенствовать собственные реализации агентских систем:
Оптимизация использования токенов с помощью внедрения скриптов и пакетной обработки через командную строку.
Серверы MCP могут стать ресурсоемкими с точки зрения использования токенов во время длительных сеансов разработки, если агенты полагаются исключительно на пошаговую навигацию (например, создание снимка состояния, поиск идентификатора, заполнение поля ввода и ожидание). Для минимизации этих накладных расходов P2ER использует двухэтапный подход:
- Внедрение скриптов непосредственно в код: для целенаправленного взаимодействия, например, аутентификации через сложные формы React, агенты используют инструмент
evaluate_scriptдля внедрения чистого JavaScript непосредственно в браузер. Это позволяет обойти встроенные переопределения сеттеров и выполнить несколько действий одновременно, экономя множество диалогов. - Пакетная обработка скриптов CLI: Когда агенты сталкиваются с «проблемой» или чрезвычайно длинным, повторяющимся потоком действий в браузере, они переключаются на резервный вариант пакетной обработки CLI. Вместо того чтобы тратить токены на повторяющиеся отдельные инструменты MCP или писать пользовательские скрипты автоматизации с нуля, P2ER предлагает CLI Chrome DevTools сохранять и объединять действия в браузере. Это позволяет агентам программно выполнять целые многошаговые потоки за один раз, значительно снижая накладные расходы на постоянную связь между моделью и инструментом.
Автоматизируйте отслеживание производительности с помощью анализа трассировки.
Вместо того чтобы полагаться исключительно на человеческое восприятие, P2ER создала навык review-performance , который использует инструменты разработчика для агентов, чтобы запускать автоматизированные аудиты Lighthouse и трассировки производительности.
Агенты используют инструменты performance_start_trace и performance_analyze_insight для сбора и анализа основных параметров веб-разработки (LCP, INP, CLS) и выявления узких мест в основном потоке или изменений в макете. Для завершения проверки качества агенты могут запустить полный lighthouse_audit , чтобы специально предотвратить регрессии в доступности (a11y), SEO и общих передовых методах веб-разработки, гарантируя, что для запроса на слияние (Pull Request) будет отправлен только высококачественный код.
Улучшена проверка подлинности с помощью инструментов разработчика Chrome для агентов.
В дополнение к своим собственным функциям, P2ER использует основные возможности сервера MCP Chrome DevTools for agents для функциональной проверки. Это включает в себя использование сервера для эмуляции различных устройств и проверки отзывчивости, чтобы убедиться, что пользовательский интерфейс работает на экранах разных размеров и устройств.
Используя сервер MCP для навигации по приложению, агенты могут выявлять визуальные несоответствия между макетами и фактической реализацией, обнаруживая ошибки, которые часто упускаются из виду статическими тестами.
Ресурсы
Чтобы подробнее изучить варианты использования P2ER, ознакомьтесь со всеми упомянутыми навыками в соответствующем репозитории GitHub .
Чтобы начать работу и узнать больше о реализации аналогичных рабочих процессов с помощью DevTools для агентов, ознакомьтесь с этими ресурсами: