Gestión de agentes de usuario en Puppeteer para 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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'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'</span>
);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({ <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>, <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span> });

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:

<span class="hljs-comment"># Option 1: Install Puppeteer with Chrome included</span>
npm i puppeteer

<span class="hljs-comment"># Option 2: Install Puppeteer without Chrome</span>
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:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

(<span class="hljs-title function_">async</span> () => {
  <span class="hljs-comment">// Launch browser in non-headless mode</span>
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({ 
    <span class="hljs-attr">headless</span>: <span class="hljs-literal">false</span> 
  });

  <span class="hljs-comment">// Create a new page</span>
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();

  <span class="hljs-comment">// Set iPhone X User-Agent</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
    <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) '</span> +
    <span class="hljs-string">'AppleWebKit/604.1.38 (KHTML, like Gecko) '</span> +
    <span class="hljs-string">'Version/11.0 Mobile/15A372 Safari/604.1'</span>
  );

  <span class="hljs-comment">// Configure viewport for iPhone X</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
    <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
    <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">3</span>,
    <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
  });

  <span class="hljs-comment">// Navigate to a webpage</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://pptr.dev'</span>);

  <span class="hljs-comment">// Pause to view the result</span>
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">3000</span>);

  <span class="hljs-comment">// Close the browser</span>
  <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
})();

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

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

<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 '</span> +
  <span class="hljs-string">'(KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36'</span>
);

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:

<span class="hljs-comment">// Desktop Chrome on Windows 10</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

Para emulación móvil:

<span class="hljs-comment">// iPhone 14 Safari</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) '</span> +
  <span class="hljs-string">'AppleWebKit/605.1.15 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Version/16.0 Mobile/15E148 Safari/604.1'</span>
);

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.

<span class="hljs-comment">// Default User-Agent (not recommended)</span>

<span class="hljs-comment">// Custom User-Agent (recommended)</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(
  <span class="hljs-string">'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) '</span> +
  <span class="hljs-string">'AppleWebKit/537.36 (KHTML, like Gecko) '</span> +
  <span class="hljs-string">'Chrome/120.0.0.0 Safari/537.36'</span>
);

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setExtraHTTPHeaders</span>({
  <span class="hljs-string">'Accept-Language'</span>: <span class="hljs-string">'en-US,en;q=0.9'</span>,
  <span class="hljs-string">'Accept'</span>: <span class="hljs-string">'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8'</span>
});

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.

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">const</span> iPhone15Pro = puppeteer.<span class="hljs-property">KnownDevices</span>[<span class="hljs-string">'iPhone 15 Pro'</span>];

(<span class="hljs-title function_">async</span> () => {
  <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
  <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulate</span>(iPhone15Pro);
  <span class="hljs-comment">// The page now behaves like an iPhone 15 Pro.</span>
})();

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">isLandscape</span>: <span class="hljs-literal">true</span>
});

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">1440</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">900</span>,
  <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>
});

<span class="hljs-keyword">const</span> options = {
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">captureBeyondViewport</span>: <span class="hljs-literal">true</span>
};
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>(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:

<span class="hljs-comment">// Simulate 3G network conditions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">emulateNetworkConditions</span>({
  <span class="hljs-attr">offline</span>: <span class="hljs-literal">false</span>,
  <span class="hljs-attr">downloadThroughput</span>: (<span class="hljs-number">750</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 750 kb/s</span>
  <span class="hljs-attr">uploadThroughput</span>: (<span class="hljs-number">250</span> * <span class="hljs-number">1024</span>) / <span class="hljs-number">8</span>, <span class="hljs-comment">// 250 kb/s</span>
  <span class="hljs-attr">latency</span>: <span class="hljs-number">100</span> <span class="hljs-comment">// 100 ms</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
  <span class="hljs-attr">width</span>: <span class="hljs-number">375</span>,
  <span class="hljs-attr">height</span>: <span class="hljs-number">812</span>,
  <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">hasTouch</span>: <span class="hljs-literal">true</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">tap</span>(<span class="hljs-string">'#button-element'</span>);

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:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
puppeteer.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</span>());

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>();
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (iPhone; CPU iPhone OS 17_3_1 like Mac OS X)'</span>);

Para cada página nueva, asegúrese de que el agente de usuario esté configurado:

<span class="hljs-keyword">const</span> newPage = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> newPage.<span class="hljs-title function_">setUserAgent</span>(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:

<span class="hljs-keyword">const</span> stealthPlugin = <span class="hljs-title class_">StealthPlugin</span>();
stealthPlugin.<span class="hljs-property">enabledEvasions</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">'user-agent-override'</span>);
puppeteer.<span class="hljs-title function_">use</span>(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.

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">naturalDelay</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> delay = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * (<span class="hljs-number">3000</span> - <span class="hljs-number">1000</span>) + <span class="hljs-number">1000</span>);
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(delay);
}

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

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

<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [
    <span class="hljs-string">'--disable-gpu'</span>,
    <span class="hljs-string">'--disable-dev-shm-usage'</span>,
    <span class="hljs-string">'--disable-setuid-sandbox'</span>,
    <span class="hljs-string">'--no-first-run'</span>,
    <span class="hljs-string">'--no-sandbox'</span>,
    <span class="hljs-string">'--no-zygote'</span>
  ],
  <span class="hljs-attr">userDataDir</span>: <span class="hljs-string">'./cache'</span>
});

Para tareas de captura de pantalla, utilice configuraciones eficientes:

<span class="hljs-keyword">const</span> screenshot = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
  <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>,
  <span class="hljs-attr">quality</span>: <span class="hljs-number">80</span>,
  <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">encoding</span>: <span class="hljs-string">'binary'</span>
});

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

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function">(<span class="hljs-params">request</span>) =></span> {
  <span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'font'</span>) {
    request.<span class="hljs-title function_">abort</span>();
  } <span class="hljs-keyword">else</span> {
    request.<span class="hljs-title function_">continue</span>();
  }
});

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:

Aspecto	Mejores Prácticas	Impacto
Configuración del agente de usuario	Asignar un agente de usuario para cada nueva pestaña o página	Disminución del 40% en el tráfico de bots [1]
Patrones de solicitud	Imitar los patrones de huellas dactilares del navegador	Reduce las posibilidades de detección
Alineación del encabezado	Hacer coincidir los encabezados HTTP con el agente de usuario asignado	Garantiza una emulación consistente

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:

<span class="hljs-comment">// Advanced browser launch setup</span>
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
  <span class="hljs-attr">args</span>: [
    <span class="hljs-string">'--enable-webgl'</span>,
    <span class="hljs-string">'--use-gl=desktop'</span>,
    <span class="hljs-string">'--disable-automation'</span>
  ],
  <span class="hljs-attr">ignoreDefaultArgs</span>: [<span class="hljs-string">'--enable-automation'</span>]
});

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.

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