Gestión de User-Agent en Puppeteer para la emulación de dispositivos

Controlar cómo aparece su navegador ante los sitios web es fundamental para la automatización y las pruebas web. Puppeteer lo hace posible al permitirle modificar la cadena User-Agent, una identificación digital que los sitios web utilizan para detectar su navegador y dispositivo.

Esto es lo que aprenderá:

• ¿Qué es una cadena User-Agent? Informa a los sitios web sobre su navegador, sistema operativo y dispositivo.
• ¿Por qué personalizarla? Para evitar la detección, probar sitios web en distintos dispositivos o garantizar la capacidad de respuesta en móviles.
• Cómo usar Puppeteer: Modifique el User-Agent con page.setUserAgent() y emule dispositivos con perfiles integrados como iPhone o configuraciones personalizadas.

Los consejos principales incluyen:

• Configure siempre el User-Agent antes de cargar una página.
• Haga coincidir el User-Agent con ajustes específicos del dispositivo, como el tamaño del viewport y la compatibilidad táctil.
• Use herramientas como 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 ayuda a probar sitios web o extraer datos sin ser marcado.

Tutorial de Puppeteer #13 | setUserAgent y setViewPort | Prueba ...

Configuración de Puppeteer

Prepare Puppeteer instalando las dependencias necesarias y escribiendo su primer script de emulación.

Pasos de instalación

Asegúrese de utilizar Node.js v14 o una versión más reciente. Después, 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 utiliza Linux, compruebe si faltan dependencias 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 User-Agent y simular dispositivos de forma eficaz.

Primer script de emulación de dispositivos

Este es un script de ejemplo 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 de la emulación de dispositivos:

• Inicio del navegador: Inicia Puppeteer en modo no headless para que sea visible.
• Configuración de la página: Crea una nueva página en el navegador.
• Configuración del User-Agent: Imita un navegador de iPhone X.
• Configuración del viewport: Coincide con las dimensiones y capacidades de pantalla de un iPhone X.
• Navegación: Carga una página web especificada.

Consejos de configuración

• Puppeteer guarda la caché de su navegador en ~/.cache/puppeteer.
• Para utilizar un directorio de caché personalizado, configure la variable de entorno PUPPETEER_CACHE_DIR.
• Si trabaja en Docker o WSL, asegúrese de que todas las dependencias necesarias del sistema estén instaladas.
• Por seguridad, evite ejecutar Chrome sin aislamiento, a menos que sea absolutamente necesario.

Configuración de cadenas User-Agent

Esta sección explica cómo configurar y ajustar con precisión las opciones de User-Agent de forma eficaz.

Uso de setUserAgent()

El método page.setUserAgent() es la opción principal para personalizar cómo se identifica el navegador. Este es un ejemplo de cómo utilizarlo:

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 User-Agent antes de navegar a una página para garantizar la coherencia.

Elección de cadenas User-Agent

Elija una cadena User-Agent que se ajuste a su caso de uso:

Para 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 de configuración de User-Agent

Estos son algunos consejos para garantizar una gestión fluida del User-Agent:

• Haga coincidir los ajustes: Asocie su User-Agent con las propiedades correspondientes del navegador. Por ejemplo, use User-Agents móviles con configuraciones de viewport móvil.
• Evite problemas de detección: El User-Agent predeterminado de Puppeteer incluye "HeadlessChrome", lo 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'
);

• Mantenga la coherencia: Configure el User-Agent para cada página o pestaña nueva con el fin de evitar inconsistencias.

Para una mayor fiabilidad, también puede configurar ajustes adicionales junto con su 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'
});

Una gestión adecuada del User-Agent es solo una parte de la emulación de dispositivos. Combínela con una configuración precisa del viewport, 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 dispositivos integrados

Puppeteer facilita la emulación de dispositivos con sus perfiles de dispositivos preconfigurados. Estos perfiles agrupan los ajustes esenciales en uno solo, para que pueda 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 simplifica la emulación precisa de dispositivos. Funcionan bien junto con las configuraciones de User-Agent y permiten ajustes adicionales de la pantalla y el viewport.

Ajustes de pantalla y viewport

Para emular dispositivos de forma eficaz, debe configurar correctamente el viewport. El viewport predeterminado de Puppeteer (800×600 píxeles) no coincide con la mayoría de los dispositivos reales, por lo que querrá personalizarlo:

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

También puede ajustar el viewport dinámicamente para capturar fácilmente capturas de pantalla de página completa:

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

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

Simulación de red e interacciones táctiles

Una vez configurado el viewport, puede ir un paso más allá simulando condiciones de red e 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');

Resolución de problemas habituales

Soluciones para errores de emulación

Durante la emulación, las discrepancias entre las cadenas user-agent y las funciones del navegador pueden activar la detección. Para evitarlo, asegúrese de que el user-agent 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 configurar el user-agent:

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

Además, ajuste su configuración para abordar 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 contrarrestarlo, use 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:

• Gestione las tasas de solicitudes: Introduzca retrasos aleatorios para imitar el comportamiento humano.

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

• Garantice la coherencia de los encabezados: Alinee los encabezados HTTP con el user-agent.

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 aumentar la velocidad y reducir el consumo de recursos. Comience 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 ajustes 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 mientras mantienen una emulación fiable.

Conclusión

Resumen de consejos clave

Ajustar con precisión las cadenas User-Agent y gestionar los encabezados de forma eficaz puede marcar una gran diferencia a la hora de evitar la detección. A continuación, se ofrece un resumen rápido de estrategias para una mejor emulación de dispositivos:

Por ejemplo, Farfetch implementó estos métodos en febrero de 2023 y registró una reducción 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 generar importantes mejoras de rendimiento.

Próximos pasos con Puppeteer

Una vez que domine los fundamentos, lleve sus scripts de Puppeteer al siguiente nivel ajustando las configuraciones de inicio para lograr un comportamiento más realista. Esta es una configuración de ejemplo 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 y desactiva las marcas de automatización, lo que ayuda a que sus scripts se integren de forma más natural.