ACCESIBLES
PRODUCTO
SOLUCIONES
por casos de uso
AI Plomo GestiónFacturaciónRedes socialesGestión de proyectos
Gestión de datos por sector
Más información
BlogPlantillasVideosYouTubeRECURSOS
COMUNIDADES Y REDES SOCIALES
SOCIOS
Puppeteer simplifica la automatización web al ofrecer herramientas para controlar los navegadores Chrome y Chromium. La page.goto()
El método es fundamental para navegar por las páginas de manera eficaz.Ya sea para probar, extraer datos o automatizar tareas, encontrará lo siguiente:
page.goto()
: Navegue a las URL con opciones como timeout
, waitUntil
y referer
.
domcontentloaded
, load
, networkidle0
o networkidle2
para páginas dinámicas o estáticas.
try-catch
Bloques
Opción de espera | La mejor opción para | Sincronización (Aprox.) |
---|---|---|
domcontentloaded |
Comprobaciones de estructura estática | segundos 1-2 |
load |
Páginas estáticas completamente cargadas | segundos 2-5 |
networkidle2 |
Equilibrado para contenido dinámico | segundos 3-8 |
networkidle0 |
Páginas complejas y dinámicas | segundos 5-10 |
Para llevar claveAdapte sus condiciones de espera y gestión de errores al tipo de página para una automatización fiable. Explore métodos avanzados para SPA y procesos de varios pasos para gestionar flujos de trabajo complejos de forma eficiente.
Latenode permite implementar el navegador sin cabeza impulsado por Puppeteer, utilizar aplicaciones automatizadas y analizar el proceso de instalación сайтов и моинторинга страниц. Para poder integrar las leyes en las bibliotecas, agregue nuevos códigos y consulte con servicios médicos доступны более 300 интеграций с приложениями.
A diferencia de los raspadores regulares, captura la estructura visual real, reconociendo tanto los elementos de diseño como los bloques de texto. ¡Pruebe Headless Browser en esta plantilla ahora! Este flujo de trabajo no solo captura y analiza datos del sitio web, sino que también garantiza que pueda compartir información fácilmente para una comunicación fluida.
La page.goto()
El método en Puppeteer se utiliza para navegar a URL específicas.
La page.goto()
El método acepta varios parámetros para personalizar la navegación:
await page.goto(url, {
timeout: 30000,
waitUntil: 'networkidle0',
referer: 'https://example.com'
});
A continuación se muestra un desglose de los parámetros clave:
Opción de espera | Descripción original | La mejor opción para |
---|---|---|
load |
Se activa cuando el load se dispara el evento. |
Páginas estáticas que son fáciles de cargar. |
domcontentloaded |
Se activa cuando el HTML inicial está completamente cargado. | Comprobaciones rápidas de la estructura de la página. |
networkidle0 |
Espera hasta que no haya actividad de red durante 500 ms. | Páginas con contenido dinámico o complejo. |
networkidle2 |
Espera hasta que solo queden 2 conexiones de red. | Equilibra velocidad y minuciosidad. |
Estas opciones le permiten controlar cómo y cuándo se considera que la página está completamente cargada, lo que garantiza una navegación precisa y confiable.
Una vez configurados los parámetros de navegación, el siguiente paso es gestionar la respuesta. page.goto()
El método devuelve una Promesa que se resuelve en un objeto de Respuesta. Este objeto proporciona detalles sobre la navegación:
const response = await page.goto(url);
if (response) {
const status = response.status();
const headers = response.headers();
const ok = response.ok(); // true for status codes 200-299
}
Aquí te explicamos cómo puedes verificar la navegación:
response.status()
para confirmar el estado HTTP.
response.headers()
.
Para el manejo de errores, envuelva el page.goto()
llamar en un bloque try-catch:
try {
const response = await page.goto(url, { waitUntil: 'networkidle0' });
if (!response.ok()) {
throw new Error(`Page load failed with status: ${response.status()}`);
}
} catch (error) {
console.error('Navigation failed:', error);
}
El objeto de respuesta incluye varios métodos útiles:
response.status()
:Recupera el código de estado HTTP.
response.headers()
:Obtiene los encabezados de respuesta.
response.securityDetails()
:Proporciona detalles SSL/TLS.
response.timing()
:Ofrece datos de sincronización de navegación.
Estas herramientas garantizan que pueda validar la navegación y gestionar cualquier problema de manera efectiva.
Al trabajar con las funciones de navegación de Puppeteer, elegir la estrategia de espera adecuada es clave para crear una automatización fiable. Los scripts solo deben ejecutarse cuando la página esté completamente lista.
El titiritero utiliza el waitUntil
Parámetro para definir cuándo se considera cargada una página. Ejemplo:
const navigationOptions = { waitUntil: ['load', 'networkidle0'], timeout: 30000 };
await page.goto('https://example.com', navigationOptions);
Si especifica varias condiciones de espera, Puppeteer espera a que se cumplan todas antes de continuar. A continuación, se detallan las condiciones de espera más comunes y sus tiempos típicos:
Condición de espera | Tiempo aproximado |
---|---|
domcontentloaded |
segundos 1-2 |
load |
segundos 2-5 |
networkidle2 |
segundos 3-8 |
networkidle0 |
segundos 5-10 |
Elija sus condiciones de espera según cómo esté estructurada su página y qué tan rápido se carga.
La condición de espera correcta depende de si se trata de un sitio estático o dinámico:
// For a static site
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 15000 });
// For a dynamic site
await page.goto(url, { waitUntil: 'networkidle0', timeout: 45000 });
Asegúrese de que el valor del tiempo de espera coincida con la complejidad de la condición de espera elegida. Condiciones más detalladas, como networkidle0
Es posible que se necesiten tiempos de espera más largos para evitar errores. Para que su script sea aún más confiable, combine las condiciones de espera con comprobaciones adicionales.
Para mayor precisión, puede combinar condiciones de espera con comprobaciones de elementos específicos:
await page.goto(url, { waitUntil: 'load' });
await page.waitForSelector('#main-content');
await page.waitForFunction(() => {
return document.readyState === 'complete' && !document.querySelector('.loading-spinner');
});
Este método garantiza que la página se cargue completamente y que los elementos específicos estén disponibles. De esta forma, se minimizan los fallos en las pruebas y se mejora la fiabilidad de la automatización.
Esta sección explica técnicas avanzadas para gestionar la navegación compleja en Puppeteer. Basándose en las estrategias básicas de navegación y espera descritas anteriormente, estos métodos se centran en gestionar escenarios más complejos.
Maneje los errores de navegación de manera efectiva combinando verificaciones de tiempo de espera con pasos de recuperación personalizados:
const navigationPromise = page.goto(url);
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Navigation timed out')), 45000)
);
try {
await Promise.race([navigationPromise, timeoutPromise]);
} catch (error) {
if (error instanceof TimeoutError) {
await page.reload({ waitUntil: 'networkidle0' });
} else {
console.error(`Navigation failed: ${error.message}`);
throw error;
}
}
Este enfoque garantiza que se gestionen los tiempos de espera y que la página pueda recuperarse o recargarse según sea necesario.
Navegar por aplicaciones de página única (SPA) requiere una estrategia diferente, que a menudo implica cambios de ruta y comportamientos específicos del marco:
// Wait for the route to update
await page.waitForFunction(
'window.location.pathname === "/dashboard"'
);
// React framework example
await page.click('[data-testid="nav-link"]');
await page.waitForFunction(() => {
return document.querySelector('#react-root').__reactContainer !== null;
});
Este método garantiza una navegación fluida en las SPA esperando cambios específicos en el estado de la aplicación.
Para flujos de trabajo que involucran múltiples pasos, puede combinar técnicas de navegación para manejar escenarios complejos:
async function complexNavigation(page, targetUrl) {
// Load the initial page
await page.goto(targetUrl);
// Check for authentication completion
await page.waitForSelector('#auth-complete');
// Handle dynamic content
await page.evaluate(() => {
window.scrollTo(0, document.body.scrollHeight);
});
// Verify the page state
await page.waitForFunction(() => {
return window.performance.timing.loadEventEnd > 0;
});
}
Para procesos de varios pasos, también puede utilizar acciones y navegación paralelizadas:
await page.goto(baseUrl);
await Promise.all([
page.waitForNavigation({ waitUntil: 'networkidle0' }),
page.click('button[type="submit"]')
]);
Estas técnicas agilizan la navegación a través de flujos de trabajo complejos, garantizando un manejo eficiente de contenido dinámico y procesos de múltiples pasos.
Aumentar la velocidad y la eficiencia de la navegación es esencial para crear flujos de trabajo de automatización eficaces. A continuación, se presentan algunas técnicas prácticas para mejorar el rendimiento en diversas situaciones.
Puede configurar el tamaño de la caché del navegador y administrar el almacenamiento en caché de manera eficiente con estos pasos:
const browser = await puppeteer.launch({
args: ['--disk-cache-size=104857600'], // 100MB cache
userDataDir: './cache-directory'
});
const context = await browser.createIncognitoBrowserContext();
await page._client.send('Network.clearBrowserCache');
await page.setCacheEnabled(true);
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'document') {
request.continue({
headers: {
...request.headers(),
'Cache-Control': 'max-age=3600'
}
});
} else {
request.continue();
}
});
Una vez configurado el almacenamiento en caché, puede centrar su atención en administrar la carga de recursos para una navegación aún más rápida.
Para reducir la carga innecesaria de recursos, bloquee elementos no esenciales como imágenes y fuentes:
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'image' || request.resourceType() === 'font') {
request.abort();
} else {
request.continue();
}
});
Este enfoque ayuda a ahorrar ancho de banda y acelera las interacciones de las páginas.
Gestionar varias pestañas de forma eficiente puede mejorar el rendimiento al aprovechar al máximo los recursos disponibles. A continuación, te explicamos cómo gestionar la navegación entre varias pestañas:
async function navigateMultipleTabs(urls) {
const pages = await Promise.all(
urls.map(async url => {
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(30000);
return page;
})
);
await Promise.all(
pages.map(async (page, index) => {
try {
await page.goto(urls[index], {
waitUntil: 'networkidle0',
timeout: 30000
});
} catch (error) {
console.error(`Failed to load ${urls[index]}: ${error.message}`);
await page.close();
}
})
);
return pages.filter(page => !page.isClosed());
}
Para evitar la sobrecarga de recursos, limite la cantidad de pestañas abiertas procesándolas en lotes:
const maxConcurrentTabs = 3;
const tabPool = [];
for (let i = 0; i < urls.length; i += maxConcurrentTabs) {
const batch = urls.slice(i, i + maxConcurrentTabs);
const currentTabs = await navigateMultipleTabs(batch);
tabPool.push(...currentTabs);
await Promise.all(
tabPool.map(async tab => {
// Process each tab as needed
await tab.close();
})
);
tabPool.length = 0;
}
Este método de procesamiento por lotes garantiza un funcionamiento fluido sin saturar los recursos del sistema.
Para aprovechar al máximo Puppeteer's page.goto()
Método, céntrate en estas estrategias prácticas:
waitUntil
Opción para su tipo de página para una mejor confiabilidad.
try-catch
Bloques y tiempos de espera para gestionar errores de navegación de manera efectiva.
page.goto()
con condiciones de espera personalizadas para manejar los cambios de estado correctamente.
Estos enfoques se basan en las técnicas descritas anteriormente, lo que le ayudará a gestionar escenarios complejos y a mejorar el rendimiento. A continuación, le explicamos cómo aplicarlos paso a paso:
1. Configurar la navegación básica
const page = await browser.newPage();
await page.setDefaultNavigationTimeout(30000);
await page.goto(url, {
waitUntil: 'networkidle0',
timeout: 30000
});
2. Incorporar manejo de errores
try {
await page.goto(url, {
waitUntil: ['load', 'networkidle0'],
timeout: 30000
});
} catch (error) {
if (error instanceof TimeoutError) {
await page.evaluate(() => window.stop());
throw error;
}
}
3. Optimizar la carga de recursos
await page.setRequestInterception(true);
await page.setCacheEnabled(true);
page.on('request', request => {
if (request.resourceType() === 'image') {
request.abort();
} else {
request.continue();
}
});