Considere o Puppeteer como sua próxima lib queridinha?
Olás!
Nos últimos anos, a web evoluiu de sites simplistas criados com HTML e CSS, e quando tínhamos animações eram gifs ou depois o famigerado flash.
Atualmente falar de construção de páginas é o mix de sopa de letrinhas com frameworks reativos, Angular, React ou Vue, que o resultado são belíssimas telas com milhões de interatividade.
Como podemos garantir que toda essa interatividade funciona?
Meu amigo, se for de forma caseira, haja planilha de teste, scripts e, com o perdão da palavra chinezinhos, abrindo uma a uma todas páginas de seu sistema web ou website.
Pois bem, apresento-lhe uma biblioteca Node de nome Puppetter, têm um de seus propósitos ser capaz de realizar testes automatizados de aplicativos da web. Essa biblioteca tem ganhado muita por conta de seus principais “concorrentes” estarem sendo descontinuado por falta de mantenedores.
TL;DR
Puppetter é a ferramenta oficial da equipe do Google Chrome Headless. Que possibilita a automação de teste de aplicativos web, scraping e uma forma de interação sistêmica com alguma página (integração não invasiva).
Getting Started
Vamos precisar que tenha o NodeJS instalado, a versão que testei é a 12.13.0, última disponível na data de hoje, 21/11/2019.
Abra o terminal até a pasta do projeto e digite:
$ mkdir puppetter
$ cd puppetter
$ npm init -yPronto, ambiente node montado, agora vamos configurar o puppetter:
$ npm i puppetter --saveIrá demorar um pouco, mas assim que concluir já podemos utilizar a biblioteca puppetter para por exemplo tirar um screenshot da página do Google.
Codando
Criaremos um arquivo na raiz de nome index.js com o conteúdo abaixo.
Vamos entender o que cada linha deste código faz?
Antes de tudo o puppetter trabalha de forma assíncrona, portanto precisamos de usar async/await para manipular as ações realizadas no browser.
linha 4: const browser = await puppeteer.launch();
A biblioteca irá iniciar um browser zerado, sem nenhum cookie gravado ou vinculo com usuário Google, de forma headless, ou seja, sem a parte visual ser exibida. Podemos fazer a exibição do browser, passando um parâmetro, headless: false
linha 4: const browser = await puppeteer.launch({ headless: false });
linha 5: const page = await browser.newPage();
Será aberta uma aba no navegador, por padrão não vem aberta nenhuma aba.
linha 6: await page.goto(“https://google.com.br");
Aqui indicamos qual a página, endereço web, que desejamos abrir
linha 7: await page.screenshot({ path: “screenshot.png” });
A função mais importante do nosso exemplo, a captura da tela, que será realizada no arquivo screenshot.png
linha 8: browser.close();
Lembre-se de sempre fechar o browser para notificar o puppeteer que acabou o serviço, se não fizer o close ele não irá gerar o arquivo.
Executando
A execução é realizada via terminal
$ node index.jsO resultado é um arquivo screenshot.png, semelhante a esse:
Considerações
Esse exemplo que demonstrei é bem básico e mostra o que pode ser feito com essa biblioteca. Existe o universo enorme para explorar!!
Gostou desta publicação? Quer ver mais sobre esse assunto, deixa nos comentários qual exemplo para aplicarmos essa biblioteca.
Não entendeu nada! Relaxa, a ArrayOf está a disposição sempre para te ajudar, basta entrar em contato, que faremos assessoria a sua medida.
Você pode conferir o código fonte aqui no Github.
