Uma plataforma de baixo código que combina a simplicidade sem código com o poder do código completo 🚀
Comece gratuitamente

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

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

Marionetista

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:

Aspecto Melhores Práticas Impacto
Configuração do agente do usuário Atribuir um User-Agent para cada nova aba ou página 40% de redução no tráfego de bots
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:

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

Trocar aplicativos

Aplicativo 1

Aplicativo 2

- Escolha um gatilho

- Escolha uma ação

Quando isso acontece...

Nome do nó

ação, por exemplo, excluir

Nome do nó

ação, por exemplo, excluir

Nome do nó

ação, por exemplo, excluir

Nome do nó

descrição do gatilho

Nome do nó

ação, por exemplo, excluir

Obrigado! Sua submissão foi recebida!
Opa! Ocorreu um erro ao enviar o formulário.

Faça isso.

Nome do nó

ação, por exemplo, excluir

Nome do nó

ação, por exemplo, excluir

Nome do nó

ação, por exemplo, excluir

Nome do nó

descrição do gatilho

Nome do nó

ação, por exemplo, excluir

Obrigado! Sua submissão foi recebida!
Opa! Ocorreu um erro ao enviar o formulário.
Experimente agora

Sem necessidade de cartão de crédito

Sem restrição

Jorge Miloradovitch
Pesquisador, redator e entrevistador de casos de uso
23 de março de 2025
.
7
min ler

Blogs relacionados

Caso de uso

Apoiado por