Publicado em: 22 de junho de 2026
A P2ER, uma agência de soluções digitais, usa o Chrome DevTools para agentes e garante que apenas softwares verificados e funcionais sejam enviados para revisão final por humanos. Ao transformar o fluxo de trabalho em uma infraestrutura agêntica, eles capacitaram os agentes de IA a realizar a verificação empírica da interface, aumentando a frequência de implantação de uma vez por semana para várias vezes por dia.
O desafio: escalonar a qualidade em aplicativos atuais
A P2ER oferece experiências digitais sofisticadas para marcas globais, incluindo fabricantes de carros, marcas de relógios e empresas de hospitalidade. O principal desafio deles, como acontece com muitas empresas, era trabalhar com aplicativos complexos e legados. Como a equipe que adotou a programação com agentes, ela enfrentou três grandes obstáculos:
- Testes de UI frágeis. Os conjuntos de testes padrão tiveram dificuldades com dados dinâmicos, como preços de hotéis variáveis ou ofertas sazonais em alguns projetos da P2ER. Os dados simulados geralmente ocultavam falhas de integração que um testador humano encontraria imediatamente.
- Problemas de confiabilidade do agente. Sem instruções explícitas, os agentes de IA às vezes afirmavam que uma tarefa estava concluída sem verificar.
- Perda de contexto. Tarefas amplas e tempos limite do modelo faziam com que os agentes perdessem o controle das metas da sessão. Isso dificultava o rastreamento e a continuidade do trabalho iniciado por um agente.
A solução: criar infraestrutura para o artesanato
A P2ER criou uma infraestrutura que trata a IA como um "parceiro de treino" que também pode lidar com os aspectos repetitivos do desenvolvimento. Essa abordagem permite que a equipe dimensione o trabalho artesanal concentrando-se na arquitetura e na solução criativa de problemas.
Aplicar a verificação empírica com o DevTools para o servidor MCP dos agentes
Para garantir a confiabilidade, a P2ER estabeleceu uma regra de verificação empírica obrigatória.
Esse mandato de engenharia, codificado no arquivo AGENTS.md do projeto, afirma:
All claims regarding service availability and component rendering
MUST be empirically verified (log output, dev compiler, browser/devtools inspection)
before asserting to the user.
Em vez de confiar na palavra do agente, a equipe usa o Chrome DevTools para oferecer um ambiente seguro para navegar no aplicativo de forma visual e interativa.
Esses "agentes de teste" realizam várias tarefas importantes que os testes estáticos padrão não fazem:
- Teste de dados dinâmicos:mesmo em um ambiente de simulação, os agentes testam dados reais e variáveis (como preços de hotéis que mudam de acordo com a época do ano) para vivenciar o aplicativo exatamente como um usuário faria. Isso é ativado pelas
DevTools para ferramentas de interação dos agentes, como
new_page,navigate_page,fill,clickehover, mencionadas na habilidadegithub-issue-test, permitindo que o agente se autentique dinamicamente e simule um caminho de cliques realista do usuário. - Auditorias visuais:os agentes identificam discrepâncias visuais entre os layouts do Figma e a implementação real. Ao usar a ferramenta
take_screenshotdos DevTools para agentes, a habilidadefigma-validatecaptura capturas de tela de alta resolução de renderizações do Storybook em tempo real para fazer uma comparação lado a lado com exportações do Figma. - Verificações de usabilidade:os agentes detectam traduções ausentes ou erros de usabilidade que scripts automatizados costumam ignorar. Ao interagir diretamente com a árvore de acessibilidade e analisar snapshots visuais, recuperados por
take_snapshotetake_screenshot, os agentes verificam ativamente anomalias na interface, como strings MISSING_MESSAGE, conforme explicitamente instruído nos fluxos de trabalho de verificação automatizada.
Decompor e persistir subtarefas
Para combater os tempos limite de sessão e a perda de contexto, o P2ER compartimentaliza estritamente o trabalho usando subagentes. Em seguida, eles instruem os agentes a agir como orquestradores da seguinte maneira:
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 manter os proprietários de produtos humanos informados nesse processo, a equipe integrou uma habilidade personalizada para que os agentes acompanhassem o trabalho deles em problemas do GitHub. Isso garante que cada tarefa do subagente e os resultados dela sejam mantidos e documentados como um subproblema usando a API do GitHub, criando uma trilha de auditoria clara e um contexto persistente que outros desenvolvedores podem usar.
Isole ambientes para execução paralela
Para dimensionar o processo de desenvolvimento e permitir que vários agentes executem código em paralelo, o P2ER exige ambientes isolados por tarefa para os agentes. Isso evita conflitos de estado e problemas de rede durante a verificação da interface.
A configuração técnica desse isolamento inclui:
- Árvores de trabalho isoladas do Git:para evitar colisões de arquivos e poluição do espaço de trabalho quando vários agentes operam em paralelo, as tarefas são executadas em árvores de trabalho isoladas do Git. Cada agente recebe um espaço dedicado no sistema de arquivos em que as variáveis de ambiente são copiadas e as dependências são vinculadas por symlink, garantindo que as mudanças nos arquivos nunca se substituam.
- Ambientes únicos:cada agente e tarefa executa o servidor de desenvolvimento do Next.js em uma porta isolada exclusiva. De acordo com as regras do projeto, os servidores
são iniciados dinamicamente com
npx next dev -p <custom_port> --turbopackpara garantir a execução paralela sem conflitos de rede. - Clones de banco de dados:para evitar colisões de dados durante testes paralelos, o P2ER duplica programaticamente o banco de dados principal em um esquema específico da tarefa na inicialização do agente. Depois que o agente conclui a verificação e a tarefa é aprovada, um processo de limpeza automatizado descarta o banco de dados isolado. Esse ciclo de vida garante que cada agente opere em um espaço de trabalho limpo e não deixe dados pendentes.
- Teste segmentado:todos os testes de navegador feitos com o Chrome DevTools para agentes
precisam segmentar a porta personalizada exata alocada para essa instância de agente específica.
O mandato de teste proíbe a codificação de portas padrão, exigindo URLs de destino de teste como
http://localhost:<custom_port>.
Impacto: aumento de 10 vezes na velocidade de desenvolvimento sem perder a qualidade
A mudança para a programação agêntica com proteções de alta confiança transformou a saída do P2ER. Essas mudanças eram originalmente necessárias para garantir que o agente funcionasse de maneira confiável, mas também beneficiaram todo o ciclo de vida do desenvolvimento:
- Ciclos de trabalho 10 vezes mais rápidos:a maioria dos problemas agora é resolvida em um único dia, em comparação com a média anterior de 1 a 3 dias. A frequência de implantação aumentou de uma vez por semana para várias vezes por dia.
- Foco estratégico para equipes de controle de qualidade: como os agentes agora detectam regressões básicas e "tarefas fáceis", a equipe de testes humanos pode se concentrar em cenários de testes mais complexos e detalhados.
- Implementações robustas para stakeholders:as implementações agora são mais resilientes porque os testes vão além do "caminho feliz" padrão do programador.
- Comunicação e rastreabilidade mais claras:ao aplicar uma regra de "problema humano para subproblema de implementação", as partes interessadas recebem instruções claras sobre quais melhorias lógicas foram feitas, em vez de ler tickets repletos de detalhes técnicos de implementação e como testá-los.
Como exemplo de como isso afeta a velocidade de desenvolvimento, a P2ER criou uma nova plataforma em seis meses, o que teria levado muitos anos usando os métodos estabelecidos. O humano continua sendo o portão de qualidade final, revisando solicitações de pull que já foram validadas por agentes.
Insights técnicos para equipes
Ao criar esse fluxo de trabalho, a P2ER identificou várias estratégias que ajudaram a fazer a transição da experimentação para um modelo de desenvolvimento maduro e assistido por agentes.
Essas estratégias podem ajudar outras equipes a refinar as próprias implementações de agentes:
Otimizar o uso de tokens com injeção de script e agrupamento em lote da CLI
Os servidores MCP podem consumir muitos tokens durante longas sessões de desenvolvimento se os agentes confiarem apenas na navegação gradual (por exemplo, tirar um instantâneo, encontrar um ID, preencher uma entrada e esperar). Para minimizar essa sobrecarga, o P2ER usa uma abordagem dupla:
- Injeção de script inline:para interações segmentadas, como
autenticação por formulários complexos do React, os agentes usam a ferramenta
evaluate_scriptpara injetar JavaScript simples diretamente no navegador. Isso ignora as substituições de setter integradas e executa várias ações de uma só vez, economizando vários turnos de conversa. - Lotes de scripts da CLI:quando os agentes encontram um "problema" ou um fluxo de navegador excessivamente longo e repetitivo, eles mudam para um fallback de lotes da CLI. Em vez de gastar tokens em ferramentas individuais e repetidas do MCP ou escrever scripts de automação personalizados do zero, o P2ER solicita que a CLI do Chrome DevTools persista e agrupe ações do navegador. Isso permite que os agentes executem de maneira programática fluxos de várias etapas inteiros de uma só vez, reduzindo drasticamente a sobrecarga da comunicação constante entre modelo e ferramenta.
Automatizar o rastreamento de performance com a análise de rastreamento
Em vez de depender apenas da percepção humana, o P2ER criou uma
review-performance habilidade que usa o DevTools para agentes e executa auditorias automatizadas do Lighthouse
e rastreamentos de desempenho.
Os agentes usam a ferramenta performance_start_trace e performance_analyze_insight para capturar e investigar as Core Web Vitals (LCP, INP, CLS) e identificar os principais gargalos de linha de execução ou mudanças de layout. Para completar o gate de qualidade, os agentes podem
executar um lighthouse_audit completo para evitar regressões em
acessibilidade (a11y), SEO e práticas recomendadas gerais da Web, garantindo que apenas
código de alta qualidade seja enviado para uma solicitação de pull.
Melhorar a verificação com o Chrome DevTools para agentes
Além das habilidades personalizadas, o P2ER usa os recursos principais do servidor MCP de agentes das Ferramentas para Desenvolvedores do Chrome para realizar a verificação funcional. Isso inclui usar o servidor para emular diferentes dispositivos e testar a capacidade de resposta, garantindo que a interface do usuário funcione em diferentes tamanhos de tela e dispositivos.
Ao usar o servidor MCP para navegar pelo aplicativo, os agentes podem identificar discrepâncias visuais entre layouts e a implementação real, identificando erros que os testes estáticos geralmente ignoram.
Recursos
Para conhecer ainda mais o caso de uso do P2ER, confira todas as habilidades mencionadas no repositório do GitHub relacionado.
Para começar a usar e saber mais sobre como implementar fluxos de trabalho semelhantes com as DevTools para agentes, confira estes recursos: