Automação de screenshot com Puppeteer
Armazenar telas de páginas Web com Puppeteer, JavaScript e NodeJS
Automatizar é criar um robô para realizar tarefas repetitivas, do dicionário:
Robô
de 1923, "pessoa mecânica", "pessoa que trabalha ou realizar atividades inteiramente mecanicamente" da tradução em inglês de 1920 da peça "R.U.R." ("Rossum's Universal Robots") por Karel Capek (1890-1938), do tcheco robotnik "trabalhador forçado,", de robota "trabalho forçado, serviço compulsório, labuta," ...
Vamos criar um pequeno robô para fazer uma atividade específica
Instalação de pacotes
Podemos instalar o puppeteer como global ou iniciar um projeto com o, respondendo as perguntas do inicializador
npm init
# or
yarn initE instalar o próprio puppeteer
npm install puppeteer
# or
yarn add puppeteerRealizar o passo a passo
Geração do código para nosso pequeno robô
Abrir o navegador
Importação da biblioteca do Puppeteer
const puppeteer = require("puppeteer")Iniciação do navegador do Google Chrome e abrir uma aba nova
const browser = await puppeteer.launch({ headless: "new" })
const page = await browser.newPage()Navegar e esperar construção da página
Navegando para https://google.com e esperar o navegador informar o fim do carregamento
await page.goto("https://google.com", { waitUntil: "networkidle0" })Redimensionar janela do navegador
await page.setViewport({
width: 1800,
height: 1200,
deviceScaleFactor: 1,
})Tirando uma foto
await page.screenshot({
path: `./open.jpg`,
type: "jpeg",
quality: 100,
})Digitando texto na caixa
Buscar e focar no campo de texto de pesquisa
const searchField = await page.$("[name=q]")
searchField.focus()Informar o termo de busca e iniciar a pesquisa com Enter
await page.keyboard.type("orange")
await page.keyboard.press("Enter")Clicando no elemento
const imageTab = await page.$("#top_nav a")
await imageTab.click()Esperando página carregar
Não é ideal no processo de carregamento ter um esperar com tempo definido, mas algumas vezes é necessário
function delay(time) {
return new Promise(function (resolve) {
setTimeout(resolve, time)
})
}
// Esperar por 10 segundos
await delay(10000)Sempre que possível solicite para esperar a página carregar com resposta da rede finalizada
await page.waitForNavigation({ waitUntil: "networkidle2" })Compilado
Compilado para executar de forma invisível (headless) no Google Chrome
const puppeteer = require("puppeteer")
function delay(time) {
return new Promise(function (resolve) {
setTimeout(resolve, time)
})
}
async function main() {
// Iniciar Puppeteer, navegador e nova página
const browser = await puppeteer.launch({ headless: "new" })
const page = await browser.newPage()
// Acessar endereço, esperando página carregar
await page.goto("https://google.com", { waitUntil: "networkidle0" })
// Tirar um screenshot
await page.screenshot({
path: `./open.jpg`,
type: "jpeg",
quality: 100,
})
// Alterar o tamanho da tela
await page.setViewport({
width: 1800,
height: 1200,
deviceScaleFactor: 1,
})
// Tirar um screenshot da tela ampliada
await page.screenshot({
path: `./max.jpg`,
type: "jpeg",
quality: 100,
})
// Encontrar e focar no campo de busca
const searchField = await page.$("[name=q]")
searchField.focus()
// Digitar a palavra "orange" na caixa de busca e digitar <Enter>
await page.keyboard.type("orange")
await page.keyboard.press("Enter")
// Esperar por 10 segundos
await delay(10000)
// Tirar um screenshot do resultado da busca
await page.screenshot({
path: `./search.jpg`,
type: "jpeg",
quality: 100,
})
// Clicar para a aba de Imagens
const imageTab = await page.$("#top_nav a")
await imageTab.click()
// Esperar página carregar após o clique
await page.waitForNavigation({ waitUntil: "networkidle2" })
// Tirar um screenshot das imagens
await page.screenshot({
path: `./imagens.jpg`,
type: "jpeg",
quality: 100,
})
// Fechar o navegador
await browser.close()
}
main()Possíveis problemas
No sistema Linux é necessário alguns pacotes para a execução do Chrome Driver
Se for necessário executar sudo apt install libnss
Se a continuar com problemas de execução tentar sudo apt install libnss3-dev libgdk-pixbuf2.0-dev libgtk-3-dev libxss-dev
Se necessário adicionar sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev
Para adicionar libasound2 sudo apt install libasound2
Referências
Versões das bibliotecas utilizadas
puppeteer: "^19.8.0"
