Gerenciamento de User-Agent no Puppeteer para emulação de dispositivos

Controlar como seu navegador aparece para os sites é crucial para automação e testes web. Puppeteer torna isso possível ao permitir que você modifique a string User-Agent — uma identificação digital que os sites usam para detectar seu navegador e dispositivo.

Veja o que você vai aprender:

• O que é uma string User-Agent? Ela informa aos sites sobre seu navegador, sistema operacional e dispositivo.
• Por que personalizá-la? Para evitar detecção, testar sites em diferentes dispositivos ou garantir a responsividade em dispositivos móveis.
• Como usar o Puppeteer: Modifique o User-Agent com page.setUserAgent() e emule dispositivos com perfis integrados, como iPhone, ou configurações personalizadas.

Dicas principais:

• Sempre defina o User-Agent antes de carregar uma página.
• Combine o User-Agent com configurações específicas do dispositivo, como tamanho da viewport e suporte a toque.
• Use ferramentas como puppeteer-extra-stealth-plugin para evitar a detecção de bots.

Exemplo rápido:

await page.setUserAgent(
  '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'
);
await page.setViewport({ width: 375, height: 812, isMobile: true, hasTouch: true });

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

Tutorial de Puppeteer nº 13 | setUserAgent e setViewPort | Teste ...

Configurando o Puppeteer

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

Etapas de instalação

Verifique se você está usando o Node.js v14 ou mais recente. Em seguida, escolha um destes métodos de instalação:

# Option 1: Install Puppeteer with Chrome included
npm i puppeteer

# Option 2: Install Puppeteer without Chrome
npm i puppeteer-core

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

ldd chrome | grep not

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

Primeiro script de emulação de dispositivo

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

const puppeteer = require('puppeteer');

(async () => {
  // Launch browser in non-headless mode
  const browser = await puppeteer.launch({ 
    headless: false 
  });

  // Create a new page
  const page = await browser.newPage();

  // Set iPhone X User-Agent
  await page.setUserAgent(
    'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) ' +
    'AppleWebKit/604.1.38 (KHTML, like Gecko) ' +
    'Version/11.0 Mobile/15A372 Safari/604.1'
  );

  // Configure viewport for iPhone X
  await page.setViewport({
    width: 375,
    height: 812,
    deviceScaleFactor: 3,
    isMobile: true,
    hasTouch: true
  });

  // Navigate to a webpage
  await page.goto('https://pptr.dev');

  // Pause to view the result
  await page.waitForTimeout(3000);

  // Close the browser
  await browser.close();
})();

Este script cobre o essencial para a emulação de dispositivos:

• Inicialização do navegador: Inicia o Puppeteer no modo não headless para que fique visível.
• Configuração da página: Cria uma nova página no navegador.
• Configurações de User-Agent: Imita um navegador de iPhone X.
• Configuração da viewport: Corresponde às dimensões e recursos da tela de um iPhone X.
• Navegação: Carrega uma página 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 a variável de ambiente PUPPETEER_CACHE_DIR.
• Se você estiver trabalhando no Docker ou WSL, verifique se todas as dependências de sistema necessárias estão instaladas.
• Por segurança, evite executar o Chrome sem sandbox, a menos que seja absolutamente necessário.

Definindo strings User-Agent

Esta seção explica como configurar e ajustar as definições de User-Agent com eficácia.

Usando setUserAgent()

O método page.setUserAgent() é a principal opção para personalizar a forma como o navegador se identifica. Veja um exemplo de como usá-lo:

const page = await browser.newPage();
await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
  '(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'
);

Certifique-se de definir o User-Agent antes de navegar para uma página, garantindo consistência.

Escolhendo strings User-Agent

Escolha uma string User-Agent alinhada ao seu caso de uso:

Para testes:

// Desktop Chrome on Windows 10
await page.setUserAgent(
  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) ' +
  'AppleWebKit/537.36 (KHTML, like Gecko) ' +
  'Chrome/120.0.0.0 Safari/537.36'
);

Para emulação móvel:

// iPhone 14 Safari
await page.setUserAgent(
  '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'
);

Dicas de configuração do User-Agent

Confira algumas dicas para garantir um gerenciamento fluido do User-Agent:

• Combine as configurações: Associe seu User-Agent às propriedades correspondentes do navegador. Por exemplo, use User-Agents de dispositivos móveis com configurações de viewport móvel.
• Evite problemas de detecção: O User-Agent padrão do Puppeteer inclui "HeadlessChrome", o que pode acionar mecanismos de detecção de bots.

// Default User-Agent (not recommended)

// Custom User-Agent (recommended)
await page.setUserAgent(
  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ' +
  'AppleWebKit/537.36 (KHTML, like Gecko) ' +
  'Chrome/120.0.0.0 Safari/537.36'
);

• Mantenha a consistência: Defina o User-Agent para cada nova página ou aba, evitando inconsistências.

Para obter mais confiabilidade, você também pode configurar definições adicionais junto ao User-Agent:

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'
});

O gerenciamento adequado do User-Agent é apenas uma parte da emulação de dispositivos. 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 facilita a emulação de dispositivos com seus perfis pré-configurados. Esses perfis reúnem configurações essenciais em um só lugar, permitindo emular dispositivos específicos rapidamente.

const puppeteer = require('puppeteer');
const iPhone15Pro = puppeteer.KnownDevices['iPhone 15 Pro'];

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulate(iPhone15Pro);
  // The page now behaves like an iPhone 15 Pro.
})();

Esses perfis configuram automaticamente parâmetros importantes, simplificando a emulação precisa de dispositivos. Eles funcionam bem com configurações de User-Agent e permitem ajustes adicionais nas definições de tela e viewport.

Configurações de tela e viewport

Para emular dispositivos com eficiência, você precisa configurar a viewport corretamente. A viewport padrão do Puppeteer (800×600 pixels) não corresponde à maioria dos dispositivos reais, portanto, você deve personalizá-la:

await page.setViewport({
  width: 1920,
  height: 1080,
  deviceScaleFactor: 2,
  isMobile: false,
  hasTouch: false,
  isLandscape: true
});

Você também pode ajustar a viewport dinamicamente para capturar capturas de tela de páginas inteiras com facilidade:

await page.setViewport({
  width: 1440,
  height: 900,
  deviceScaleFactor: 1
});

const options = {
  fullPage: true,
  captureBeyondViewport: true
};
await page.screenshot(options);

Simulação de rede e toque

Depois que a viewport estiver configurada, você pode ir além simulando condições de rede e interações por toque:

// Simulate 3G network conditions
await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: (750 * 1024) / 8, // 750 kb/s
  uploadThroughput: (250 * 1024) / 8, // 250 kb/s
  latency: 100 // 100 ms
});

await page.setViewport({
  width: 375,
  height: 812,
  isMobile: true,
  hasTouch: true
});

await page.tap('#button-element');

Corrigindo problemas comuns

Soluções para erros de emulação

Durante a emulação, strings de user-agent e recursos do navegador incompatíveis podem acionar a detecção. Para evitar isso, verifique se o user-agent é consistente em todas as páginas:

const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)');

Para cada nova página, garanta que o user-agent esteja definido:

const newPage = await browser.newPage();
await newPage.setUserAgent(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 contornar isso, use o puppeteer-extra-stealth-plugin:

const stealthPlugin = StealthPlugin();
stealthPlugin.enabledEvasions.add('user-agent-override');
puppeteer.use(stealthPlugin);

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

• Gerencie as taxas de requisição: Introduza atrasos aleatórios para imitar o comportamento humano.

async function naturalDelay() {
  const delay = Math.floor(Math.random() * (3000 - 1000) + 1000);
  await page.waitForTimeout(delay);
}

• Garanta a consistência dos cabeçalhos: Alinhe os cabeçalhos HTTP ao user-agent.

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml',
  'User-Agent': currentUserAgent
});

Depois de lidar com os riscos de detecção, concentre-se em melhorar o desempenho e a eficiência de 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:

const browser = await puppeteer.launch({
  args: [
    '--disable-gpu',
    '--disable-dev-shm-usage',
    '--disable-setuid-sandbox',
    '--no-first-run',
    '--no-sandbox',
    '--no-zygote'
  ],
  userDataDir: './cache'
});

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

const screenshot = await page.screenshot({
  type: 'jpeg',
  quality: 80,
  fullPage: true,
  encoding: 'binary'
});

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

await page.setRequestInterception(true);
page.on('request', (request) => {
  if (request.resourceType() === 'image' || request.resourceType() === 'font') {
    request.abort();
  } else {
    request.continue();
  }
});

Esses ajustes melhoram o desempenho enquanto mantêm uma emulação confiável.

Conclusão

Revisão das principais dicas

Ajustar strings User-Agent e gerenciar cabeçalhos de maneira eficiente pode fazer uma grande diferença para evitar a detecção. Veja uma visão geral rápida das estratégias para uma melhor emulação de dispositivos:

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

Próximas etapas com o Puppeteer

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

// Advanced browser launch setup
const browser = await puppeteer.launch({
  args: [
    '--enable-webgl',
    '--use-gl=desktop',
    '--disable-automation'
  ],
  ignoreDefaultArgs: ['--enable-automation']
});

Essa configuração habilita recursos como WebGL enquanto desativa flags de automação, ajudando seus scripts a se integrarem de forma mais natural.