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:
-
Abra o Chrome DevTools
- Aperte
F12
ou clique com o botão direito no site e escolha “Inspecionar”.
- Aperte
-
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!
-
Inicie uma nova gravação
- Clique em Nova Gravação. Nomeie como quiser e pronto, já pode começar a registrar!
-
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.
-
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
Top comments (1)
Show demais, boa explicação e os gifs ajudaram muito.
Vai me salvar muito tempo nos próximos projetos 😄.