Puppeteer: navegando no Chrome via NodeJs

Raul Esteves
2 min readDec 25, 2019

--

https://pptr.dev/

Este artigo tem como objetivo apresentar o Puppeter, que é uma biblioteca Node que nos fornece uma API para controlar o navegador Chrome ou Chromium. Seja abrindo o browser e o controlando OU headless.

Headless? É, essencialmente controlar o Chrome "sem" o Chrome.

Algumas idéias do que podemos fazer:

  • Capturar screenshots da tela (ou de trechos dela) ou gerar PDFs
  • Automatizar envio de formulários e testes funcionais no front-end
  • Web scraping

Por exemplo, um teste que faça login no seu sistema e siga uma determinada rotina, ou um 'bot' que entra em um site e caça alguma informação. Vamos testar um exemplo simples. Que tal um script que receba um domínio, entre no registro.br e verifique se o mesmo esta disponível, nos retornando uma mensagem de sucesso (ou não) e um print da tela?

Legal, vamos lá, crie uma pasta e entre nela (se estiver na preguiça, também tem esse playground aqui). Ao baixarmos o pacote, a versão mais recente do chromium vem junto.

npm i puppeteer //eu sei que você sabe pra que serve

Rodamos o script da seguinte maneira:

node script.js dominio.com.br //retorno: Domínio não disponível para registro.

Começamos instanciando o puppeteer e em seguida usamos uma IIFE (Immediately Invoked Function Expression) assíncrona, que é um nome bonito pra uma função que é executada assim que é definida.
Atribuímos o domínio que digitamos na chamada do script, a variável domainToSearch, instanciamos o browser com a função .launch(), que por padrão usa o Chrome headless, mas se você quiser por exemplo, pra debuggar, utilizar o browser normal, é só passar o seguinte objeto na função {headless: false} e assistir o Chrome navegando sozinho.
Instanciamos também uma página, com a função .newPage() e começamos a navegar.
Começamos indo até a página do registro.br, digitamos o domínio no elemento de ID '#is-avail-field', clicamos no (por coincidência) único botão da página para efetuar a busca e esperamos por precaução o tempo de 1s.
Com evaluate rodamos alguns comandos (no caso querySelectors) no 'console' do nosso browser headless, e caso haja algum dos elementos que procuramos, logamos.
Com page.on criamos um evento de 'console', já que se simplesmente logassemos, o log ficaria dentro do nosso browser headless e não no nosso terminal.
Por fim printamos a página e fechamos o browser.

Hmmm, até que é simples né? Os nomes das funções são bem sugestivos, da uma olhada na documentação oficial e no github, ta tudo bem bacana:

Site oficial
Github

E é isso aí, espero que tu tenhas gostado e que de alguma forma tenhas ajudado. Se curtiu esmaga a palminha e até a próxima ;)

--

--