DEV Community

Cover image for Automatizando Formulários com DevTools
Guilherme Selair
Guilherme Selair

Posted on

Automatizando Formulários com DevTools

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.

step1

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.

step2

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.

Image description

👉🏻 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

Top comments (1)

Collapse
 
hiweus profile image
Andre AL

Show demais, boa explicação e os gifs ajudaram muito.
Vai me salvar muito tempo nos próximos projetos 😄.