Headless Chrome: como usar e configurar
Aprenda como configurar e usar o Chrome sem interface gráfica (Headless Chrome) para automação, extração de dados e testes na web, otimizando seus fluxos de trabalho sem a necessidade de uma interface gráfica.
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:
- Instale Node.js e Marionetista.
- Defina configurações básicas como tamanho da janela de visualização e bloqueio de recursos.
- 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 ou superior • Intel Pentium 4 (compatível com SSE3) ou mais recente |
| MacOS | • macOS Big Sur 11 ou mais recente |
| Linux | • Ubuntu 18.04+ de 64 bits, 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 puppeteerMacOS Uso Homebrew para instalar o Chrome e o Puppeteer:
brew install --cask google-chrome npm install puppeteerLinux 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:
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://www.google.com'</span>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();
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.
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">defaultViewport</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span> },
<span class="hljs-attr">args</span>: [
<span class="hljs-string">'--no-sandbox'</span>,
<span class="hljs-string">'--disable-setuid-sandbox'</span>,
<span class="hljs-string">'--disable-dev-shm-usage'</span>,
<span class="hljs-string">'--disable-accelerated-2d-canvas'</span>,
<span class="hljs-string">'--disable-gpu'</span>
]
});
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:
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Block unnecessary resources</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function">(<span class="hljs-params">request</span>) =></span> {
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">includes</span>(request.<span class="hljs-title function_">resourceType</span>())) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
<span class="hljs-comment">// Set custom headers</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
<span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
<span class="hljs-string">'User-Agent'</span>: <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'</span>
});
<span class="hljs-comment">// Enable JavaScript if required</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setJavaScriptEnabled</span>(<span class="hljs-literal">true</span>);
Para testes automatizados, priorize estabilidade e consistência:
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">false</span>);
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 | - processo único | Executa o Chrome como um único processo |
| Rendering | --desativar-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:
<span class="hljs-keyword">const</span> cluster = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Cluster</span>.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">concurrency</span>: <span class="hljs-title class_">Cluster</span>.<span class="hljs-property">CONCURRENCY_CONTEXT</span>,
<span class="hljs-attr">maxConcurrency</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">monitor</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">puppeteerOptions</span>: {
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>]
}
});
Além disso, ajuste as configurações de tempo limite para corresponder às condições da sua rede:
page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">60000</span>); <span class="hljs-comment">// 60 seconds for navigation</span>
page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>); <span class="hljs-comment">// 30 seconds for other tasks</span>
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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({ <span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span> });
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Navigate to a page and wait for the network to be idle</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Get the page title using JavaScript</span>
<span class="hljs-keyword">const</span> pageTitle = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span>;
});
<span class="hljs-comment">// Extract specific data from the page</span>
<span class="hljs-keyword">const</span> results = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> data = [];
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-item'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
data.<span class="hljs-title function_">push</span>({
<span class="hljs-attr">name</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.title'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">price</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>
});
});
<span class="hljs-keyword">return</span> 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:
<span class="hljs-comment">// Wait for an element to appear and click it</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'.login-button'</span>);
<span class="hljs-comment">// Type text into an input field with random delays</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, <span class="hljs-string">'[email protected]'</span>, {
<span class="hljs-attr">delay</span>: <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">100</span>) + <span class="hljs-number">50</span>
});
<span class="hljs-comment">// Handle form submission and wait for navigation</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#submit-button'</span>)
]);
"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:
<span class="hljs-comment">// Wait for dynamic content to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
<span class="hljs-string">'document.querySelector(".dynamic-content").childNodes.length > 0'</span>,
{ <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> }
);
<span class="hljs-comment">// Handle infinite scrolling</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrollToBottom</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
<span class="hljs-keyword">let</span> totalHeight = <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> distance = <span class="hljs-number">100</span>;
<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollBy</span>(<span class="hljs-number">0</span>, distance);
totalHeight += distance;
<span class="hljs-keyword">if</span> (totalHeight >= <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollHeight</span>) {
<span class="hljs-built_in">clearInterval</span>(timer);
<span class="hljs-title function_">resolve</span>();
}
}, <span class="hljs-number">100</span>);
});
});
}
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.
Funcionalidades Avançadas
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:
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-comment">// Set a consistent viewport size</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});
<span class="hljs-comment">// Wait for the page to load and capture a full-page screenshot</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'full-page.jpg'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});
Precisa capturar um elemento específico? Foque em uma seção específica da página:
<span class="hljs-comment">// Screenshot of a specific element</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.hero-section'</span>);
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'hero.png'</span>,
<span class="hljs-attr">omitBackground</span>: <span class="hljs-literal">true</span>
});
| 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:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'document.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">margin</span>: {
<span class="hljs-attr">top</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">right</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">bottom</span>: <span class="hljs-string">'1in'</span>,
<span class="hljs-attr">left</span>: <span class="hljs-string">'1in'</span>
},
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">displayHeaderFooter</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">headerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Generated on {{date}}</div>'</span>,
<span class="hljs-attr">footerTemplate</span>: <span class="hljs-string">'<div style="font-size: 10px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'</span>
});
"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:
<span class="hljs-comment">// Enable debugging</span>
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">devtools</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--remote-debugging-port=9222'</span>]
});
<span class="hljs-comment">// Add error logging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">msg</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Browser console:'</span>, msg.<span class="hljs-title function_">text</span>()));
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'pageerror'</span>, <span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page error:'</span>, err));
Para problemas mais complexos, você pode automatizar a captura de erros:
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">`error-<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>.png`</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
}
Por exemplo, o Chrome DevTools foi usado para resolver problemas de identificação de elementos em serviços Google IDP .
| 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 a 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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">run</span>(<span class="hljs-params">{execution_id, input, data, page}</span>) {
<span class="hljs-comment">// Set user agent for better compatibility</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/98.0.4758.102'</span>);
<span class="hljs-comment">// Configure viewport for reliable element detection</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});
<span class="hljs-keyword">return</span> {
<span class="hljs-attr">status</span>: <span class="hljs-string">'success'</span>
}
}
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 facilitam a implantação do Headless Chrome 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:
Noções básicas de configuração:
Instale Node.js e Puppeteer. Essas ferramentas fornecem APIs que simplificam tarefas de automação.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 Características avançadas:
UsowaitForSelectorpara 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.
Artigos Relacionados
