.png)
.svg){kind=icon}
Marzo 23, 2025
•
7
min leer
Gestión de agentes de usuario en Puppeteer para la emulación de dispositivos
George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
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:
page.setUserAgent() y emular dispositivos con perfiles integrados como iPhone o configuraciones personalizadas.Los consejos clave incluyen:
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.
Prepara Puppeteer instalando las dependencias necesarias y escribiendo tu primer script de emulació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.
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:
~/.cache/puppeteer.PUPPETEER_CACHE_DIR Variable ambiental.Esta sección explica cómo configurar y ajustar la configuración del agente de usuario de manera efectiva.
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:
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.
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'
);
A continuación se ofrecen algunos consejos para garantizar una gestión fluida del agente de usuario:
// 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'
);
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.
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.
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);
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');
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.
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:
async function naturalDelay() {
const delay = Math.floor(Math.random() * (3000 - 1000) + 1000);
await page.waitForTimeout(delay);
}
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.
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.
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 |
| 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 observamos una reducción del 40 % en el tráfico de bots, junto con una mejora del 15 % en los tiempos de carga. Estos resultados demuestran cómo pequeños ajustes pueden generar grandes mejoras de rendimiento.
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.
