Já ouviu falar de um site chamado Human Benchmark? É uma página muito interessante com diversos testes em forma de jogos para mensurar e ranquear suas capacidades cognitivas como tempo de reação, capacidade motora, memória visual, memória verbal, entre várias outras. Assim, você pode criar uma conta para salvar as pontuações nestes testes, de forma que os usuários possam acompanhar a própria evolução e comparar seus resultados com o mundo inteiro! 

Entre os testes mencionados, há um que eu particularmente considero muito interessante: o teste de memória verbal. Ele te apresenta uma palavra aleatória e, logo abaixo da palavra exibida, você tem dois botões: “new” e“seen”. A lógica é bem simples, se a palavra mostrada for nova, você clica no botão “new”, caso a palavra já tenha sido mostrada anteriormente, você clica no botão “seen”, fácil né?

Bem, no começo, realmente é. Entretanto, conforme a lista de palavras aumenta, fica cada vez mais difícil saber se a palavra atual já foi mostrada ou não, e você só pode errar três vezes, se não é game over!

Como criar um bot para teste automatizado com NodeJS e Puppeteer

Se pararmos para pensar, os passos para pontuar neste teste são bastantes simples, correto? Basta ver a palavra, verificar se ela já foi mostrada ou não e, com base na conclusão do passo anterior, apertar o botão correto. Podemos observar que temos uma rotina muito bem definida.

Como todo programador, ao me deparar com essa rotina enquanto realizava esse teste, tive aquele momento de reflexão: “Hmmmm, eu poderia escrever um código para executar essa rotina de forma muito mais eficiente”.

E, para fazer isso, além do nosso bom e velho Node.js, vamos utilizar uma lib chamada Puppeteer. Para quem não conhece, ela é uma biblioteca mantida pela mesma equipe do Chrome Devtools. Com ela, podemos criar um bot para testes e realizar a automação de tarefas no browser, entendeu? Então, bora codar!

Colocando a mão (na massa) no teclado

Antes de tudo, vamos criar uma pasta para o nosso projeto. Utilizando o comando abaixo no linux, podemos criar e definir nosso diretório atual para o recém-criado benchmark-bot.

Agora, dentro da pasta que criamos, vamos instalar as nossas dependências. Neste caso, só precisaremos instalar uma única library: o Puppeteer.

(Na data deste artigo, a versão atual do Puppeteer é a 9.1.1)

Não se esqueça de adicionar a seguinte linha no seu package.json. Assim, podemos usar features poderosas das novas versões do Javascript (como EcmaScript Modules) e o charmoso Top Level Await, que será muito útil (graças à natureza assíncrona do Puppeteer). 

Hora de codar!

Com tudo devidamente acertado, podemos começar com a parte divertida de criar um bot para testes!

O Puppeteer fornece duas formas de acessar uma instância do browser. Dessa forma, podemos nos conectar a uma instância do Chrome já aberta ou deixar ele próprio iniciar uma instância. No nosso index.js, vamos começar a escrever nosso código.

Executando o código acima, podemos ver o Puppeteer executando nosso browser:

Ótimo! Mas um navegador aberto com uma página em branco não é muito interessante, certo? Então, vamos implementar a parte que irá fazer a navegação até a página que queremos, você vai ver como é simples!

Com apenas uma chamada de método, podemos navegar até a página necessária. Agora, executando o código que escrevemos até aqui, podemos ver o navegador exibindo nossa página.

Nesse momento, precisamos que o nosso bot clique no botão “Start” para que o jogo seja iniciado, certo? Com o Puppeteer, isso é moleza! Acompanhe o código a seguir e veja que podemos fazer isso com duas linhas de código.

Rodando o nosso código, vemos que (como o esperado) nosso bot aperta o botão “Start” e o teste é iniciado. Após o teste ser iniciado, temos três elementos com os quais o nosso bot irá interagir: a palavra atual que está sendo mostrada (e os dois botões abaixo dela); o botão “Seen” será clicado quando a palavra atual já tiver sido mostrada antes; e o botão “New” quando for uma palavra nova. 

Testando nossa memória

Esse jogo busca testar sua memória de curto prazo. Ou seja, ele vai testar quantas palavras você consegue se lembrar em um pequeno espaço de tempo.

Enquanto humanos, nosso cérebro não é “lá essas coisas” quando o assunto é guardar muitos valores em pouco tempo. Afinal, quem nunca fez aquele esforço para decorar um número de telefone quando não tinha nenhum papel e caneta por perto? Enquanto programadores, temos a nossa disposição uma engenhoca extremamente eficiente para armazenar e manipular quantidades monumentais de valores, sem esquecer de um único zero sequer: o computador.

Para termos acesso à essa máquina com superpoderes, nossas principais ferramentas são as linguagens de programação. Felizmente, a grande maioria dessas linguagens nos fornecem maneiras fáceis para armazenar dados.

Como já falamos, para resolver esse jogo, o nosso robô precisa saber qual é a palavra atual, ter uma lista com todas as palavras que já apareceram e também ter acesso aos dois botões para interagir com o teste. Então, faz sentido guardarmos a palavra atual em um variável e um array parece ser perfeito para armazenar as palavras que foram mostradas. Dessa forma, também já sabemos como acessar os botões que precisamos, certo? Vamos ao código!

Algoritmo

Agora que temos nossa estrutura montada, vamos criar as funções que vão possibilitar ao nosso robô entender o jogo e tomar as decisões corretas. O algoritmo é bem simples!

O nosso robô vai ler a palavra que está sendo mostrada no momento e conferir se essa palavra foi salva no nosso array. Caso tenha sido, isso significa que a palavra já foi mostrada anteriormente. Então, o robô deve clicar no botão “Seen”. Caso contrário, significa que a palavra é nova. Assim, o nosso robô irá armazenar essa palavra dentro do array e clicar no botão “New”. Depois disso, esperamos um delay de 50 milissegundos para garantir que a palavra foi atualizada e então podemos repetir tudo novamente, Ad infinitum!

Conclusão

Em poucos minutos, com o bot para testes, atingimos uma pontuação de mais de 6000 pontos!

Puppeteer é uma biblioteca extremamente poderosa para se ter no cinto de ferramentas, abstraindo todo o trabalho pesado para você. Ele é muito útil não só para automatizar ações na web como acabamos de fazer, mas também para escrever testes de integração (principalmente quando rodamos no headless mode).

Achou divertido criar um bot para testes? No site do Human Benchmark, existem vários outros testes esperando para serem automatizados, que tal programar um robô para algum dos outros testes e experimentar a magia do Puppeteer? Se você testar ou tiver alguma dúvida, deixe o seu comentário aqui na publicação!

Você pode acessar o repositório através deste link.

Veja também:

Como executar testes de performance.

Poised Testing: o que é e como utilizar!

Biblioteca de Artigos Sobre Desenvolvimento de Software