Una plataforma de código bajo que combina la simplicidad sin código con el poder del código completo 🚀
Empieza ahora gratis
Dominar la navegación de páginas con Puppeteer: Uso eficaz de las opciones de navegación y de acceso directo
Marzo 14, 2025
8
min leer

Dominar la navegación de páginas con Puppeteer: Uso eficaz de las opciones de navegación y de acceso directo

George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
Tabla de contenidos.

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:

Descripción rápida de las opciones de espera

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.

sbb-itb-23997f1

¿Cómo navegar por URL específicas usando Puppeteer en Latenode?

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 интеграций с приложениями.

Pruebe la plantilla AHORA: Capture, analice y comparta información de su sitio web con Headless Browser y ChatGPT

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.

  • Establecer la URL:Ingrese la URL del sitio web que desea analizar para obtener información visual.
  • Capture la captura de pantalla:Un navegador sin cabeza navega al sitio web y captura una captura de pantalla.
  • Analizar con ChatGPTChatGPT analiza la captura de pantalla para extraer y resumir información clave.
  • Compartir ideas:Después de esto, integra con tu mensajero para enviar un mensaje con el análisis, entregando detalles claros directamente a tu bandeja de entrada.

¿Cómo utilizar page.goto() en Puppeteer?

La page.goto() El método en Puppeteer se utiliza para navegar a URL específicas.

Parámetros del método

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:

  • urlLa URL a la que se accede. Es obligatoria y puede ser una ruta absoluta o relativa.
  • tiempo de espera: Establece el tiempo máximo (en milisegundos) que debe esperar la página para cargarse. El valor predeterminado es 30,000 XNUMX ms.
  • esperar hasta:Define cuándo se considera completa la navegación.
  • árbitro:Establece un encabezado de referencia personalizado para la solicitud.
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.

Manejo de respuestas

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:

  • Comprobar códigos de estado: Utiliza response.status() para confirmar el estado HTTP.
  • Manejar errores:Utilice bloques try-catch para detectar navegaciones fallidas.
  • Analizar encabezados:Acceda a los encabezados de respuesta usando 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.

Opciones de carga de página

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.

Condiciones de espera

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.

Seleccionar opciones de espera

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 networkidle0Es 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.

Múltiples estados de espera

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.

Métodos de navegación complejos

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.

Gestión de errores

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.

Navegación SPA

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.

Navegación combinada

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.

Velocidad y rendimiento

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.

Uso de la caché del navegador

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.

Gestión de Recursos

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.

Navegación con múltiples pestañas

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.

Conclusión

Puntos clave

Para aprovechar al máximo Puppeteer's page.goto() Método, céntrate en estas estrategias prácticas:

  • Utilice Latenode: ¡Pruebe Headless Browser en Latenode para visitar URL, hacer capturas de pantalla y analizar sitios web!
  • Estrategias de espera: Coincidir con el waitUntil Opción para su tipo de página para una mejor confiabilidad.
  • Gestión de errores : Utiliza try-catch Bloques y tiempos de espera para gestionar errores de navegación de manera efectiva.
  • Gestión de Recursos:Ajuste la configuración de caché del navegador y administre la carga de recursos para mejorar el rendimiento.
  • Aplicaciones de una sola página (SPA): Par 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:

Guía de implementación

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

Blog y artículos

Blogs relacionados

Caso de uso

Respaldado por