Tag: Puppeteer

Publicado em

Atualizações Puppeteer v4.0.0

Puppeteer é uma biblioteca Node que fornece uma API de alto nível para controlar o Chrome ou Chromium sobre o protocolo DevTools. Por padrão, o Puppeteer é executado headless.

A maioria das coisas que você pode fazer manualmente no seu navegador, pode ser realizada com Puppeteer.

O Puppeteer recentemente lançou uma atualização com significativas mudanças. A mudança mais impactante é:

O Puppeteer não utiliza mais a biblioteca EventEmitter no Nodejs:

Como o trabalho é tornar o Puppeteer uma ferramenta que seja independente do ambiente de desenvolvimento, foi removida a biblioteca EventEmitter no Nodejs, em favor de um emissor de eventos que não esteja vinculado ao Node. Por baixo dos panos, é utilizado o Mitt, com funcionalidades adicionais para corresponder aos métodos gerais que o EventEmitter do Nodejs fornece. Então, vários métodos foram removidos do Puppeteer, métodos esses que estendiam o EventEmitter:

  • eventNames();
  • getMaxListeners();
  • listeners(eventName);
  • prependListener;
  • prependOnceListener;
  • setMaxListeners(n);
  • rawListeners(eventName).

 

E os métodos estáticos na classe EventEmitter também não são mais suportados, como por exemplo:

  • listenerCount(emitter, eventName);
  • defaultMaxListeners;
  • errorMonitor;

O EventEmitter do Nodejs emite um evento newListener quando um ouvinte for adicionado e um removeListener quando um ouvinto foi removido. Estes eventos não são mais suportados pelo Puppeteer e não serão emitidos.

 

Novos recursos e melhorias:

  • Os logs de depuração de envio e recebimento agora são divididos em canais separados. Isso torna os logs muito mais claros e permite uma melhor visualização;
  • Agora você pode chamar o método isJavaScriptEnabled() em uma página do Puppeteer para descobrir se o JavaScript está habilitado na sua página.

Correções de Bugs:

  • Agora, o Puppeteer está muito melhor em encerrar os processos remanescentes do navegador, especialmente quando você sai de um teste utilizando o comando Ctrl-C.

 

Por baixo dos panos:

  • A equipe do Puppeteer começou a trabalhar em um novo sistema de documentação. Esse novo sistema utiliza o TSDoc para gerar a documentação a partir do código-fonte de sua aplicação, e tendo transportado a documentação para o código de acordo.

 

Gostou desta notícia? Comente abaixo!

Referências: https://github.com/puppeteer/puppeteer/releases/tag/v4.0.0

Publicado em

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!