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

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:

¡Pruebe la plantilla de navegador sin cabeza en Latenode para automatizar la navegación, la captura de capturas de pantalla y el análisis del sitio web!
Características principales de page.goto(): Navegue a las URL con opciones como timeout, waitUntil y referer.
Estrategias de espera:Utilice condiciones como domcontentloaded, load, networkidle0 o networkidle2 para páginas dinámicas o estáticas.
Gestión de errores : Detecta fallos de navegación y gestiona los tiempos de espera con try-catch Bloques
Técnicas avanzadas:Administre SPA, gestione flujos de trabajo de varios pasos y optimice el rendimiento con almacenamiento en caché y control de recursos.

Descripción rápida de las opciones de espera

Opción de espera	La mejor opción para	Tiempo aproximado
contenido cargado	Comprobaciones de estructura estática	segundos 1-2
carga	Páginas estáticas completamente cargadas	segundos 2-5
red inactiva2	Equilibrado para contenido dinámico	segundos 3-8
red inactiva0	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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, {
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>,
  <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
  <span class="hljs-attr">referer</span>: <span class="hljs-string">'https://example.com'</span>
});

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	La mejor opción para
carga	Se activa cuando se dispara el evento de carga.	Páginas estáticas que son fáciles de cargar.
contenido cargado	Se activa cuando el HTML inicial está completamente cargado.	Comprobaciones rápidas de la estructura de la página.
red inactiva0	Espera hasta que no haya actividad de red durante 500 ms.	Páginas con contenido dinámico o complejo.
red inactiva2	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:

<span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url);
<span class="hljs-keyword">if</span> (response) {
  <span class="hljs-keyword">const</span> status = response.<span class="hljs-title function_">status</span>();
  <span class="hljs-keyword">const</span> headers = response.<span class="hljs-title function_">headers</span>();
  <span class="hljs-keyword">const</span> ok = response.<span class="hljs-title function_">ok</span>(); <span class="hljs-comment">// true for status codes 200-299</span>
}

Aquí te explicamos cómo puedes verificar la navegación:

Comprobar códigos de estado: Utilice 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:

<span class="hljs-keyword">try</span> {
  <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> });
  <span class="hljs-keyword">if</span> (!response.<span class="hljs-title function_">ok</span>()) {
    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`Page load failed with status: <span class="hljs-subst">${response.status()}</span>`</span>);
  }
} <span class="hljs-keyword">catch</span> (error) {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, 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:

<span class="hljs-keyword">const</span> navigationOptions = { <span class="hljs-attr">waitUntil</span>: [<span class="hljs-string">'load'</span>, <span class="hljs-string">'networkidle0'</span>], <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span> };
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>, 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
contenido cargado	segundos 1-2
carga	segundos 2-5
red inactiva2	segundos 3-8
red inactiva0	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:

<span class="hljs-comment">// For a static site</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'domcontentloaded'</span>, <span class="hljs-attr">timeout</span>: <span class="hljs-number">15000</span> });

<span class="hljs-comment">// For a dynamic site</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>, <span class="hljs-attr">timeout</span>: <span class="hljs-number">45000</span> });

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'load'</span> });
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#main-content'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">readyState</span> === <span class="hljs-string">'complete'</span> && !<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.loading-spinner'</span>);
});

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:

<span class="hljs-keyword">const</span> navigationPromise = page.<span class="hljs-title function_">goto</span>(url);
<span class="hljs-keyword">const</span> timeoutPromise = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">_, reject</span>) =></span> 
    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> <span class="hljs-title function_">reject</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">'Navigation timed out'</span>)), <span class="hljs-number">45000</span>)
);

<span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">race</span>([navigationPromise, timeoutPromise]);
} <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-keyword">if</span> (error <span class="hljs-keyword">instanceof</span> <span class="hljs-title class_">TimeoutError</span>) {
        <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">reload</span>({ <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> });
    } <span class="hljs-keyword">else</span> {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Navigation failed: <span class="hljs-subst">${error.message}</span>`</span>);
        <span class="hljs-keyword">throw</span> 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:

<span class="hljs-comment">// Wait for the route to update</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-string">'window.location.pathname === "/dashboard"'</span>
);

<span class="hljs-comment">// React framework example</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'[data-testid="nav-link"]'</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#react-root'</span>).<span class="hljs-property">__reactContainer</span> !== <span class="hljs-literal">null</span>;
});

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:

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">complexNavigation</span>(<span class="hljs-params">page, targetUrl</span>) {
    <span class="hljs-comment">// Load the initial page</span>
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(targetUrl);

    <span class="hljs-comment">// Check for authentication completion</span>
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#auth-complete'</span>);

    <span class="hljs-comment">// Handle dynamic content</span>
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
        <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollTo</span>(<span class="hljs-number">0</span>, <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollHeight</span>);
    });

    <span class="hljs-comment">// Verify the page state</span>
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">performance</span>.<span class="hljs-property">timing</span>.<span class="hljs-property">loadEventEnd</span> > <span class="hljs-number">0</span>;
    });
}

Para procesos de varios pasos, también puede utilizar acciones y navegación paralelizadas:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(baseUrl);

<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
    page.<span class="hljs-title function_">waitForNavigation</span>({ <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> }),
    page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'button[type="submit"]'</span>)
]);

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:

<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">'--disk-cache-size=104857600'</span>], <span class="hljs-comment">// 100MB cache</span>
  <span class="hljs-attr">userDataDir</span>: <span class="hljs-string">'./cache-directory'</span>
});

<span class="hljs-keyword">const</span> context = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">createIncognitoBrowserContext</span>();

<span class="hljs-keyword">await</span> page.<span class="hljs-property">_client</span>.<span class="hljs-title function_">send</span>(<span class="hljs-string">'Network.clearBrowserCache'</span>);

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</span>(<span class="hljs-literal">true</span>);
<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">'document'</span>) {
    request.<span class="hljs-title function_">continue</span>({
      <span class="hljs-attr">headers</span>: {
        ...request.<span class="hljs-title function_">headers</span>(),
        <span class="hljs-string">'Cache-Control'</span>: <span class="hljs-string">'max-age=3600'</span>
      }
    });
  } <span class="hljs-keyword">else</span> {
    request.<span class="hljs-title function_">continue</span>();
  }
});

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:

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

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:

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">navigateMultipleTabs</span>(<span class="hljs-params">urls</span>) {
  <span class="hljs-keyword">const</span> pages = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>(
    urls.<span class="hljs-title function_">map</span>(<span class="hljs-keyword">async</span> url => {
      <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_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
      <span class="hljs-keyword">return</span> page;
    })
  );

  <span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>(
    pages.<span class="hljs-title function_">map</span>(<span class="hljs-title function_">async</span> (page, index) => {
      <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(urls[index], {
          <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
          <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
        });
      } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Failed to load <span class="hljs-subst">${urls[index]}</span>: <span class="hljs-subst">${error.message}</span>`</span>);
        <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">close</span>();
      }
    })
  );

  <span class="hljs-keyword">return</span> pages.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">page</span> =></span> !page.<span class="hljs-title function_">isClosed</span>());
}

Para evitar la sobrecarga de recursos, limite la cantidad de pestañas abiertas procesándolas en lotes:

<span class="hljs-keyword">const</span> maxConcurrentTabs = <span class="hljs-number">3</span>;
<span class="hljs-keyword">const</span> tabPool = [];

<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < urls.<span class="hljs-property">length</span>; i += maxConcurrentTabs) {
  <span class="hljs-keyword">const</span> batch = urls.<span class="hljs-title function_">slice</span>(i, i + maxConcurrentTabs);
  <span class="hljs-keyword">const</span> currentTabs = <span class="hljs-keyword">await</span> <span class="hljs-title function_">navigateMultipleTabs</span>(batch);
  tabPool.<span class="hljs-title function_">push</span>(...currentTabs);

  <span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>(
    tabPool.<span class="hljs-title function_">map</span>(<span class="hljs-keyword">async</span> tab => {
      <span class="hljs-comment">// Process each tab as needed</span>
      <span class="hljs-keyword">await</span> tab.<span class="hljs-title function_">close</span>();
    })
  );

  tabPool.<span class="hljs-property">length</span> = <span class="hljs-number">0</span>;
}

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

<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_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, {
  <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span>,
  <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});

2. Incorporar manejo de errores

<span class="hljs-keyword">try</span> {
  <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, {
    <span class="hljs-attr">waitUntil</span>: [<span class="hljs-string">'load'</span>, <span class="hljs-string">'networkidle0'</span>],
    <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
  });
} <span class="hljs-keyword">catch</span> (error) {
  <span class="hljs-keyword">if</span> (error <span class="hljs-keyword">instanceof</span> <span class="hljs-title class_">TimeoutError</span>) {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">stop</span>());
    <span class="hljs-keyword">throw</span> error;
  }
}

3. Optimizar la carga de recursos

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setCacheEnabled</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_">abort</span>();
  } <span class="hljs-keyword">else</span> {
    request.<span class="hljs-title function_">continue</span>();
  }
});

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