Gestión de agentes de usuario en Puppeteer para la emulación de dispositivos

Controlar cómo aparece su navegador en los sitios web es crucial para la automatización y las pruebas web. Titiritero hace esto posible al permitirle modificar el Cadena de agente de usuario - una identificación digital que los sitios web utilizan para detectar su navegador y dispositivo.

Esto es lo que aprenderás:

• ¿Qué es una cadena de agente de usuario? Informa a los sitios web sobre su navegador, sistema operativo y dispositivo.
• ¿Por qué personalizarlo? Para evitar la detección, pruebe los sitios web en diferentes dispositivos o asegúrese de que funcionen en dispositivos móviles.
• Cómo utilizar Puppeteer: Modificar el agente de usuario con page.setUserAgent() y emular dispositivos con perfiles integrados como iPhone o configuraciones personalizadas.

Los consejos clave incluyen:

• Configure siempre el agente de usuario antes cargando una página.
• Haga coincidir el agente de usuario con la configuración específica del dispositivo (por ejemplo, tamaño de la ventana gráfica, compatibilidad táctil).
• Utilice herramientas como la puppeteer-extra-stealth-plugin para evitar la detección de bots.

Ejemplo 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 });

Esto garantiza que su navegador imite un iPhone, lo que le ayudará a probar sitios web o extraer datos sin ser marcado.

Titiritero Tutorial #13 | setUserAgent y setViewPort | Prueba...

Configuración del titiritero

Prepara Puppeteer instalando las dependencias necesarias y escribiendo tu primer script de emulación.

Pasos de la instalación

Asegúrate de usar Node.js v14 o posterior. Luego, elija uno de estos métodos de instalación:

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

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

Si está en Linux, verifique las dependencias faltantes con:

ldd chrome | grep not

Una vez instalado Puppeteer, estará listo para escribir su primer script de emulación de dispositivos. Esta configuración es clave para controlar el agente de usuario y simular dispositivos eficazmente.

Primer script de emulación de dispositivo

Aquí hay un ejemplo de script que emula un iPhone X y carga una 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 cubre los aspectos esenciales para la emulación del dispositivo:

• Inicio del navegador: Inicia Puppeteer en modo sin cabeza para mayor visibilidad.
• Configuración de página:Crea una nueva página en el navegador.
• Configuración del agente de usuario:Imita un navegador de iPhone X.
• Configuración de la ventana gráfica:Coincide con las dimensiones y capacidades de pantalla de un iPhone X.
• Navegación:Carga una página web específica.

Sugerencias de configuración

• Puppeteer almacena el caché de su navegador en ~/.cache/puppeteer.
• Para utilizar un directorio de caché personalizado, configure el PUPPETEER_CACHE_DIR Variable ambiental.
• Si está trabajando en Docker o WSL, asegúrese de que todas las dependencias del sistema necesarias estén instaladas.
• Por seguridad, evite correr Chrome sin sandbox a menos que sea absolutamente necesario.

Configuración de cadenas de agente de usuario

Esta sección explica cómo configurar y ajustar la configuración del agente de usuario de manera efectiva.

Usando setUserAgent()

page.setUserAgent() El método es la opción ideal para personalizar la identificación del navegador. Aquí tienes un ejemplo de cómo usarlo:

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

Asegúrese de configurar el agente de usuario antes Navegar a una página para garantizar la coherencia.

Elección de cadenas de agente de usuario

Elija una cadena de agente de usuario que se alinee con su caso de uso:

Para las pruebas:

// 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 emulación móvil:

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

Consejos para la configuración del agente de usuario

A continuación se ofrecen algunos consejos para garantizar una gestión fluida del agente de usuario:

• Configuración del partido: Vincule su agente de usuario con las propiedades correspondientes del navegador. Por ejemplo, use agentes de usuario móviles con la configuración de la ventana gráfica móvil.
• Evite problemas de detección: El agente de usuario predeterminado de Puppeteer incluye "HeadlessChrome", que puede activar mecanismos de detección 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'
);

• Se consistente: Configure el agente de usuario para cada nueva página o pestaña para evitar inconsistencias.

Para una mayor confiabilidad, también puede configurar configuraciones adicionales junto con su agente de usuario:

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

Una gestión adecuada del agente de usuario es solo una parte de la emulación del dispositivo. Combínala con una configuración precisa de la ventana gráfica, la red y el navegador para crear una experiencia de navegación más realista.

sbb-itb-23997f1

Emulación avanzada de dispositivos

Perfiles de dispositivo integrados

Puppeteer facilita la emulación de dispositivos con sus perfiles preconfigurados. Estos perfiles agrupan las configuraciones esenciales en uno solo, lo que permite emular rápidamente dispositivos específicos.

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.
})();

Estos perfiles configuran automáticamente parámetros importantes, lo que facilita la emulación precisa de dispositivos. Funcionan bien con las configuraciones de agente de usuario y permiten realizar ajustes adicionales en la configuración de pantalla y ventana gráfica.

Configuración de pantalla y ventana gráfica

Para emular dispositivos eficazmente, necesitas configurar la ventana gráfica correctamente. La ventana gráfica predeterminada de Puppeteer (800×600 píxeles) no se ajusta a la mayoría de los dispositivos reales, así que conviene personalizarla:

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

También puedes ajustar la ventana gráfica dinámicamente para capturar capturas de pantalla de página completa con facilidad:

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

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

Simulación de red y táctil

Una vez configurada la ventana gráfica, puedes ir un paso más allá simulando las condiciones de la red y las interacciones táctiles:

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

Solucionar problemas comunes

Soluciones a errores de emulación

Al emular, las cadenas de agente de usuario y las características del navegador que no coinciden pueden activar la detección. Para evitarlo, asegúrese de que el agente de usuario sea coherente en todas las 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 página nueva, asegúrese de que el agente de usuario esté configurado:

const newPage = await browser.newPage();
await newPage.setUserAgent(currentUserAgent);

Además, refine su configuración para manejar técnicas de detección más avanzadas.

Cómo evitar la detección del navegador

Los sitios web suelen utilizar métodos sofisticados para identificar herramientas de automatización. Para contrarrestar esto, utilice... puppeteer-extra-stealth-plugin:

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

Para minimizar aún más la detección, aplique estas tácticas prácticas:

• Administrar tarifas de solicitudes:Introducir retrasos aleatorios para imitar el comportamiento humano.

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

• Garantizar la coherencia del encabezado:Alinear los encabezados HTTP con el agente de usuario.

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

Una vez abordados los riesgos de detección, concéntrese en mejorar el rendimiento y la eficiencia de los recursos.

Velocidad y uso de recursos

Optimice su configuración para mejorar la velocidad y reducir el consumo de recursos. Empiece por optimizar los parámetros de inicio del 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 tareas de captura de pantalla, utilice configuraciones eficientes:

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

Bloquee recursos innecesarios como imágenes y fuentes para ahorrar memoria y ancho de banda:

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

Estos ajustes mejoran el rendimiento manteniendo una emulación confiable.

Conclusión

Revisión de consejos clave

Ajustar las cadenas de agente de usuario y gestionar los encabezados eficazmente puede marcar una gran diferencia a la hora de evitar la detección. A continuación, se presenta un breve resumen de las estrategias para una mejor emulación de dispositivos:

Por ejemplo, Farfetch Implementamos estos métodos en febrero de 2023 y vimos una caída del 40% en el tráfico de bots junto con una mejora del 15% en los tiempos de carga. ^{[ 1 ]}Estos resultados muestran cómo pequeños ajustes pueden conducir a grandes mejoras en el rendimiento.

Próximos pasos con Puppeteer

Una vez que domines los conceptos básicos, mejora tus scripts de Puppeteer ajustando la configuración de inicio para un comportamiento más realista. Aquí tienes un ejemplo de configuración para empezar:

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

Esta configuración habilita funciones como WebGL al mismo tiempo que deshabilita las marcas de automatización, lo que ayuda a que sus scripts se integren de forma más natural.

Artículos relacionados con

• ¿Qué es un navegador sin cabeza y por qué lo necesitas?
• Instalación y configuración de Puppeteer: Solución de problemas comunes de dependencias y Chromium
• Automatización de formularios con Puppeteer: entrada de texto, llenado de formularios y simulación de usuario
• Automatización del navegador con Puppeteer y JavaScript: Implementación práctica en Node.js