Headless Chrome: como usar e configurar

Quer automatizar tarefas, coletar dados ou testar sites com eficiência? Sem cabeça Chrome pode ajudar você a fazer exatamente isso. É um navegador que funciona sem uma interface gráfica, tornando-o mais rápido e menos intensivo em recursos para tarefas como web scraping, testes automatizados e análise de SEO.

Principais benefícios:

• Raspagem da web: Extraia dados de sites com muitos JavaScript.
• Teste automatizado: Execute testes mais rápidos e com economia de recursos para pipelines de CI/CD.
• Monitoramento de Desempenho: Simule interações do usuário para depurar problemas.
• Análise SEO: Reúna e analise rapidamente dados do site.

Configuração rápida:

1. Instale Node.js e Marionetista.
2. Defina configurações básicas como tamanho da janela de visualização e bloqueio de recursos.
3. Use scripts para automatizar tarefas, capturar capturas de tela ou gerar PDFs.

Plataformas como Nó latente simplifique ainda mais esse processo com ferramentas de low-code para automação. Seja você um desenvolvedor ou um iniciante, o Headless Chrome é uma ferramenta poderosa para agilizar tarefas da web. Vamos mergulhar em como configurá-lo e usá-lo efetivamente.

O que é um navegador headless? Como você executa o Headless Chrome?

Guia de Configuração

Certifique-se de que seu sistema atenda às especificações necessárias e siga as etapas de instalação para sua plataforma.

Requerimentos técnicos

Verifique a compatibilidade do seu sistema:

Sistema Operacional	Requerimentos do sistema
Windows	• Windows 10 ou Windows Server 2016+ • Intel Pentium 4 (compatível com SSE3) ou mais recente
MacOS	• macOS Big Sur 11 ou mais recente
Linux	• 64 bits Ubuntu 18.04 +, Debian 10+ . openSUSE 15.5 + ou Fedora 39+ • Intel Pentium 4 (compatível com SSE3) ou mais recente

Você também precisará instalar o Node.js (última versão LTS) para usar o Puppeteer.

Passos da instalação

Siga estas etapas com base na sua plataforma:

• Windows Baixe o Chrome do site oficial, instale o Node.js e execute:

  npm install puppeteer
  

• MacOS Use Homebrew para instalar o Chrome e o Puppeteer:

  brew install --cask google-chrome
  npm install puppeteer
  

• Linux Atualize seu sistema e instale o Chrome junto com o Puppeteer:

  sudo apt update
  sudo apt install google-chrome-stable
  npm install puppeteer
  

Após a instalação, verifique novamente sua configuração para garantir que tudo esteja funcionando.

Testando sua instalação

Execute estes comandos para confirmar se o Chrome está instalado corretamente:

google-chrome-stable --version
google-chrome-stable --headless --disable-gpu --dump-dom https://www.google.com/

Se você vir a versão do Chrome e a saída HTML do Google, o Chrome está pronto para uso. Para testar o Puppeteer, use o script abaixo:

const puppeteer = require('puppeteer');

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

Salve este código como test.js e executá-lo usando node test.js. Se funcionar sem erros, sua configuração estará concluída e você estará pronto para mergulhar nas tarefas de automação.

Basic Settings

Configurações principais

Defina as configurações essenciais para garantir automação suave, gerenciamento eficaz de recursos e tratamento confiável de solicitações.

const browser = await puppeteer.launch({
    headless: true,
    defaultViewport: { width: 1920, height: 1080 },
    args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--disable-gpu'
    ]
});

Esta configuração funciona bem para a maioria das tarefas de automação, usando dimensões de tela de desktop padrão e argumentos focados em estabilidade. Você pode ajustar essas configurações com base em seus requisitos específicos.

Configuração específica da tarefa

Ajuste a configuração para tarefas individuais. Por exemplo, se você estiver trabalhando em web scraping, você pode reduzir o uso de recursos e evitar a detecção:

const page = await browser.newPage();

// Block unnecessary resources
await page.setRequestInterception(true);
page.on('request', (request) => {
    if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
        request.abort();
    } else {
        request.continue();
    }
});

// Set custom headers
await page.setExtraHTTPHeaders({
    'Accept-Language': 'en-US,en;q=0.9',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
});

// Enable JavaScript if required
await page.setJavaScriptEnabled(true);

Para testes automatizados, priorize estabilidade e consistência:

const page = await browser.newPage();
await page.setDefaultTimeout(30000);
await page.setDefaultNavigationTimeout(30000);
await page.setCacheEnabled(false);

Você pode melhorar ainda mais o desempenho ajustando as configurações de velocidade e alocação de recursos.

Configurações de velocidade e recursos

Aumente o desempenho do Headless Chrome gerenciando recursos de forma eficaz. Abaixo estão algumas configurações úteis:

Tipo de Configuração	Configuração	Propósito
Memória	--max-old-space-size=4096	Aloca até 4 GB de memória para Node.js
Extração	--single-process	Executa o Chrome como um único processo
Rendering	--disable-gpu	Desativa a aceleração de hardware da GPU (conforme mostrado anteriormente)

Para tarefas de maior escala, você pode executar várias sessões do navegador simultaneamente enquanto gerencia recursos:

const cluster = await Cluster.launch({
    concurrency: Cluster.CONCURRENCY_CONTEXT,
    maxConcurrency: 4,
    monitor: true,
    puppeteerOptions: {
        headless: true,
        args: ['--no-sandbox']
    }
});

Além disso, ajuste as configurações de tempo limite para corresponder às condições da sua rede:

page.setDefaultNavigationTimeout(60000);  // 60 seconds for navigation
page.setDefaultTimeout(30000);            // 30 seconds for other tasks

Essas configurações ajudarão você a encontrar um equilíbrio entre velocidade, estabilidade e eficiência de recursos.

sbb-itb-23997f1

Operações JavaScript

O Headless Chrome pode executar JavaScript e lidar com interações na web de forma eficaz com o Puppeteer.

Executando scripts simples

O Puppeteer simplifica a automação do navegador:

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

// Navigate to a page and wait for the network to be idle
await page.goto('https://example.com', {
    waitUntil: 'networkidle0',
    timeout: 30000
});

// Get the page title using JavaScript
const pageTitle = await page.evaluate(() => {
    return document.title;
});

// Extract specific data from the page
const results = await page.evaluate(() => {
    const data = [];
    document.querySelectorAll('.product-item').forEach(item => {
        data.push({
            name: item.querySelector('.title').textContent,
            price: item.querySelector('.price').textContent
        });
    });
    return data;
});

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

Você pode simular ações do usuário, como cliques e digitação, para fazer com que as interações pareçam mais naturais:

// Wait for an element to appear and click it
await page.waitForSelector('.login-button');
await page.click('.login-button');

// Type text into an input field with random delays
await page.type('#username', '[email protected]', {
    delay: Math.floor(Math.random() * 100) + 50
});

// Handle form submission and wait for navigation
await Promise.all([
    page.waitForNavigation(),
    page.click('#submit-button')
]);

"Um navegador sem interface é uma ótima ferramenta para testes automatizados e ambientes de servidor onde você não precisa de um shell de interface de usuário visível." - Eric Bidelman

Gerenciando Elementos Dinâmicos

Conteúdo dinâmico requer tratamento específico para garantir interação adequada:

// Wait for dynamic content to load
await page.waitForFunction(
    'document.querySelector(".dynamic-content").childNodes.length > 0',
    { timeout: 5000 }
);

// Handle infinite scrolling
async function scrollToBottom() {
    await page.evaluate(async () => {
        await new Promise((resolve) => {
            let totalHeight = 0;
            const distance = 100;
            const timer = setInterval(() => {
                window.scrollBy(0, distance);
                totalHeight += distance;

                if (totalHeight >= document.body.scrollHeight) {
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

Aqui estão alguns cenários e soluções comuns para trabalhar com elementos dinâmicos:

Cenário	Solução	Caso de uso
Estados de carregamento	Use waitForSelector com verificação de visibilidade	Aplicações de página única
Atualizações AJAX	Use waitForFunction para verificar o conteúdo	Feeds de dados em tempo real
Sombra DOM	Use evaluateHandle com seletores personalizados	Componentes da Web

Dicas de otimização:

• Use esperas explícitas para evitar atrasos desnecessários.
• Implemente o tratamento de erros para gerenciar falhas de script.
• Fique de olho no uso da CPU e da memória durante a execução.
• Desative recursos não essenciais, como imagens ou anúncios, para melhorar o desempenho.

Recursos avançados

Com base em configurações básicas e operações JavaScript, esses recursos avançados levam o Headless Chrome para o próximo nível. Eles permitem uma saída mais refinada e melhor tratamento de erros, tornando suas tarefas de automação ainda mais eficientes.

Criação de captura de tela

Tirar screenshots com o Puppeteer é simples. Veja como você pode capturar uma tela de página inteira:

const browser = await puppeteer.launch();
const page = await browser.newPage();

// Set a consistent viewport size
await page.setViewport({ 
    width: 1920,
    height: 1080,
    deviceScaleFactor: 2
});

// Wait for the page to load and capture a full-page screenshot
await page.goto('https://example.com', {
    waitUntil: 'networkidle0',
    timeout: 30000
});
await page.screenshot({
    path: 'full-page.jpg',
    fullPage: true,
    type: 'jpeg'
});

Precisa capturar um elemento específico? Foque em uma seção específica da página:

// Screenshot of a specific element
const element = await page.$('.hero-section');
await element.screenshot({
    path: 'hero.png',
    omitBackground: true
});

Opção de captura de tela	Melhor caso de uso	Impacto no desempenho
Formato JPEG	Capturas de tela grandes, processamento mais rápido	Qualidade inferior, tamanho de arquivo menor
Formato PNG	Alto nível de detalhes ou transparência necessários	Arquivos maiores, processamento mais lento
Específico do elemento	Componentes de IU, captura seletiva	Uso mínimo de recursos

Criação de PDF

Você também pode gerar PDFs com formatação personalizada:

await page.pdf({
    path: 'document.pdf',
    format: 'A4',
    margin: {
        top: '1in',
        right: '1in',
        bottom: '1in',
        left: '1in'
    },
    printBackground: true,
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size: 10px;">Generated on {{date}}</div>',
    footerTemplate: '<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'
});

"Headless Chrome é uma maneira de executar o navegador Chrome em um ambiente headless. Essencialmente, executar o Chrome sem o Chrome! Ele traz todos os recursos modernos da plataforma web fornecidos pelo Chromium e pelo mecanismo de renderização Blink para a linha de comando." - Eric Bidelman, Chrome para desenvolvedores

Quando suas saídas estiverem prontas, você pode usar ferramentas integradas para depurar e ajustar o desempenho.

Ferramentas de solução de problemas

A depuração de problemas no Headless Chrome é mais fácil com o Chrome DevTools Protocol:

// Enable debugging
const browser = await puppeteer.launch({
    headless: true,
    devtools: true,
    args: ['--remote-debugging-port=9222']
});

// Add error logging
page.on('console', msg => console.log('Browser console:', msg.text()));
page.on('pageerror', err => console.error('Page error:', err));

Para problemas mais complexos, você pode automatizar a captura de erros:

try {
    await page.goto('https://example.com');
} catch (error) {
    await page.screenshot({
        path: `error-${Date.now()}.png`,
        fullPage: true
    });
    console.error('Navigation failed:', error);
}

Por exemplo, o Chrome DevTools foi usado para resolver problemas de identificação de elementos nos serviços IDP do Google.

Método de depuração	Propósito	Quando usar
Ferramentas de desenvolvimento remotas	Inspeção ao vivo	Problemas complexos de renderização
Registro de console	Acompanhar a execução do script	Problemas de fluxo de script
Capturas de tela de erro	Depuração visual	Falhas relacionadas à IU

Usando o Headless Chrome com Nó latente

Esta seção explica como utilizar uma plataforma low-code como Latenode para automação Headless Chrome. Latenode integra Headless Chrome em seu sistema, tornando a automação web direta tanto para desenvolvedores quanto para usuários não técnicos.

Sobre Nó latente

O Latenode inclui a funcionalidade Headless Chrome incorporada por meio do sistema de nós "Headless browser". Isso permite que as equipes automatizem fluxos de trabalho sem precisar gerenciar o Puppeteer diretamente.

Característica	Descrição	Beneficiar
Builder Visual	Criação de fluxo de trabalho com arrastar e soltar	Simplifica tarefas básicas de automação
Copiloto de código de IA	Geração automatizada de código	Acelera configurações de cenários complexos
Armazenamento de dados integrado	Manipulação de dados integrada	Facilita o gerenciamento de dados extraídos
Integração NPM	Acesso a mais de 1 milhão de pacotes	Adiciona funcionalidade extra

Etapas de configuração do Latenode

Aqui está um exemplo de script para começar:

async function run({execution_id, input, data, page}) {
    // Set user agent for better compatibility
    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102');

    // Configure viewport for reliable element detection
    await page.setViewport({
        width: 1920,
        height: 1080,
        deviceScaleFactor: 1
    });

    return {
        status: 'success'
    }
}

Para tarefas web mais avançadas, o nó Headless browser do Latenode fornece acesso a funções de manipulação de página. Ele também gerencia instâncias do navegador automaticamente, para que você não precise configurar o Puppeteer manualmente.

Destaques da plataforma

O Latenode simplifica a automação Headless Chrome ao abordar desafios comuns com codificação tradicional. Os principais recursos incluem:

• Tratamento automatizado de erros e opções de repetição
• Gerenciamento de proxy integrado
• Ferramentas de depuração visual para fluxos de trabalho
• Rastreamento do histórico de execução por até 60 dias (disponível no plano Prime)

O preço é baseado no uso da execução, oferecendo opções de um nível gratuito (300 créditos) a planos de nível empresarial que suportam até 1.5 milhão de execuções de cenário por mês. Isso o torna uma escolha flexível e econômica para dimensionar esforços de automação.

Para equipes que fazem malabarismos com múltiplos fluxos de trabalho, o construtor visual acelera o desenvolvimento enquanto suporta recursos avançados como captura de tela e geração de PDF. Ao simplificar a implantação e o gerenciamento, o Latenode aprimora o que o Headless Chrome já oferece, tornando a automação mais acessível.

Conclusão

Resumo

O Headless Chrome torna a automação da web mais rápida e eficiente, eliminando a necessidade de uma interface de navegador completa. Ele reduz o consumo de recursos e acelera os processos, tornando-o ideal para tarefas como web scraping, testes, análise de SEO e rastreamento de desempenho. Plataformas como o Latenode tornam a implantação do Headless Chrome mais fácil com ferramentas visuais e recursos automatizados, exigindo menos conhecimento técnico.

Começando a jornada

Siga estas etapas para começar a usar o Headless Chrome:

1. Noções básicas de configuração:
   Instale Node.js e Puppeteer. Essas ferramentas fornecem APIs que simplificam tarefas de automação.
2. Definir configurações:
   Comece navegando pelas páginas e tirando capturas de tela. Ajuste o desempenho ajustando estas configurações:

   Configuração	Propósito	Beneficiar
   Desativar imagens	Economize largura de banda	Carregamento de página mais rápido
   Viewport personalizado	Garantir renderização consistente	Melhor detecção de elementos
   Bloqueio de recursos	Evite downloads desnecessários	Execução mais rápida

3. Características avançadas:
   Use waitForSelector para gerenciar conteúdo dinâmico e configurar tratamento de erros para operações mais suaves. Para dimensionamento, a Latenode oferece planos flexíveis, começando com um nível gratuito (300 créditos) e indo até soluções empresariais que suportam até 1.5 milhão de execuções mensais.

Posts Relacionados do Blog

• O que é um navegador sem cabeçalho e por que você precisa dele?
• Melhores navegadores sem cabeça para raspagem da Web: ferramentas e exemplos