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()
El 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:
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:
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:
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:
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:
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
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:
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.
Cree potentes flujos de trabajo de IA y automatice las rutinas
Unifique las principales herramientas de IA sin codificar ni administrar claves API, implemente agentes de IA inteligentes y chatbots, automatice los flujos de trabajo y reduzca los costos de desarrollo.