Automação de navegador com Puppeteer e JavaScript: implementação prática em Node.js

Índice

Marionetista é um Node.js biblioteca que automatiza tarefas do navegador como web scraping, testes de IU e fluxos de trabalho repetitivos. Ele funciona em ambos sem cabeça (sem interface) e modos de navegador completo e se comunica com os navegadores por meio do Protocolo DevTools. Veja por que é a melhor escolha para desenvolvedores:

Manipulação de conteúdo dinâmico: Perfeito para aplicativos web modernos e para contornar sistemas de detecção.
Usos comuns: Web scraping, geração de PDF, captura de tela e automação de formulários.
Configuração simples: Instale o Puppeteer com npm install puppeteer, e vem junto com uma versão compatível do Chrome.

Exemplo rápido:

import puppeteer from 'puppeteer';

async function runAutomation() {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
}

runAutomation();

Por que se destaca:

Modos: Headless (tarefas de CI/CD) ou UI completa (depuração).
Interações de página: Automatize cliques, digitação e navegação usando seletores CSS.
Dicas de desempenho: Desative imagens, use o modo furtivo e gerencie operações assíncronas com eficiência.

De iniciantes a usuários avançados, o Puppeteer simplifica a automação do navegador, tornando-se uma ferramenta essencial para desenvolvedores Node.js.

Testes e automação da Web modernos com Marionetista (Google ...

Marionetista

Configuração inicial e configuração

Siga estas etapas para configurar o Puppeteer no Node.js e deixar tudo pronto para automação.

Configurando Node.js Meio Ambiente

Node.js

Para começar, você precisará de três componentes principais:

Componente	Propósito	Comando de verificação
Node.js	Ambiente de execução	`node --version`
npm	Gerenciador de pacotes	`npm --version`
Google Chrome	Motor do navegador	Verifique a instalação

Como o npm vem junto com o Node.js, instalar o Node.js fornece as duas ferramentas. Baixe a versão mais recente do Long Term Support (LTS) do site oficial do Node.js para melhor estabilidade e compatibilidade.

Configuração do projeto com Puppeteer

Veja como criar um novo projeto no Puppeteer:

1º Passo: Corre mkdir puppeteer-project para criar uma pasta de projeto.
2º Passo: Navegue até a pasta e inicialize-a com cd puppeteer-project && npm init -y.
3º Passo: Instale o Puppeteer usando npm install puppeteer.

Quando você instala o Puppeteer, ele baixa automaticamente uma versão do Chrome para teste que corresponde à biblioteca. Isso garante que seus scripts se comportem de forma consistente em diferentes configurações.

Estrutura básica do script

Aqui está um modelo simples de script do Puppeteer:

import puppeteer from 'puppeteer';

async function runAutomation() {
  const browser = await puppeteer.launch({
    headless: true
  });
  const page = await browser.newPage();

  try {
    await page.setViewport({ width: 1280, height: 800 });
    await page.goto('https://example.com');
    // Add your actions here
  } finally {
    await browser.close();
  }
}

runAutomation();

Melhores práticas para escrever roteiros de marionetista:

Use page.waitForSelector() para garantir que os elementos estejam totalmente carregados antes de interagir com eles.
Defina as dimensões da janela de visualização para uma renderização de página consistente.
Envolva seu código em try/finally blocos para lidar com erros e garantir que o navegador feche corretamente.
Sempre feche a instância do navegador para evitar problemas de memória.

Para uma experiência de desenvolvimento mais suave, adicione "type": "module" para o seu package.json arquivo. Isso permite que você use a sintaxe moderna do módulo ES como import e export em seus scripts. Com essa configuração pronta, você está pronto para mergulhar nos recursos avançados do Puppeteer nas próximas seções.

Principais características do marionetista

Vamos analisar os principais recursos do Puppeteer para uma automação eficaz do navegador.

Noções básicas de controle do navegador

O Puppeteer permite que você execute navegadores em dois modos:

Moda	Descrição	Melhor caso de uso
Sem cabeça	Executa o navegador de forma invisível	Automação em pipelines de CI/CD, tarefas de produção
completo	Exibe a interface do usuário do navegador	Depuração, testes de desenvolvimento

Aqui está um exemplo rápido de como iniciar um navegador com configurações personalizadas:

const browser = await puppeteer.launch({
  headless: true,
  defaultViewport: { width: 1920, height: 1080 },
  args: ['--no-sandbox', '--disable-setuid-sandbox']
});

Métodos de interação de página

O Puppeteer facilita a interação com páginas da web usando seletores CSS e funções de espera integradas para garantir que os elementos estejam prontos. Por exemplo:

// Wait for the email input field to load and type an email
const emailInput = await page.waitForSelector('input[type="email"]');
await emailInput.type('[email protected]');

// Wait for the submit button to appear and click it
const submitButton = await page.waitForSelector('button[type="submit"]');
await submitButton.click();

Você pode executar uma variedade de ações, como:

Eventos de mouse: Clique, passe o mouse ou arraste e solte.
Entrada de teclado: Digite o texto ou use combinações de teclas.
Manipulação de formulários: Trabalhe com menus suspensos, caixas de seleção e uploads de arquivos.
Navegação de quadros: Interaja com iframes ou alterne entre várias janelas.

Gerenciando operações assíncronas

Como o Puppeteer é construído em torno de operações assíncronas, gerenciar essas tarefas adequadamente é crucial. A estrutura inclui mecanismos de espera para garantir uma automação suave. Aqui está um exemplo:

try {
  await Promise.all([
    page.waitForNavigation(),
    page.click('#submit-button')
  ]);

  await page.waitForSelector('.success-message', {
    visible: true,
    timeout: 5000
  });
} catch (error) {
  console.error('Navigation failed:', error);
}

"Async/await é uma maneira de escrever código assíncrono que se parece mais com código síncrono tradicional, o que geralmente pode ser mais fácil de ler e entender." - WebScraping.AI

Algumas estratégias de espera úteis incluem:

Função Wait	Propósito	Exemplo de uso
esperarPorSeletor	Aguarda que um elemento apareça	Útil para formulários ou conteúdo dinâmico
esperarPorNavegação	Aguarda o carregamento de uma página	Ideal para envios de formulários
esperarPorFunção	Aguarda condições personalizadas	Ótimo para verificar mudanças de estado complexas
espereForTimeout	Introduz um atraso fixo	Útil para limites de taxa ou animações

sbb-itb-23997f1

Exemplos de implementação

Esta seção fornece exemplos práticos mostrando como o Puppeteer pode ser usado para tarefas como extração de dados, automatização de formulários e captura de páginas da web de forma eficaz.

Métodos de Extração de Dados

O Puppeteer simplifica o manuseio de conteúdo dinâmico e a extração de dados estruturados. Abaixo está um exemplo de scraping de dados de revisão de uma página com rolagem infinita:

async function scrapeReviews() {
  const reviews = [];

  // Scroll until no new content loads
  async function scrollToBottom() {
    let lastHeight = await page.evaluate('document.body.scrollHeight');
    while (true) {
      await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
      await page.waitForTimeout(2000);
      let newHeight = await page.evaluate('document.body.scrollHeight');
      if (newHeight === lastHeight) break;
      lastHeight = newHeight;
    }
  }

  // Extract review data
  await scrollToBottom();
  const reviewElements = await page.$$('.review-box');
  for (const element of reviewElements) {
    const review = await element.evaluate(el => ({
      text: el.querySelector('.review-text').textContent,
      rating: el.querySelector('.rating').getAttribute('data-score'),
      date: el.querySelector('.review-date').textContent
    }));
    reviews.push(review);
  }

  return reviews;
}

Para melhorar o desempenho durante a raspagem, considere estas dicas:

Operacional	Implementação	Beneficiar
Desativar imagens	`page.setRequestInterception(true)`	Economiza largura de banda
Use o modo furtivo	`puppeteer-extra-plugin-stealth`	Ajuda a evitar a detecção
Adicionar atrasos	`page.waitForTimeout()`	Evita limitação de taxa

Agora, vamos passar para a automação de formulários.

Etapas de automação de formulários

Automatizar formulários envolve preencher campos de entrada, manipular botões e gerenciar erros potenciais. Veja como você pode automatizar um formulário de login com tratamento de erros:

async function handleLogin(username, password) {
  try {
    // Click cookie accept button if visible
    const cookieButton = await page.$('.cookie-accept');
    if (cookieButton) await cookieButton.click();

    // Fill login form
    await page.type('#username', username, { delay: 100 });
    await page.type('#password', password, { delay: 100 });

    // Submit and wait for navigation
    await Promise.all([
      page.waitForNavigation(),
      page.click('#login-button')
    ]);

    // Check for error messages
    const errorElement = await page.$('.error-message-container');
    if (errorElement) {
      const errorText = await errorElement.evaluate(el => el.textContent);
      throw new Error(`Login failed: ${errorText}`);
    }

  } catch (error) {
    console.error('Login automation failed:', error);
  }
}

Ferramentas de captura de página

Para capturar páginas da web, o Puppeteer permite que você configure as configurações para capturas de tela e PDFs. Aqui está um exemplo para criar capturas de alta qualidade:

async function captureWebPage(url) {
  // Set viewport for consistent captures
  await page.setViewport({
    width: 1920,
    height: 1080,
    deviceScaleFactor: 2
  });

  await page.goto(url, { waitUntil: 'networkidle0' });

  // Take full-page screenshot
  await page.screenshot({
    path: 'capture.jpg',
    fullPage: true,
    quality: 90,
    type: 'jpeg'
  });

  // Generate PDF with custom settings
  await page.pdf({
    path: 'page.pdf',
    format: 'A4',
    printBackground: true,
    margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
  });
}

"Fazer capturas de tela de sites com o Puppeteer pode ser complicado. Muitas armadilhas nos aguardam." - Dmytro Krasun, Autor em ScreenshotOne

Para melhores resultados, adapte suas configurações de captura com base na tarefa:

Tipo de captura	Melhores Práticas	Caso de uso ideal
Screenshots	Use JPEG para processamento mais rápido	Capturas gerais da web
PDF	Aplicar mídia impressa CSS	Criação de documentos
Captura de Elementos	Seletores específicos de destino	Testando componentes individuais

Esses exemplos demonstram como o Puppeteer pode simplificar uma variedade de tarefas de automação.

Recursos avançados e desempenho

O Puppeteer oferece uma gama de técnicas avançadas que podem aprimorar seus projetos Node.js. Vamos mergulhar em como você pode melhorar os testes, gerenciar várias páginas e otimizar o desempenho.

Testes e gerenciamento de erros

O tratamento eficaz de erros no Puppeteer pode tornar a depuração muito mais simples. Ao monitorar os processos do navegador e registrar solicitações com falha, você pode identificar e resolver problemas rapidamente. Aqui está um exemplo de uma configuração sólida de gerenciamento de erros:

async function robustPageOperation(url) {
  try {
    await page.goto(url, { 
      waitUntil: 'domcontentloaded',  // Faster than 'networkidle2'
      timeout: 30000 
    });

    // Monitor failed requests
    page.on('requestfailed', request => {
      console.error(`Failed request: ${request.url()}`);
      console.error(`Reason: ${request.failure().errorText}`);
    });

    // Capture a screenshot on error for debugging
    page.on('error', async (error) => {
      await page.screenshot({
        path: `error-${Date.now()}.png`,
        fullPage: true
      });
      console.error('Page error:', error);
    });

  } catch (error) {
    console.error('Navigation failed:', error);
    throw error;
  }
}

"Isso não resolverá todos os seus problemas, mas lhe dará consciência situacional suficiente para tornar o(s) problema(s) muito mais fácil(eis) de diagnosticar e corrigir." - Joel Griffith, fundador e CEO da browserless.io

Depois de configurar o tratamento de erros, você pode ir mais longe gerenciando várias páginas simultaneamente.

Operações de várias páginas

O Puppeteer permite que você lide com múltiplas tarefas simultaneamente, o que pode economizar tempo e melhorar a eficiência. Aqui está um exemplo de gerenciamento de tarefas simultâneas com o Puppeteer Cluster:

const { Cluster } = require('puppeteer-cluster');

async function runParallelOperations() {
  const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 4,
    monitor: true,
    timeout: 30000
  });

  await cluster.task(async ({ page, data: url }) => {
    await page.goto(url);
    // Perform page operations
  });

  // Queue URLs for processing
  const urls = ['url1', 'url2', 'url3'];
  for (const url of urls) {
    await cluster.queue(url);
  }

  await cluster.idle();
  await cluster.close();
}

O manuseio eficiente de várias páginas é um grande passo à frente, mas otimizar o uso de recursos pode tornar suas operações ainda mais tranquilas.

Velocidade e Gestão de Recursos

Para obter o melhor desempenho do Puppeteer, concentre-se em reduzir os tempos de carregamento e gerenciar recursos de forma eficaz. Abaixo estão algumas estratégias:

Abordagem de otimização	Implementação	Beneficiar
Velocidade de carregamento da página	Desabilitar imagens e CSS	Carregamento mais rápido
Uso da Memória	Descarte as páginas imediatamente	Evita vazamentos de memória
Gerenciamento de Solicitações	Respostas em cache	Reduz a carga da rede
Processamento paralelo	Concorrência controlada	Uso equilibrado de recursos

Veja um exemplo de como você pode otimizar as operações da página:

async function optimizedPageOperation() {
  // Intercept and optimize requests
  await page.setRequestInterception(true);
  page.on('request', request => {
    if (request.resourceType() === 'image' || request.resourceType() === 'stylesheet') {
      request.abort();
    } else {
      request.continue();
    }
  });

  // Implement caching
  const cache = new Map();
  page.on('response', async response => {
    const url = response.url();
    if (response.ok() && !cache.has(url)) {
      cache.set(url, await response.text());
    }
  });
}

Guia de integração do Node.js

Aprenda como integrar perfeitamente o Puppeteer aos seus projetos Node.js com uma estrutura de código limpa e sustentável.

Organização do Código

Mantenha seus módulos de automação estruturados para clareza e reutilização. Aqui está um exemplo de configuração:

// automation/browser.js
const puppeteer = require('puppeteer');

class BrowserManager {
  async initialize() {
    this.browser = await puppeteer.launch({
      headless: true,
      args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    return this.browser;
  }

  async createPage() {
    const page = await this.browser.newPage();
    await page.setDefaultNavigationTimeout(30000);
    return page;
  }

  async cleanup() {
    if (this.browser) {
      await this.browser.close();
    }
  }
}

module.exports = new BrowserManager();

Essa configuração separa responsabilidades, tornando seu código mais fácil de gerenciar e dimensionar.

Integração de Biblioteca

O Puppeteer pode trabalhar junto com outras bibliotecas Node.js para aprimorar seus fluxos de trabalho de automação. Aqui está um exemplo usando winston para registro e puppeteer-extra para capacidades furtivas:

const winston = require('winston');
const puppeteerExtra = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');

// Set up logging with winston
const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'automation.log' })
  ]
});

// Configure Puppeteer with stealth mode
puppeteerExtra.use(StealthPlugin());

async function setupAutomation() {
  const browser = await puppeteerExtra.launch();
  const page = await browser.newPage();

  // Log browser console messages
  page.on('console', message => {
    logger.info(`Browser console: ${message.text()}`);
  });

  return { browser, page };
}

"Puppeteer é uma biblioteca Node.js que fornece uma API de alto nível para controlar o Chrome ou o Chromium por meio do Protocolo DevTools."

Ao integrar recursos de registro e furtividade, você pode monitorar e gerenciar melhor suas tarefas de automação.

Etapas de implantação da produção

Para implementar scripts do Puppeteer, garanta que seu ambiente esteja otimizado para estabilidade e desempenho. Aqui está uma análise das principais etapas:

Etapa de implantação	Detalhes de Implementação	Propósito
Dependências	Instalar dependências do Chrome	Garante a funcionalidade do navegador
Configuração de cache	Estabelecer `.cache/puppeteer` anuário	Gerencia instâncias do navegador
Limites de recursos	Configurar restrições de memória e CPU	Evita sobrecarga do sistema
Recuperação de Erro	Implementar mecanismos de reinicialização automática	Mantém o tempo de atividade do serviço

Use a seguinte configuração para padronizar sua implantação:

const { join } = require('path');

module.exports = {
  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
  executablePath: process.env.CHROME_PATH || null,
  defaultViewport: {
    width: 1920,
    height: 1080
  }
};

Para otimizar ainda mais seus scripts:

Feche páginas e instâncias do navegador não utilizadas o mais rápido possível.
Use blocos try/catch para manipular erros e registrá-los de forma eficaz.
Monitore o uso da memória e os tempos de resposta para evitar gargalos.
Configure cabeçalhos de segurança e controles de acesso para proteger seu ambiente.

"Ao otimizar seu script Puppeteer, você pode garantir uma operação suave e eficiente com resultados precisos e consistentes." - ScrapeOps

Resumo

Visão geral do recurso

O Puppeteer é uma ferramenta de automação de navegador que se destaca em tarefas como controle de navegador headless, automação de formulários, testes de interface do usuário, captura de tela, geração de PDFs e funcionalidades de web scraping.

Aqui está uma rápida olhada em seus principais recursos:

Característica	Capacidade	Diferenciais
Suporte do navegador	Chrome/Crômio, Firefox	Funciona em vários ambientes
Modo de execução	Sem cabeça/com cabeça	Adequado para vários cenários
Desempenho	Operação leve	Usa menos recursos do sistema
Acesso API	Protocolo DevTools	Oferece controle detalhado do navegador

Você pode aproveitar ao máximo esses recursos seguindo estratégias específicas adaptadas às suas necessidades.

Guia de Implementação

Para maximizar o potencial do Puppeteer, considere estas estratégias para melhorar o desempenho e a confiabilidade:

Gestão de Recursos

O script a seguir desabilita recursos desnecessários, como imagens, folhas de estilo e fontes para melhorar a velocidade de carregamento da página:

// Optimize page load performance
await page.setRequestInterception(true);
page.on('request', request => {
  if (['image', 'stylesheet', 'font'].indexOf(request.resourceType()) !== -1) {
    request.abort();
  } else {
    request.continue();
  }
});

Prevenção de erros

Use este snippet para garantir que seu script aguarde o aparecimento de um elemento antes de interagir com ele:

await page.waitForSelector('#target-element', {
  timeout: 5000,
  visible: true
});

Para configurações de produção, siga estas etapas:

Configuração de infraestrutura: Instale as dependências necessárias do Chrome e configure os diretórios de cache corretamente.
Tweaks desempenho: Minimize o uso de recursos desabilitando ativos desnecessários e habilitando a interceptação de solicitações.
Aprimoramentos de segurança: Adicione o marionetista-extra-plugin-furtivo plugin para reduzir riscos de detecção.
Escala: Usar grupo de marionetistas para processamento paralelo para lidar com cargas de trabalho maiores de forma eficiente.