Gerenciamento de User-Agent no Puppeteer para Emulação de Dispositivos

Controlar como seu navegador aparece nos sites é crucial para automação e testes na web. Marionetista torna isso possível permitindo que você modifique o Cadeia de agente do usuário - uma ID digital que os sites usam para detectar seu navegador e dispositivo.

Aqui está o que você aprenderá:

O que é uma string User-Agent? Ele informa aos sites sobre seu navegador, sistema operacional e dispositivo.
Por que personalizá-lo? Para evitar a detecção, teste sites em diferentes dispositivos ou garanta a capacidade de resposta em dispositivos móveis.
Como usar o Puppeteer: Modifique o User-Agent com page.setUserAgent() e emular dispositivos com perfis integrados, como iPhone ou configurações personalizadas.

As principais dicas incluem:

Sempre defina o User-Agent antes carregando uma página.
Associe o User-Agent às configurações específicas do dispositivo (por exemplo, tamanho da janela de visualização, suporte ao toque).
Use ferramentas como o puppeteer-extra-stealth-plugin para evitar a detecção de bots.

Exemplo rápido:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1'</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">375</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>, <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span> });

Isso garante que seu navegador imite um iPhone, ajudando você a testar sites ou coletar dados sem ser sinalizado.

Marionetista Tutorial #13 | setUserAgent e setViewPort | Teste ...

Configurando o Marionetista

Prepare o Puppeteer instalando as dependências necessárias e escrevendo seu primeiro script de emulação.

Passos da instalação

Certifique-se de que você está usando Node.js v14 ou mais recente. Então, escolha um destes métodos de instalação:

<span class="hljs-comment"># Option 1: Install Puppeteer with Chrome included</span>
npm i puppeteer

<span class="hljs-comment"># Option 2: Install Puppeteer without Chrome</span>
npm i puppeteer-core

Se você estiver no Linux, verifique se há dependências ausentes com:

ldd chrome | grep not

Depois que o Puppeteer estiver instalado, você estará pronto para escrever seu primeiro script de emulação de dispositivo. Esta configuração é essencial para controlar o User-Agent e simular dispositivos de forma eficaz.

Primeiro script de emulação de dispositivo

Aqui está um exemplo de script que emula um iPhone X e carrega uma página da web:

<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-comment">// Launch browser in non-headless mode</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">false</span> 
  });

  <span class="hljs-comment">// Create a new page</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 iPhone X User-Agent</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
    <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) '</span> +
    <span class="hljs-string">'AppleWebKit/604.1.38 (KHTML, like Gecko) '</span> +
    <span class="hljs-string">'Version/11.0 Mobile/15A372 Safari/604.1'</span>
  );

  <span class="hljs-comment">// Configure viewport for iPhone X</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">375</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
    <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">3</span>,
    <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
  });

  <span class="hljs-comment">// Navigate to a webpage</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://pptr.dev'</span>);

  <span class="hljs-comment">// Pause to view the result</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">3000</span>);

  <span class="hljs-comment">// Close the browser</span>
  <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();

Este script abrange os fundamentos da emulação de dispositivos:

Lançamento do navegador: Inicia o Puppeteer no modo sem cabeça para visibilidade.
Configurações da página: Cria uma nova página no navegador.
Configurações do agente do usuário: Imita um navegador do iPhone X.
Configuração da janela de visualização: Corresponde às dimensões e capacidades da tela de um iPhone X.
Navegação: Carrega uma página da web especificada.

Dicas de configuração

O Puppeteer armazena o cache do navegador em ~/.cache/puppeteer.
Para usar um diretório de cache personalizado, defina o PUPPETEER_CACHE_DIR variável de ambiente.
Se você estiver trabalhando no Docker ou WSL, certifique-se de que todas as dependências de sistema necessárias estejam instaladas.
Por segurança, evite correr Chrome sem sandbox, a menos que seja absolutamente necessário.

Configurando sequências de agente do usuário

Esta seção explica como configurar e ajustar as configurações do User-Agent de forma eficaz.

Usando setUserAgent()

O page.setUserAgent() método é seu recurso para personalizar como o navegador se identifica. Aqui está um exemplo de como usá-lo:

<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_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 '</span> +
  <span class="hljs-string">'(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'</span>
);

Certifique-se de definir o User-Agent antes navegando até uma página para garantir consistência.

Escolhendo sequências de agente do usuário

Escolha uma sequência de caracteres User-Agent que se alinhe ao seu caso de uso:

Para teste:

<span class="hljs-comment">// Desktop Chrome on Windows 10</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) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

Para emulação móvel:

<span class="hljs-comment">// iPhone 14 Safari</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) '</span> +
  <span class="hljs-string">'AppleWebKit/605.1.15 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Version/16.0 Mobile/15E148 Safari/604.1'</span>
);

Dicas de configuração do agente do usuário

Aqui estão algumas dicas para garantir um gerenciamento tranquilo do User-Agent:

Configurações da partida: Emparelhe seu User-Agent com propriedades de navegador correspondentes. Por exemplo, use User-Agents móveis com configurações de viewport móvel.
Evite problemas de detecção: O User-Agent padrão do Puppeteer inclui "HeadlessChrome", que pode acionar mecanismos de detecção de bots.

<span class="hljs-comment">// Default User-Agent (not recommended)</span>

<span class="hljs-comment">// Custom User-Agent (recommended)</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

Ser consistente: Defina o User-Agent para cada nova página ou guia para evitar inconsistências.

Para maior confiabilidade, você também pode configurar configurações adicionais junto com seu User-Agent:

<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">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'</span>
});

O gerenciamento adequado do User-Agent é apenas uma parte da emulação do dispositivo. Combine-o com configurações precisas de viewport, rede e navegador para criar uma experiência de navegação mais realista.

sbb-itb-23997f1

Emulação avançada de dispositivos

Perfis de dispositivos integrados

O Puppeteer torna a emulação de dispositivos mais fácil com seus perfis de dispositivos pré-configurados. Esses perfis agrupam configurações essenciais em um, para que você possa emular dispositivos específicos rapidamente.

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">const</span> iPhone15Pro = puppeteer.<span class="hljs-property">KnownDevices</span>[<span class="hljs-string">'iPhone 15 Pro'</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_">emulate</span>(iPhone15Pro);
  <span class="hljs-comment">// The page now behaves like an iPhone 15 Pro.</span>
})();

Esses perfis configuram automaticamente parâmetros importantes, tornando simples emular dispositivos com precisão. Eles funcionam bem junto com configurações de User-Agent e permitem ajustes adicionais nas configurações de tela e viewport.

Configurações de tela e viewport

Para emular dispositivos efetivamente, você precisa configurar a viewport corretamente. A viewport padrão do Puppeteer (800×600 pixels) não corresponde à maioria dos dispositivos reais, então você vai querer personalizá-la:

<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-attr">isMobile</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">isLandscape</span>: <span class="hljs-literal">true</span>
});

Você também pode ajustar a janela de visualização dinamicamente para capturar imagens de tela inteiras com facilidade:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1440</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">900</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});

<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">captureBeyondViewport</span>: <span class="hljs-literal">true</span>
};
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>(options);

Simulação de rede e toque

Depois que a janela de visualização estiver configurada, você pode dar um passo adiante simulando condições de rede e interações de toque:

<span class="hljs-comment">// Simulate 3G network conditions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateNetworkConditions</span>({
  <span class="hljs-attr">offline</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">downloadThroughput</span>: (<span class="hljs-number">750</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 750 kb/s</span>
  <span class="hljs-attr">uploadThroughput</span>: (<span class="hljs-number">250</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 250 kb/s</span>
  <span class="hljs-attr">latency</span>: <span class="hljs-number">100</span> <span class="hljs-comment">// 100 ms</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">375</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">tap</span>(<span class="hljs-string">'#button-element'</span>);

Resolvendo problemas comuns

Soluções de erro de emulação

Ao emular, strings de user-agent e recursos do navegador incompatíveis podem disparar a detecção. Para evitar isso, certifique-se de que o user-agent seja consistente em todas as páginas:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
puppeteer.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</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_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)'</span>);

Para cada nova página, certifique-se de que o agente do usuário esteja definido:

<span class="hljs-keyword">const</span> newPage = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> newPage.<span class="hljs-title function_">setUserAgent</span>(currentUserAgent);

Além disso, refine sua configuração para lidar com técnicas de detecção mais avançadas.

Evitando a detecção do navegador

Os sites geralmente usam métodos sofisticados para identificar ferramentas de automação. Para combater isso, use o puppeteer-extra-stealth-plugin:

<span class="hljs-keyword">const</span> stealthPlugin = <span class="hljs-title class_">StealthPlugin</span>();
stealthPlugin.<span class="hljs-property">enabledEvasions</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">'user-agent-override'</span>);
puppeteer.<span class="hljs-title function_">use</span>(stealthPlugin);

Para minimizar ainda mais a detecção, aplique estas táticas práticas:

Gerenciar taxas de solicitação: Introduzir atrasos aleatórios para imitar o comportamento humano.

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">naturalDelay</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> delay = <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">3000</span> - <span class="hljs-number">1000</span>) + <span class="hljs-number">1000</span>);
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(delay);
}

Garantir a consistência do cabeçalho: Alinhe os cabeçalhos HTTP com o agente do usuário.

<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">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml'</span>,
  <span class="hljs-string">'User-Agent'</span>: currentUserAgent
});

Depois que os riscos de detecção forem resolvidos, concentre-se em melhorar o desempenho e a eficiência dos recursos.

Velocidade e uso de recursos

Simplifique sua configuração para aumentar a velocidade e reduzir o consumo de recursos. Comece otimizando os parâmetros de inicializaçã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">args</span>: [
    <span class="hljs-string">'--disable-gpu'</span>,
    <span class="hljs-string">'--disable-dev-shm-usage'</span>,
    <span class="hljs-string">'--disable-setuid-sandbox'</span>,
    <span class="hljs-string">'--no-first-run'</span>,
    <span class="hljs-string">'--no-sandbox'</span>,
    <span class="hljs-string">'--no-zygote'</span>
  ],
  <span class="hljs-attr">userDataDir</span>: <span class="hljs-string">'./cache'</span>
});

Para tarefas de captura de tela, use configurações eficientes:

<span class="hljs-keyword">const</span> screenshot = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
  <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>,
  <span class="hljs-attr">quality</span>: <span class="hljs-number">80</span>,
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">encoding</span>: <span class="hljs-string">'binary'</span>
});

Bloqueie recursos desnecessários, como imagens e fontes, para economizar memória e largura de banda:

<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> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'font'</span>) {
    request.<span class="hljs-title function_">abort</span>();
  } <span class="hljs-keyword">else</span> {
    request.<span class="hljs-title function_">continue</span>();
  }
});

Esses ajustes melhoram o desempenho, mantendo a emulação confiável.

Conclusão

Revisão de dicas importantes

Ajustar strings de User-Agent e gerenciar cabeçalhos de forma eficaz pode fazer uma grande diferença quando se trata de evitar detecção. Aqui está uma rápida visão geral de estratégias para melhor emulação de dispositivo:

Aspecto	Melhores Práticas	Impacto
Configuração do agente do usuário	Atribuir um User-Agent para cada nova aba ou página	Diminuição de 40% no tráfego de bots [1]
Padrões de solicitação	Imitar padrões de impressão digital do navegador	Reduz as chances de detecção
Alinhamento do Cabeçalho	Corresponder cabeçalhos HTTP ao User-Agent atribuído	Garante emulação consistente

Por exemplo, nos Farfetch implementou esses métodos em fevereiro de 2023 e viu uma queda de 40% no tráfego de bots, juntamente com uma melhoria de 15% nos tempos de carregamento . Esses resultados mostram como pequenos ajustes podem levar a grandes ganhos de desempenho.

Próximos passos com o Puppeteer

Depois de dominar o básico, leve seus scripts do Puppeteer para o próximo nível ajustando as configurações de inicialização para um comportamento mais realista. Aqui está uma configuração de exemplo para começar:

<span class="hljs-comment">// Advanced browser launch setup</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">args</span>: [
    <span class="hljs-string">'--enable-webgl'</span>,
    <span class="hljs-string">'--use-gl=desktop'</span>,
    <span class="hljs-string">'--disable-automation'</span>
  ],
  <span class="hljs-attr">ignoreDefaultArgs</span>: [<span class="hljs-string">'--enable-automation'</span>]
});

Esta configuração permite recursos como WebGL ao mesmo tempo em que desabilita os sinalizadores de automação, ajudando seus scripts a se misturarem mais naturalmente.

Gerenciamento de agente de usuário no Puppeteer para emulação de dispositivo