00:00:00A forma como nosso time constrói nossas aplicações melhorou significativamente.
00:00:03O motivo?
00:00:03O Claude Code lançou recentemente sua extensão do Chrome.
00:00:06Você pode pensar que isso já era possível com o Playwright ou Puppeteer MCP.
00:00:09Mas essas ferramentas tinham problemas sérios,
00:00:11como uma janela de contexto desnecessariamente inchada,
00:00:14uma pasta de projeto desorganizada cheia de capturas aleatórias,
00:00:17e na maioria das vezes nem conseguiam completar as ações no aplicativo.
00:00:20Por isso nunca fui um grande defensor de testes automatizados usando IA.
00:00:24Mas é também por isso que fiquei realmente entusiasmado com essa nova extensão do Claude.
00:00:28Se você acompanha o canal,
00:00:29talvez saiba que fizemos um vídeo sobre isso há algum tempo.
00:00:32O engraçado é que não era destinado ao Claude Code,
00:00:35mas deixamos bem claro que essa extensão teria muito mais potencial se fosse.
00:00:39E aqui estamos.
00:00:39Agora ela finalmente saiu como um MCP integrado e dá ao Claude Code todas as ferramentas personalizadas que precisa.
00:00:45Agora,
00:00:45pronta para usar,
00:00:46ela tem alguns problemas enormes que devemos corrigir.
00:00:48Mas antes de mergulharmos nesses problemas,
00:00:49vamos fazer uma pausa rápida para falar sobre a Automata.
00:00:52Depois de ensinar milhões de pessoas como construir com IA,
00:00:55começamos a implementar esses fluxos nós mesmos.
00:00:57Descobrimos que poderíamos construir produtos melhores mais rápido do que nunca.
00:01:01Ajudamos a transformar suas ideias em realidade,
00:01:03seja em apps ou websites.
00:01:04Talvez você tenha assistido nossos vídeos pensando:
00:01:06"Tenho uma ideia ótima,"
00:01:07mas não tenho um time técnico para desenvolvê-la.
00:01:09"É exatamente aí que entramos."
00:01:11Pense em nós como seu co-piloto técnico.
00:01:13Aplicamos os mesmos fluxos que ensinamos a milhões diretamente ao seu projeto,
00:01:17transformando conceitos em soluções reais e funcionais,
00:01:19sem as dores de cabeça de contratar ou gerenciar um time de desenvolvimento.
00:01:23Pronto para transformar sua ideia em realidade?
00:01:25Entre em contato em hello@automata.dev Voltando aos problemas.
00:01:29O maior que enfrentei foi que levava muitos passos sequenciais apenas para testar algo realmente simples.
00:01:34Você pode ter notado que quando pede ao Claude para testar visualmente a página inicial de um website,
00:01:39ele executa uma operação de scroll para cada seção e captura uma screenshot em cada etapa.
00:01:43Ele então monta todas as screenshots para analisar a interface seção por seção.
00:01:47Você pode pensar que essa é uma boa abordagem, mas não é.
00:01:49Em vez disso,
00:01:50podemos fazer uma captura de página inteira e economizar todos esses tokens.
00:01:53Para resolver isso,
00:01:54usei um script que aproveita diferentes ferramentas web para capturar a página inteira.
00:01:57Também adicionei instruções para usar esse script em um comando slash personalizado no meu projeto.
00:02:02Agora,
00:02:02quando uso esse comando para testar a página inicial,
00:02:05ele reconhece que é um teste de página inteira com base nas instruções que incluí e usa o script diretamente em vez do método usual seção por seção.
00:02:13Por isso,
00:02:13o teste acontece significativamente mais rápido e mantém a mesma precisão.
00:02:17O segundo problema que enfrentei foi quando essas ferramentas MCP tentaram carregar uma quantidade enorme de conteúdo de uma vez para uma tarefa simples.
00:02:24Em vez de carregar divs específicas,
00:02:26geralmente carrega todo o HTML dentro da tag main,
00:02:28que contém uma quantidade enorme de tokens mesmo quando não é necessário.
00:02:32Isso acaba consumindo uma grande parte da janela de contexto,
00:02:34e até suas tarefas mais simples podem inchaço significativamente.
00:02:37Para resolver isso,
00:02:38adicionei instruções no arquivo Claude.md sobre como gerenciar adequadamente o contexto ao usar a extensão Chrome do Claude.
00:02:44Dessa forma,
00:02:45qualquer extração é precisamente limitada e não incha o contexto com informações desnecessárias.
00:02:50Outro problema é que Claude desperdiça muito tempo quando encontra websites que contêm pop-ups indesejados,
00:02:55como avisos de cookies e prompts similares.
00:02:58Para se livrar deles,
00:02:59ele usa as mesmas sequências de screenshot e scroll.
00:03:01Mas isso está errado.
00:03:02Em vez de deixar o Claude consumir tokens e tempo desnecessários,
00:03:05podemos usar outras soluções para lidar com esses pop-ups.
00:03:08Como alternativa,
00:03:09criei um script que inclui os seletores de botão
00:03:11"fechar"
00:03:12mais comuns e padrões para descartar banners de cookies.
00:03:15Ele encontra esses seletores no código e executa funções para descartar os pop-ups automaticamente.
00:03:19Também adicionei instruções no arquivo Claude.md para que ele execute esse script primeiro antes de prosseguir com o conteúdo principal.
00:03:25Agora,
00:03:26sempre que peço ao Claude para acessar um website,
00:03:29ele primeiro segue as instruções no Claude.md e executa esse JavaScript.
00:03:32Isso descartar automaticamente os banners de cookies,
00:03:35permitindo que Claude continue com o conteúdo principal sem desperdiçar tokens nem executar passos desnecessários.
00:03:40Por razões de segurança,
00:03:42o Claude foi limitado para não realizar capturas ou completar autenticações em seu nome.
00:03:46Então se encontrar um website que as contenha,
00:03:48o Claude não consegue completar esse processo para você.
00:03:51Isso é algo que você tem que lidar por conta própria.
00:03:53Sempre que trabalhar em um website que requer login ou verificação CAPTCHA,
00:03:56certifique-se de que já autenticou antes de dar a tarefa ao Claude.
00:04:00Dessa forma,
00:04:00ele não será bloqueado e não desperdiçará tempo.
00:04:02Então esses foram os principais problemas que consegui resolver.
00:04:05Mas para usar adequadamente para testes,
00:04:07você realmente precisa de um fluxo adequado para testar qualquer aplicação.
00:04:10Mas antes disso,
00:04:11quero falar um pouco mais sobre por que prefiro a integração do Claude com Chrome em relação ao Puppeteer.
00:04:16Isso é principalmente porque é uma ferramenta nativa construída pelos próprios desenvolvedores do Claude Code,
00:04:20e oferece muito melhor integração com controle e recursos aprimorados.
00:04:23Esses MCPs são focados em testes em um ambiente separado dedicado que não mantém sessões.
00:04:29Geralmente são trabalhosos para instalar e poluem sua pasta de projeto com todas as screenshots.
00:04:33Por outro lado,
00:04:34com essa nova integração do Chrome,
00:04:35o Claude tem a capacidade de interagir com suas contas autenticadas.
00:04:38Pode interagir com serviços como Google Docs e Google Sheets.
00:04:42Pode até reter todas as informações de sessão e usá-las para executar tarefas ainda melhor.
00:04:46Antes de chegarmos ao fluxo,
00:04:47quero mencionar que as integrações de navegador usam muito contexto porque são mais intensivas em computação do que chamadas de ferramentas regulares.
00:04:54Eles até mencionaram isso em um de seus blogs.
00:04:56Então você precisa ficar atento à compactação automática ao trabalhar com Claude Code.
00:05:00Além disso,
00:05:01como essa é a integração do Chrome,
00:05:02funciona apenas com Chrome.
00:05:04Eu esperava que funcionasse com qualquer navegador baseado em Chromium,
00:05:06mas não funciona.
00:05:07E realmente não podemos resolver isso.
00:05:08E para quem usa múltiplos perfis do Chrome,
00:05:11será um pouco mais frustrante porque continuamente abre os perfis errados.
00:05:15E espero que resolvam esse bug em breve.
00:05:17Com todos os ajustes que mencionei antes e a integração do Claude com o Chrome,
00:05:21meu fluxo de desenvolvimento melhorou significativamente.
00:05:24No entanto,
00:05:24extensões do Chrome têm uma limitação no Manifest V3.
00:05:27Podem ser bloqueadas se executarem por muito tempo.
00:05:29Muitas pessoas estão pedindo aos desenvolvedores do Claude Code para corrigir isso também em seu repositório.
00:05:33Se você está fazendo testes de ponta a ponta de sua aplicação web do início ao fim,
00:05:37isso pode fazer com que a sessão seja bloqueada pelo Chrome e Claude pare inesperadamente.
00:05:41Você teria que solicitá-lo novamente para reiniciar a execução.
00:05:44Isso pode ser particularmente problemático se você atribuir uma tarefa de longa duração ao Claude e se afastar do computador,
00:05:49apenas para retornar e descobrir que a tarefa foi concluída apenas parcialmente.
00:05:53Por essa razão exata,
00:05:54em vez de testes de ponta a ponta,
00:05:55criei múltiplos arquivos de teste cobrindo todos os diferentes aspectos da aplicação.
00:06:00Cada arquivo contém informações detalhadas sobre níveis de prioridade,
00:06:03pré-condições,
00:06:04etapas de teste e resultados esperados.
00:06:06Há também um guia de testes sobre como conduzir esses testes,
00:06:09junto com um readme para a documentação dos testes.
00:06:11Como você sabe,
00:06:12Claude tem uma janela de contexto limitada,
00:06:13e quando esse limite é atingido,
00:06:15instruções e progresso podem ser perdidos.
00:06:16Por esse motivo,
00:06:17adicionei instruções no arquivo Claude.md que instruem o Claude a criar um documento de relatório de teste abrangente após testar cada arquivo.
00:06:24Dessa forma,
00:06:25mesmo se precisar compactar porque as ferramentas de navegador consomem muito contexto,
00:06:28o Claude pode manter a consciência do que foi testado e o que ainda precisa ser testado consultando esses arquivos de progresso.
00:06:34Agora,
00:06:34antes de prosseguir com qualquer teste,
00:06:36a melhor prática é executar uma compactação porque testar sua aplicação usando Chrome vai consumir muito do seu contexto.
00:06:42Para otimizar meu processo de teste,
00:06:44criei outro comando personalizado.
00:06:46O que esse comando faz é testar de forma orientada e criar documentação em uma estrutura adequada após os testes,
00:06:52seguindo as instruções do Claude.md.
00:06:54Também adicionei instruções para monitorar o contexto antes de iniciar qualquer tarefa,
00:06:58para que quando o teste começar,
00:06:59não perca contexto no meio do caminho e compacte enquanto está funcionando.
00:07:02Dessa forma,
00:07:03quando você inicia o processo de teste,
00:07:04basta usar o comando personalizado e fornecer o arquivo que deseja começar a testar,
00:07:08e o Claude inicia os testes seguindo as instruções exatas.
00:07:11Ele identifica problemas por conta própria e utiliza o navegador e todas as ferramentas necessárias para testar.
00:07:16Interage com elementos automaticamente e consegue encontrar erros que não costumam ser visíveis,
00:07:20mas podem ser detectados lendo a saída do console.
00:07:23Também documenta o teste ao final conforme instruído.
00:07:26Dessa forma,
00:07:26todo o processo de teste é significativamente melhorado porque o Claude tem acesso aos logs do console e consegue realizar testes automatizados no navegador de forma muito mais eficaz do que nunca.
00:07:35E chegamos ao final deste vídeo.
00:07:37Se você gostaria de apoiar o canal e nos ajudar a continuar fazendo vídeos como este,
00:07:41você pode fazer isso usando o botão Super Thanks abaixo.
00:07:43Como sempre, obrigado por assistir e até o próximo vídeo.