Introdução ao Puppeteer, uma biblioteca NodeJS

O Puppeteer é uma biblioteca que fornece uma API de alto nível para controlar o Chrome ou o Chromium através do Protocolo DevTools.

A maioria das coisas que você pode realizar manualmente pelo navegador pode ser feita usando o Puppeteer. Como por exemplo:

• Gerar Screenshots e PDF’s de páginas;

• Rastrear um SPA (Single-Page Application) e gerar conteúdo pré renderizado;

• Automatizar o envio de formulários, testes de interface do usuário, entrada de teclado etc;

• Criar ambiente de testes automatizado e atualizado;

• Executar os testes diretamente na versão mais recente do Chrome usando os recursos mais recentes de JavaScript;

• Capturar um rastreamento da linha do tempo do seu site para ajudar no diagnóstico de problemas de desempenho;

• Testar as extensões do Chrome.

Instalação

Para utilizar o Puppeteer no seu projeto, execute:

npm i puppeteer
# ou “yarn add puppeteer”

Quando você instala o Puppeteer, ele baixa uma versão recente do Chromium.

O Puppeteer será familiar para as pessoas que usam outros frameworks de teste do navegador. Você cria uma instância do Navegador, abre páginas e as manipula com a API do Puppeteer.

Crie seu arquivo e o salve como example.js.

Tirar ScreenShot:

Neste exemplo, navegaremos até a página https://example.com e salvaremos uma captura de tela como example.png:

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // Navega até a pagina destino
    await page.goto('https://example.com');
    // Tira um Screenshot da página
    await page.screenshot({path: 'example.png'});
    await browser.close();
})();

Execute o script na linha de comando:

node example.js

Criando um PDF:

Podemos utilizar o Puppeteer para criar um PDF da página, adicionando o seu formato de folha:

Salve o seu arquivo como criarPdf.js

const puppeteer = require ('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // Especifica qual a página a ser transformada em PDF
    await page.goto('https://example.com', {waitUntil:'networkidle2'});
    // Salva o arquivo em PDF
    await page.pdf({path: 'criarPdf.pdf', format: 'A4'});
    await browser.close();
})();

Execute o comando:

node criarPdf.js

Descobrindo dimensões da viewport do site:

Você pode descobrir as dimensões da viewport de um site, capturando o width e height da viewport do site especificado.

Salve seu arquivo como getDimensions.js

const puppeteer = require('puppeteer');

(async ()=> {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');

    // Obtendo o viewport da página
    const dimensions = await page.evaluate(() => {
        return {
            // Retorna o width da viewport
            width: document.documentElement.clientWidth,
            // Retorna o height da viewport
            height: document.documentElement.clientHeight,
            deviceScaleFactor: window.devicePixelRatio
        };
    });

    console.log('Dimensions:', dimensions);
    await browser.close();
})();

Execute o comando:

node getDimensions.js

E esta será a sua resposta. Um objeto com os valores de largura, altura e fator de escala do dispositivo.

Gostou deste artigo? Comente abaixo!