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:
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:
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:
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:
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:
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:
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.
Crie fluxos de trabalho de IA poderosos e automatize a rotina
Unifique as principais ferramentas de IA sem codificar ou gerenciar chaves de API, implante agentes de IA inteligentes e chatbots, automatize fluxos de trabalho e reduza os custos de desenvolvimento.