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

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:

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 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:

# 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 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:

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 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()

A page.setUserAgent() método é seu recurso para personalizar como o navegador se identifica. Aqui está 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 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:

// 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 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.

// 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'
);

• 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:

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 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.

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, 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:

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

Você também pode ajustar a janela de visualização dinamicamente para capturar imagens de tela 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 janela de visualização estiver configurada, você pode dar um passo adiante simulando condições de rede e interações de 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');

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:

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, certifique-se de que o agente do usuário 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 combater 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:

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

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

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

await page.setExtraHTTPHeaders({
  'Accept-Language': 'en-US,en;q=0.9',
  'Accept': 'text/html,application/xhtml+xml',
  'User-Agent': 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:

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, 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:

Por exemplo, nos Farfetch implementou esses métodos em fevereiro de 2023 e viu uma queda de 40% no tráfego de bots junto 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:

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

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.

Artigos Relacionados

• O que é um navegador sem cabeçalho e por que você precisa dele?
• Instalando e configurando o Puppeteer: resolvendo problemas comuns de dependência e Chromium
• Automação de formulários com Puppeteer: entrada de texto, preenchimento de formulários e simulação de usuário
• Automação de navegador com Puppeteer e JavaScript: implementação prática em Node.js