Fecha de publicación: 22 de junio de 2026
P2ER, una agencia de soluciones digitales, usa las Herramientas para desarrolladores de Chrome para agentes para garantizar que solo se pase a los humanos para la revisión final el software verificado y en funcionamiento. Al transformar su flujo de trabajo en una infraestructura de agentes, potenciaron a los agentes de IA para que realicen la verificación empírica de la IU, lo que aumentó la frecuencia de implementación de una vez por semana a varias veces al día.
El desafío: Ampliar la calidad en las aplicaciones existentes
P2ER ofrece experiencias digitales de alta gama para marcas globales, incluidos fabricantes de automóviles, marcas de relojes y empresas de hotelería. Su principal desafío, como el de muchas empresas, era trabajar dentro de aplicaciones existentes y complejas. Como el equipo que adoptó la codificación de agentes, enfrentaron tres obstáculos principales:
- Pruebas de IU frágiles. Los conjuntos de pruebas estándar tenían problemas con los datos dinámicos, como los precios fluctuantes de los hoteles o las ofertas de temporada en algunos de los proyectos de P2ER. Los datos simulados a menudo ocultaban fallas de integración que un evaluador humano encontraría de inmediato.
- Problemas de confiabilidad del agente. Sin instrucciones explícitas, los agentes de IA a veces afirmaban que una tarea se había completado sin verificarla.
- Pérdida de contexto. Las tareas amplias y los tiempos de espera del modelo hicieron que los agentes perdieran el seguimiento de los objetivos de la sesión. Esto dificultó que los desarrolladores rastrearan y continuaran el trabajo que había iniciado un agente.
La solución: Compilar infraestructura para la artesanía
P2ER creó una infraestructura que trata a la IA como un "compañero de entrenamiento" que también puede manejar los aspectos repetitivos del desarrollo. Este enfoque permite que el equipo amplíe la artesanía enfocándose en la arquitectura y la solución creativa de problemas.
Aplica la verificación empírica con las Herramientas para desarrolladores para el servidor MCP de los agentes
Para garantizar la confiabilidad, P2ER estableció una regla de verificación empírica obligatoria.
Este mandato de ingeniería, codificado en el archivo AGENTS.md del proyecto, establece lo siguiente:
All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.
En lugar de creerle al agente, el equipo usa las Herramientas para desarrolladores de Chrome para agentes para brindarles a los agentes un entorno seguro para navegar por la aplicación de forma visual e interactiva.
Estos "agentes de prueba" realizan varias tareas clave que las pruebas estáticas estándar no realizan:
- Pruebas de datos dinámicos: Incluso en un entorno de etapa de pruebas, los agentes realizan pruebas con datos reales y fluctuantes (como los precios cambiantes de los hoteles en las distintas temporadas) para experimentar la aplicación exactamente como lo haría un usuario. Esto se habilita con las Herramientas para desarrolladores para las herramientas de interacción de los agentes, como
new_page,navigate_page,fill,clickyhover, que se mencionan en su habilidadgithub-issue-test, lo que permite que el agente se autentique de forma dinámica y simule una ruta de clics de usuario realista. - Auditorías visuales: Los agentes identifican discrepancias visuales entre los diseños de Figma y la implementación real. Con la herramienta
take_screenshotde las Herramientas para desarrolladores para agentes, su habilidadfigma-validatecaptura capturas de pantalla de alta resolución de las renderizaciones de Storybook en vivo para realizar una comparación en paralelo con las exportaciones de Figma. - Verificaciones de usabilidad: Los agentes detectan traducciones faltantes o errores de usabilidad que las secuencias de comandos automatizadas suelen pasar por alto. Al interactuar directamente con el árbol de accesibilidad y revisar las instantáneas visuales, recuperadas a través de
take_snapshotytake_screenshot, los agentes buscan activamente anomalías en la IU, como cadenas MISSING_MESSAGE, según se indica explícitamente en sus flujos de trabajo de verificación automatizada.
Descompón y conserva las subtareas
Para combatir los tiempos de espera de la sesión y la pérdida de contexto, P2ER compartimenta estrictamente el trabajo a través de subagentes. Luego, les indica a sus agentes que actúen como orquestadores de la siguiente manera:
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.
Para mantener informados a los propietarios de productos humanos en este proceso, el equipo integró una habilidad personalizada para que los agentes realicen un seguimiento de su trabajo en los problemas de GitHub. Esto garantiza que cada tarea de subagente y sus resultados se conserven y documenten como un subproblema con la API de GitHub, lo que crea un registro de auditoría claro y un contexto persistente que otros desarrolladores pueden retomar.
Aísla los entornos para la ejecución paralela
Para ampliar su proceso de desarrollo de modo que varios agentes ejecuten código en paralelo, P2ER exige entornos aislados por tarea para sus agentes. Esto evita conflictos de estado y problemas de red durante la verificación de la IU.
La configuración técnica para este aislamiento incluye lo siguiente:
- Árboles de trabajo de Git aislados: Para evitar colisiones de archivos y contaminación del espacio de trabajo cuando varios agentes operan en paralelo, las tareas se ejecutan dentro de árboles de trabajo de Git aislados. Cada agente obtiene un espacio de sistema de archivos dedicado en el que se copian las variables de entorno y se vinculan las dependencias, lo que garantiza que los cambios en los archivos nunca se sobrescriban entre sí.
- Entornos únicos: Cada agente y tarea ejecuta su servidor de desarrollo de Next.js en un puerto aislado único. Según las reglas del proyecto, los servidores
se inician de forma dinámica con
npx next dev -p <custom_port> --turbopackpara garantizar la ejecución paralela sin conflictos de red. - Clones de bases de datos: Para evitar colisiones de datos durante las pruebas paralelas, P2ER duplica de forma programática la base de datos principal en un esquema específico de la tarea al inicio del agente. Una vez que el agente completa su verificación y se aprueba la tarea, un proceso de limpieza automatizado descarta la base de datos aislada. Este ciclo de vida garantiza que cada agente opere en un espacio de trabajo impecable y no deje datos pendientes.
- Pruebas segmentadas: Todas las pruebas del navegador a través de las Herramientas para desarrolladores de Chrome para agentes deben orientarse al puerto personalizado exacto asignado a esa instancia de agente específica.
Su mandato de prueba prohíbe codificar puertos predeterminados, lo que requiere URLs de destino de prueba
como
http://localhost:<custom_port>.
Impacto: Un aumento de 10 veces en la velocidad de desarrollo sin sacrificar la calidad
El cambio a la codificación de agentes con rieles de protección de alta confianza transformó el resultado de P2ER. Originalmente, estos cambios eran necesarios para garantizar que el agente funcionara de manera confiable, pero también beneficiaron todo el ciclo de vida del desarrollo:
- Ciclos de trabajo 10 veces más rápidos: La mayoría de los problemas ahora se cierran en un solo día, en comparación con el promedio anterior de 1 a 3 días. La frecuencia de implementación aumentó de una vez por semana a varias veces al día.
- Enfoque estratégico para los equipos de QA: Debido a que los agentes ahora detectan regresiones básicas y "frutas fáciles", el equipo de pruebas humanas puede enfocarse en situaciones de prueba más complejas y detalladas.
- Implementaciones sólidas para las partes interesadas: Las implementaciones ahora son más resistentes porque las pruebas van más allá de la "ruta feliz" estándar del programador.
- Comunicación y trazabilidad más claras: Al aplicar una regla de "problema humano a subproblema de implementación", las partes interesadas reciben instrucciones claras sobre qué mejoras lógicas se realizaron en lugar de leer tickets repletos de detalles técnicos de implementación y cómo probarlos.
Como ejemplo de cómo esto afecta la velocidad de desarrollo, P2ER creó una nueva plataforma en seis meses que habría tardado muchos años con sus métodos establecidos. El humano sigue siendo la puerta de calidad final, ya que revisa las solicitudes de extracción que ya fueron validadas por los agentes.
Estadísticas técnicas para los equipos
Mientras compilaba este flujo de trabajo, P2ER identificó varias estrategias que lo ayudaron a pasar de la experimentación a un modelo de desarrollo maduro y asistido por agentes.
Estas estrategias pueden ayudar a otros equipos a perfeccionar sus propias implementaciones de agentes:
Optimiza el uso de tokens con la inyección de secuencias de comandos y el procesamiento por lotes de la CLI
Los servidores MCP pueden volverse intensivos en tokens durante las sesiones de desarrollo largas si los agentes dependen únicamente de la navegación paso a paso (por ejemplo, tomar una instantánea, encontrar un ID, completar una entrada y esperar). Para minimizar esta sobrecarga, P2ER usa un enfoque de dos vías:
- Inyección de secuencias de comandos intercaladas: Para las interacciones segmentadas, como la autenticación a través de formularios complejos de React, los agentes usan la herramienta
evaluate_scriptpara inyectar JavaScript puro directamente en el navegador. Esto omite las anulaciones de establecedores integradas y ejecuta varias acciones a la vez, lo que ahorra numerosos turnos de conversación. - Procesamiento por lotes de secuencias de comandos de la CLI: Cuando los agentes tienen un "problema" o encuentran un flujo de navegador repetitivo y excesivamente largo, cambian a una alternativa de procesamiento por lotes de la CLI. En lugar de gastar tokens en herramientas MCP individuales y repetidas o escribir secuencias de comandos de automatización personalizadas desde cero, P2ER le solicita a la CLI de las Herramientas para desarrolladores de Chrome que conserve y procese por lotes las acciones del navegador. Esto permite que los agentes ejecuten de forma programática flujos completos de varios pasos de una sola vez, lo que reduce drásticamente la sobrecarga de la comunicación constante entre el modelo y la herramienta.
Automatiza el seguimiento del rendimiento con el análisis de seguimiento
En lugar de depender únicamente de la percepción humana, P2ER creó una
review-performance habilidad que usa las Herramientas para desarrolladores para agentes para ejecutar auditorías automatizadas de Lighthouse
y seguimientos de rendimiento.
Los agentes usan la herramienta performance_start_trace y performance_analyze_insight para capturar y analizar las Core Web Vitals (LCP, INP, CLS) y para identificar cuellos de botella del subproceso principal o cambios de diseño. Para completar la puerta de calidad, los agentes pueden ejecutar una lighthouse_audit completa para protegerse específicamente contra las regresiones en la accesibilidad (a11y), el SEO y las prácticas recomendadas generales para la Web, lo que garantiza que solo se envíe código de alta calidad para una solicitud de extracción.
Mejora la verificación con las Herramientas para desarrolladores de Chrome para agentes
Además de sus habilidades personalizadas, P2ER usa las capacidades principales del servidor MCP de las Herramientas para desarrolladores de Chrome para agentes para realizar la verificación funcional. Esto incluye usar el servidor para emular diferentes dispositivos y probar la capacidad de respuesta, lo que garantiza que la interfaz de usuario funcione en diferentes tamaños de pantalla y dispositivos.
Con el servidor MCP para navegar por la aplicación, los agentes pueden identificar discrepancias visuales entre los diseños y la implementación real, y detectar errores que las pruebas estáticas suelen pasar por alto.
Recursos
Para explorar aún más el caso de uso de P2ER, explora todas las habilidades mencionadas en su repositorio de GitHub relacionado.
Para comenzar y obtener más información sobre la implementación de flujos de trabajo similares con las Herramientas para desarrolladores para agentes, explora estos recursos: