Bookmarklets Parte 2 – Testando formulário web – preenchimento automático com Javascript

Também estamos lá
Facebook Twitter Linkedin Pinterest

Este é segundo artigo da série sobre bookmarklet. No primeiro artigo, aprendemos o que são bookmarklets e como utilizá-los. Também criamos um bem simples que abre o Facebook em uma nova guia do navegador. Neste segundo artigo, vamos explicar como usar bookmarklets para agilizar o desenvolvimento de formulários web.

No meu ponto de vista, testar formulários é uma das tarefas mais entendiantes do desenvolvimento web. É preciso preencher os campos do formulário, clicar no botão enviar, verificar os dados enviados, verificar como os dados são recebidos, etc., etc… E isso se repete vários e várias vezes, e fica pior com o tamanho do formulário. Quanto maior o número de elementos do formulário a serem preenchidos, mais entendiante. O ideal seria se, pelo menos o preenchimento repetitivo dos campos pudesse ser evitado.

Existem várias formas de evitar isso. A primeira e a mais simples, é definir os valores dos campos no próprio HTML. Por exemplo, no campo nome de um formulário de contatos, bastaria definir o valor do atributo value. Fazendo isso para todos os campos, já ajudaria muito. O problema porém, é que depois de finalizado o formulário, com tudo funcionando, seria necessário alterar o value de todos os campos para vazio navamente.

A segunda forma, é utilizar extensões para o navegador. Para Chrome, temos a iMacros for Chrome ou a Chromium browser automation. A iMacro for Chrome, eu já utilizei e cumpriu bem o papel. Entretanto, eu evito instalar extensões nos meus navegadores, com exceção daquelas que realmente façam algo que não há como fazer de outro jeito. E é ai que vem a nossa terceira opção e objetivo deste artigo, os bookmarklets.

Bookmarklets – Prenchendo formulários

Vamos agora ao que interessa. Automatizar a tarefa de preenchimento do formulário. Para isso vamos usar o exemplo simples de um formulário de contatos com os campos nome, e-mail e mensagem e um botão Enviar.

É um formulário bem simples mesmo, somente como exemplo. Agora vamos começar o Javascript que vai ser incluido nos Favoritos como um bookmarklet. Primeiro definimos os valores dos campos em variáveis.

Agora vamos criar os objetos que vão referenciar os elementos e para isso vamos definir mais algumas variáveis.

Dessa forma não vai ser necessário escrever document.getElementById(“…”) para referenciar os elementos do formulário, o que facilita a escrita e leitura do código.

Agora sim vamos começar a programar. Aqui vamos preencher os campos com os seus valores guardados nas variáveis.

Juntando tudo, temos o código no nosso bookmarklet completo.

Como pode ser visto no código, não esquecemos de incluir o “javascript:” no início. Também utilizamos a função setTimeout() para criar um intervalo entre os preenchiemto de cada campo. Agora você pode criar uma nova entrada nos favoritas e incluir o código do bookmarklet no campo URL. O código está com cada comando em uma linha e o campo URL tem somente uma linha mas você pode colar o código assim mesmo.

O bookmarklet já está pronto, só falta testar. Carrega a página com o html do nosso formulário de exemplo. Com a página carregada, clique no bookmarklet e veja o que acontece. Os campos nome, e-mail e mensagem são preenchidos automaticamente, todos de uma vez, evitando a necessidade de digitação para cada um deles.

Acabou o tédio de preencher os campos do formulário que estamos testando. Com isso agilizamos o desenvolvimento e ganhamos tempo. Levamos um tempinho pra desenvolver o bookmarklet mas não ter que ficar preenchendo a formulário a cada teste compensa.

Não deixe de ler o terceiro artigo da séria. O terceiro artigo, trás um projeto funcional que vai facilitar muito a vida de quem usa o Chrome.

Jorge Rodrigues

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.

More Posts