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.

<form id=”contatos” method=”get”>
   nome: <input id=”nome” type=”text” value=””>
   e-mail:<input id=”e-mail” type=”text” value=””>
   <br>mensagem:<br>
   <textarea id=”mensagem” cols=”100” rows=”5”><textarea>
   <input id="enviar" name="enviar" type="submit" value="Enviar">
</form>

É 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.

var nome = “seu nome”;
var e-mail = “seuemail@server.com”;
var mensagem = “Mensagem a enviar.”;

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

var cmp_nome = document.getElementById(“nome”);
var cmp_email = document.getElementById(“email”);
var cmp_msg = document.getElementById(“mensagem”);
var btn_enviar = document.getElementById(“enviar”);

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.

cmp_nome.value = nome;
window.setTimeout(function() {
   cmp_email.value = email;
   window.setTimeout(function() {
      cmp_msg.innerHTML = mensagem;
   },200);
},200);

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

var nome = "seu nome";
var email = "seuemail@server.com";
var mensagem = "Mensagem a enviar.";
var cmp_nome = document.getElementById("nome");
var cmp_email = document.getElementById("email");
var cmp_msg = document.getElementById("mensagem");
cmp_nome.value = nome;
window.setTimeout(function() {
   cmp_email.value = email;
   window.setTimeout(function() {
      cmp_msg.innerHTML = mensagem;
   },200);
},200);

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.