Como a Policybazaar reduziu a sobrecarga de auditoria em 92% e acelerou a entrega de telas em mais de 90% usando o Chrome DevTools para agentes e o Modern Web Guidance

Aman Soni

Swetha Gopalakrishnan

Publicado em: 10 de novembro de 2026

A Policybazaar é uma das principais plataformas de seguros da Índia, com mais de 97 milhões de clientes registrados. Cerca de 80% dos clientes acessam o site todo mês. A empresa controladora, PB Fintech, lançou recentemente a Pensionbazaar, uma plataforma completa de planejamento de aposentadoria, que é uma marca da Paisabazaar Marketing & Consulting Private Limited.

As duas equipes já usam agentes de programação, que escrevem código rapidamente, mas não conseguem ver o que esse código faz em um navegador. Os agentes costumavam usar padrões da Web desatualizados e não tinham como verificar se uma tela era renderizada corretamente. Por isso, os engenheiros ainda precisavam verificar tudo manualmente.

Para resolver isso, as duas empresas combinaram duas ferramentas nos Agentic Workflows: Modern Web Guidance para ensinar aos modelos os padrões modernos da Web e Chrome DevTools para agentes para dar a esses agentes um navegador headless em tempo real para inspecionar e verificar o trabalho deles.

Confira o impacto:

O desafio: código rápido, verificação lenta

A Policybazaar e a Pensionbazaar enfrentaram dois gargalos diferentes que os fluxos de trabalho de programação de IA padrão não conseguiram otimizar no nível de produção.

Pensionbazaar: novas telas com longos ciclos de controle de qualidade

A Pensionbazaar precisava de dezenas de telas novas e complexas, como a calculadora de pontuação de liberdade de aposentadoria em várias etapas, projeções de despesas de investimento personalizáveis e relatórios de recomendação automatizados. A equipe os criou com agentes de programação e o servidor MCP do Figma, mas dois problemas mantiveram os ciclos de controle de qualidade longos.

Primeiro, os agentes estavam programando no escuro. Um modelo de base pode gerar código, mas não consegue ver a interface renderizada, comparar estilos computados com as especificações de design, detectar mudanças de layout ou ler uma cascata de rede. Por isso, problemas relacionados, como IU cortada e mudanças de layout, chegaram até o controle de qualidade manual.

Em segundo lugar, o código gerado estava preso no passado. Sem conhecimento da plataforma da Web moderna, os agentes recorreram a soluções alternativas desatualizadas, escrevendo modais pesados em JavaScript em vez de usar o elemento <dialog> integrado, adicionando polyfills desnecessários e deixando de fora dicas de desempenho como fetchpriority.

Policybazaar: 30 páginas de destino e uma auditoria manual

A equipe de seguro de vida da Policybazaar administra cerca de 30 páginas de destino para diferentes produtos de seguro, e cada página pode ter variações para diferentes campanhas de marketing. Juntos, eles recebem de 200 mil a 300 mil visitantes por dia, e todas as páginas recebem atualizações mensais de design e lógica de negócios. A equipe precisa manter as pontuações das Core Web Vitals altas e garantir que todas as variantes permaneçam acessíveis e sejam renderizadas corretamente em todos os tamanhos de tela.

Antes da automação, um engenheiro auditava cada página manualmente:

1. Execute o PageSpeed Insights para coletar dados reais do usuário.
2. Avalie as pontuações e recomendações das Core Web Vitals.
3. Inspecione o build de desenvolvimento ou de preparo, diagnostique os problemas por trás das pontuações e aplique correções de código.

O processo era lento, repetitivo e não escalonável. Isso deixava espaço para otimizações perdidas, cobertura de auditoria inconsistente, regressões de desempenho não detectadas e lançamentos atrasados.

Antes de mudar o fluxo de trabalho, as equipes definiram três metas: reduzir em mais de 80% o tempo que os desenvolvedores gastam em auditorias de desempenho, tornando a cobertura de auditoria contínua, reduzir o tempo de resposta do controle de qualidade com relatórios verificados e reduzir os bugs de interface gerados porque uma tela não correspondia aos wireframes.

A solução: um loop de código para verificação

A Pensionbazaar eliminou a lacuna entre escrever e verificar o código. O agente escreve o código, inicia uma instância limpa do navegador, audita a página de forma programática para verificar a paridade visual, quebras de layout, erros de console e desempenho e corrige os problemas encontrados com o mínimo de intervenção humana. O agente recebe o design do MCP do Figma para comparar a página renderizada com o que os designers pretendiam.

O vídeo a seguir mostra esse loop em ação. O agente lê os designs do Figma para uma nova tela, os implementa e usa o Chrome DevTools para agentes para inspecionar a página renderizada e corrigir as diferenças encontradas.

Etapa 1: embasar o agente em padrões modernos da Web

A equipe do Pensionbazaar queria que o código gerado seguisse as práticas recomendadas da Web moderna, usasse os recursos atuais da plataforma e ainda funcionasse em navegadores mais antigos. É difícil verificar isso manualmente, e os agentes nem sempre estão atualizados com a plataforma. A Orientação para Web Moderna resolve esse problema. É uma habilidade de agente, escrita e mantida por especialistas da Web do Chrome e da comunidade da Web, que abrange mais de 200 casos de uso. Ele direciona os agentes para APIs de plataformas da Web modernas e para as práticas recomendadas de desempenho e acessibilidade que se encaixam na sua meta de referência. Se você não definir uma meta, o padrão será Baseline amplamente disponível.

Depois que o agente extrai o contexto dos arquivos do Figma, ele usa o Modern Web Guidance ao escrever o código. Para o Pensionbazaar, isso mudou o código de três maneiras:

• Os elementos nativos substituíram as soluções alternativas em JavaScript. O agente usou o elemento <dialog> integrado e a API Popover para os modais de detalhes do plano, além de CSS Grid e Flexbox para os cards de resumo financeiro.
• O agente adicionou dicas de desempenho que os modelos de base geralmente deixam de fora. Isso incluiu fetchpriority="high" em imagens LCP principais, loading="lazy" em cards de plano abaixo da dobra e um orçamento de execução baseado em tempo com scheduler.yield() para proteger a Interaction to Next Paint (INP).
• Os recursos modernos não quebraram os navegadores mais antigos. O Pensionbazaar é compatível com versões mais antigas de navegadores, que são definidas na Browserslist. O agente usou recursos como a pseudoclasse CSS :user-invalid e autoComplete="one-time-code" no campo de senha única (OTP, na sigla em inglês). Os navegadores mais antigos os ignoram, e a funcionalidade principal continua funcionando.

Os modelos de base não estavam muito distantes. Em termos de desempenho, a equipe descobriu que eles estavam cerca de 70% alinhados com as práticas recomendadas. O relatório do agente listou 12 regras de orientação da Web moderna que fecharam a lacuna restante. Veja quatro exemplos:

Para o Pensionbazaar, nossa prioridade era criar um código de qualidade desde o primeiro dia para evitar dívidas técnicas mais tarde. O Modern Web Guidance orientou nosso agente de programação a adotar padrões modernos da Web e práticas recomendadas de desempenho, respeitando nossas metas específicas de compatibilidade com navegadores. Isso tornou as revisões de código de front-end muito mais fáceis e rápidas, melhorando o tempo de resposta do desenvolvimento.

Aman Soni, gerente de engenharia, Policybazaar

Etapa 2: dar um navegador ao agente

O Chrome DevTools para agentes é um conjunto de ferramentas, incluindo um servidor MCP, uma CLI e habilidades de agente, que oferece aos agentes de programação acesso em tempo real a dados de depuração de ambiente de execução, como registros do console, tráfego de rede, árvore de acessibilidade e outros recursos do DevTools.

A equipe instalou o Chrome DevTools para agentes como um plug-in no agente de programação, o Claude Code:

# Add the marketplace registry
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

# Install the plugin (MCP server and skills)
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

A equipe queria que todos os testes fossem executados em uma instância limpa do navegador, para que as extensões do Chrome instaladas não afetassem os resultados e os dados pessoais ou sensíveis não vazassem. Para isso, adicione --isolated à matriz args na configuração do servidor MCP:

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

Se os testes precisarem de uma sessão de navegador conectada, use --autoConnect.

Etapa 3: permitir que o agente verifique e corrija o próprio trabalho

A equipe de engenharia lista as verificações nas instruções do agente, seja como um comando ou como uma habilidade do agente. Em geral, o agente faz o seguinte:

• Inspeciona a árvore do DOM e o CSS computado e os compara com o design do Figma.
• Redimensiona a página para janelas de visualização de dispositivos móveis para testar a responsividade.
• Registra traces de desempenho para encontrar frames longos de animação (LoAF) causados por scripts, recursos que bloqueiam a renderização e outros problemas de desempenho.
• Reescreve o código para corrigir incompatibilidades de design, problemas de desempenho e exceções do console antes que um engenheiro o revise.

A tabela a seguir mostra quais ferramentas do Chrome DevTools para agentes são compatíveis com cada verificação:

Quando o agente encontra um problema, como texto cortado em telas pequenas, uma quebra de linha flexível corrompida ou uma imagem não otimizada que causa uma mudança de layout, ele executa um curto loop de correção:

1. O Chrome DevTools para agentes captura o erro exato.
2. O agente analisa os dados e reescreve o CSS ou JavaScript problemático.
3. O agente atualiza a página para confirmar a correção.

Em uma tela, o agente renderizou a página e descobriu que o layout, o espaçamento e o gradiente do cabeçalho não correspondiam ao design. Ele corrigiu os arquivos .scss relevantes. Ele também interagiu com a página, como expandir acordeões para verificar se os estados abertos correspondiam aos designs.

Etapa 4: entregar um relatório verificado ao controle de qualidade

Quando a verificação é concluída, o agente entrega o código pronto para produção com um relatório de auditoria para a equipe de controle de qualidade. O relatório inclui:

• Uma comparação visual com o design do Figma que destaca as diferenças de pixels, criada com base em capturas de tela, snapshots do DOM e estilos computados.
• Capturas de tela da página renderizada em diferentes tamanhos de tela.
• Core Web Vitals e diagnósticos de desempenho do performance_start_trace e do performance_analyze_insight, como Speed Index e Total Blocking Time (TBT).
• Pontuações do Lighthouse para SEO, práticas recomendadas e acessibilidade do lighthouse_audit.
• Verificações de aprovação ou reprovação para interações, como recolher linhas e alternar, além de erros do console e mudanças de estado do aplicativo, como editar linhas, excluir linhas e estados vazios.

Usar a mesma abordagem em 30 páginas de campanha

Na plataforma principal, o Policybazaar substituiu as execuções manuais do PageSpeed Insights por auditorias executadas pelo Chrome DevTools para agentes no Kiro. Antes de uma página de campanha entrar no ar, um engenheiro aciona uma auditoria no URL de teste para dispositivos móveis e computadores. O agente executa auditorias de desempenho e do Lighthouse, e o Chrome DevTools para agentes extrai automaticamente dados de campo reais do Chrome User Experience Report (CrUX) com os dados de laboratório. Isso substituiu totalmente a etapa do PageSpeed Insights.

Em seguida, o agente informa as pontuações de desempenho, os gargalos encontrados e uma lista priorizada de melhorias para um engenheiro corrigir. Em uma auditoria de pré-lançamento, ele sinalizou chamadas de API não críticas que eram disparadas uma após a outra durante o carregamento de página e competiam com o trabalho de renderização crítico. A equipe corrigiu o problema antes que a página fosse publicada.

Agora, o agente conclui 12 auditorias de desempenho no tempo que um engenheiro leva para concluir uma. Isso representa uma redução de 92% no esforço manual.

O desempenho da Web é importante para manter uma boa experiência do usuário, mas auditar manualmente, avaliar cascatas e traces em dezenas de páginas de destino era tedioso e um grande gargalo. O Chrome DevTools para agentes transformou esse processo e reduziu o tempo de auditoria de desempenho dos nossos engenheiros em 92%, deixando espaço para que eles se concentrem em tarefas mais complexas.

Aman Soni, gerente de engenharia, Policybazaar

Impacto

O Modern Web Guidance e o Chrome DevTools para agentes transformaram os testes de front-end na Policybazaar e na Pensionbazaar de um processo manual e reativo em um processo automatizado e proativo. A tabela a seguir compara os fluxos de trabalho antes e depois da mudança:

A redução de 92% superou a meta da equipe, que era de mais de 80%. As regressões da página de destino são detectadas antes de chegarem ao preparo ou ao controle de qualidade. No Pensionbazaar, o código chega já auditado com capturas de tela para várias janelas de visualização, o que reduz as idas e vindas entre design, engenharia e controle de qualidade.

Pontos-chave para as equipes

• Baseie seu agente em orientações confiáveis. Orientações selecionadas, como as do Modern Web Guidance, mantêm os agentes longe de padrões obsoletos e mantêm seu código dentro das metas de referência.
• Não permita que um agente marque uma tarefa de front-end como concluída até que ele tenha verificado a página renderizada. O Chrome DevTools para agentes permite que o agente inspecione o layout, as janelas de visualização e os traces de desempenho em um navegador real.
• Defina critérios de saída claros para o loop. Defina limites de etapas e condições explícitas de aprovação e falha para que o agente não entre em loop e desperdice tokens.
• Comece com páginas de alta frequência baseadas em modelos. Os fluxos de trabalho de ciclo fechado são mais vantajosos quando a velocidade de resposta é importante.
• Execute auditorias em um navegador limpo. Use --isolated para que as extensões e os dados armazenados em cache não afetem os resultados nem exponham dados pessoais.

Recursos

• Modern Web Guidance
• Repositório de origem do Modern Web Guidance
• Documentação do Chrome DevTools para agentes
• Chrome DevTools para agentes no GitHub