Salve Salve! 🖖

Uma das ferramentas mais utilizadas no dia a dia do dev frontend é o navegador. Por isso, é importante conhecê-lo bem e conseguir extrair o máximo de seu potencial. Este é o primeiro artigo da série Explorando seu navegador.

Meu objetivo aqui é compartilhar com vocês um pouquinho do que sei sobre a funcionalidade de gravação do DevTools e como ela pode nos ajudar a automatizar processos repetitivos.

⚠️ Este post não serve como documentação oficial e não tem o objetivo de ser o mais completo possível. Ele representa apenas a minha visão sobre a funcionalidade.

Introdução

O DevTools, ou ferramentas de desenvolvimento, está presente em todos os principais navegadores, como Firefox, Edge e Safari, mas hoje vamos focar no Chrome DevTools. Isso porque o Google Chrome é o navegador mais utilizado no mundo, responsável por cerca de 63% do tráfego global da internet. Ele permite aos desenvolvedores inspecionar, editar e depurar o código de suas aplicações web em tempo real.

Você já deve ter se cansado de preencher os mesmos formulários repetidamente durante o desenvolvimento de uma aplicação web, e é aí que entra a funcionalidade de “Gravador”. Ela permite capturar as interações com o seu site, como cliques, preenchimento de formulários e navegações. Depois, você pode reproduzir essas interações em uma simulação real, ideal para testes repetitivos ou demonstrações.

Como Usar?

Aqui vai um passo a passo rapidinho para começar a automação dos seus formulários:

1. Abra o Chrome DevTools
   • Aperte F12 ou clique com o botão direito no site e escolha “Inspecionar”.
2. Acesse a aba Gravador
   • Com o DevTools aberto, vá para a aba Gravador (Recorder). Se não estiver vendo, clique nos três pontinhos à direita das abas e ative-a!
3. Inicie uma nova gravação
   • Clique em Nova Gravação. Nomeie como quiser e pronto, já pode começar a registrar!
4. Preencha o Formulário
   • Faça suas interações normalmente. A cada clique, o DevTools estará capturando seus passos, desde o preenchimento de campos de texto até o clique em botões de envio.
5. Finalizou? Pare e Reproduza!
   • Quando terminar, clique em Parar. Agora você pode ver o passo a passo do que gravou e reproduzi-lo quantas vezes quiser.

Show me the code!

Vou exemplificar como funciona na prática no formulário de criação de despesas da aplicação finance-app. Primeiro, seguindo os passos acima, iniciamos a gravação e preenchemos o formulário manualmente.

Após terminar de preencher o formulário, basta clicar no botão “Encerrar gravação” para que a automação do formulário esteja pronta. Agora, toda vez que você precisar testar esse formulário, é só clicar na gravação realizada e dar play.

Show! Claro, este formulário é pequeno, mas para formulários grandes isso é uma mão na roda! Há outras opções que também podem ser exploradas, como adicionar alguma limitação de rede durante a reprodução da gravação.

👉🏻 Todas as opções disponíveis você pode conferir na documentação oficial da funcionalidade (link)

Nem preciso falar das outras possibilidades de uso que essa funcionalidade oferece, né? Utilizei o preenchimento de formulários como exemplo real, mas ela se encaixa muito bem para automações em geral dentro da aplicação, até mesmo em testes E2E.

Top demais!! 😻

Chegamos ao fim de mais um post e então, gostou?

Espero ter conseguido te apresentar algo novo e interessante para usar em seus projetos no dia a dia. Achou que eu falei algo errado? Ficou com dúvidas? Vamos discutir melhor nos comentários.

See you soon!

Referências

• Documentação oficial: https://developer.chrome.com/docs/devtools/recorder/overview?hl=pt-br