Maîtriser la navigation dans les pages avec Puppeteer : utilisation efficace des options Goto et Navigation

Puppeteer simplifie l'automatisation Web en proposant des outils pour contrôler les navigateurs Chrome et Chromium. L'espace page.goto() la méthode est essentielle pour naviguer efficacement dans les pages, que ce soit pour des tests, du scraping ou l'automatisation de tâches. Voici ce que vous y trouverez :

Essayez le modèle de navigateur sans tête sur Latenode pour automatiser la navigation, la capture d'écran et l'analyse du site Web !
Les principales caractéristiques de page.goto(): Accédez aux URL avec des options telles que timeout, waitUntil et referer.
Stratégies d'attente:Utilisez des conditions telles que domcontentloaded, load, networkidle0, ou networkidle2 pour les pages dynamiques ou statiques.
Gestion des erreurs : Détectez les échecs de navigation et gérez les délais d'attente avec try-catch Blocs.
Techniques avancées: Gérez les SPA, gérez les flux de travail en plusieurs étapes et optimisez les performances grâce à la mise en cache et au contrôle des ressources.

Aperçu rapide des options d'attente

Option d'attente	Idéal pour	Durée (approximative)
domcontentloaded	Vérifications de structure statique	secondes 1-2
charge	Pages statiques entièrement chargées	secondes 2-5
réseau inactif2	Équilibré pour un contenu dynamique	secondes 3-8
réseau inactif0	Pages complexes et dynamiques	secondes 5-10

À retenirAdaptez vos conditions d'attente et votre gestion des erreurs au type de page pour une automatisation fiable. Découvrez des méthodes avancées pour les SPA et les processus en plusieurs étapes afin de gérer efficacement les flux de travail complexes.

sbb-itb-23997f1

Comment naviguer dans des URL spécifiques à l'aide de Puppeteer sur Latenode ?

Latenode permet d'utiliser le navigateur sans tête alimenté par Puppeteer, en particulier dans vos scénarios automatiques, pour analyser le processus d'analyse des données et surveillance stranic. Vous pouvez simplement intégrer votre bibliothèque d'utilisateurs, ajouter votre code et rechercher vos services - dans vos services bole 300 intégration avec les applications.

Essayez le modèle MAINTENANT : Capturez, analysez et partagez des informations sur votre site Web avec un navigateur sans tête et ChatGPT

Contrairement aux scrapers classiques, il capture la structure visuelle réelle, reconnaissant à la fois les éléments de conception et les blocs de texte. Essayez Headless Browser dans ce modèle maintenant ! Ce flux de travail capture et analyse non seulement les données du site Web, mais garantit également que vous pouvez facilement partager des informations pour une communication transparente.

Définir l'URL: Saisissez l'URL du site Web que vous souhaitez analyser pour obtenir des informations visuelles.
Capturer la capture d'écran:Un navigateur sans tête navigue vers le site Web et capture une capture d'écran.
Analyser avec ChatGPT:La capture d'écran est analysée par ChatGPT pour extraire et résumer les informations clés.
Partager des informations:Après cela, intégrez-le à votre messagerie pour envoyer un message contenant l'analyse, en fournissant des détails clairs directement dans votre boîte de réception.

Comment utiliser page.goto() dans Puppeteer ?

L'espace page.goto() La méthode dans Puppeteer est utilisée pour naviguer vers des URL spécifiques.

Paramètres de la méthode

L'espace page.goto() la méthode accepte plusieurs paramètres pour personnaliser la navigation :

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

Voici une ventilation des paramètres clés :

url: L'URL vers laquelle naviguer. Ce champ est obligatoire et peut être un chemin absolu ou relatif.
temps mort: Définit le temps d'attente maximal (en millisecondes) pour le chargement de la page. La valeur par défaut est de 30,000 XNUMX ms.
attendre jusqu'à: Définit quand la navigation est considérée comme terminée.
referer: Définit un en-tête de référent personnalisé pour la demande.

Option d'attente	Description	Idéal pour
charge	Se déclenche lorsque l'événement de chargement est déclenché.	Pages statiques faciles à charger.
domcontentloaded	Se déclenche lorsque le code HTML initial est entièrement chargé.	Vérifications rapides de la structure de la page.
réseau inactif0	Attend qu'il n'y ait plus d'activité réseau pendant 500 ms.	Pages avec un contenu dynamique ou complexe.
réseau inactif2	Attend qu'il ne reste que 2 connexions réseau.	Équilibre la rapidité et la minutie.

Ces options vous permettent de contrôler comment et quand la page est considérée comme entièrement chargée, garantissant une navigation précise et fiable.

Gestion des réponses

Une fois les paramètres de navigation définis, la gestion de la réponse est l'étape suivante. page.goto() La méthode renvoie une promesse qui se résout en un objet réponse. Cet objet fournit des détails sur la navigation :

<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>
}

Voici comment vous pouvez vérifier la navigation :

Vérifier les codes d'état: Utilisation response.status() pour confirmer le statut HTTP.
Gérer les erreurs: Utilisez les blocs try-catch pour intercepter les navigations ayant échoué.
Analyser les en-têtes:Accéder aux en-têtes de réponse à l'aide de response.headers().

Pour la gestion des erreurs, enveloppez le page.goto() appel dans un bloc 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);
}

L'objet de réponse inclut plusieurs méthodes utiles :

response.status(): Récupère le code d'état HTTP.
response.headers(): Récupère les en-têtes de réponse.
response.securityDetails(): Fournit les détails SSL/TLS.
response.timing(): Offre des données de synchronisation de navigation.

Ces outils vous permettent de valider la navigation et de gérer efficacement tous les problèmes.

Options de chargement de page

Lorsque vous utilisez les fonctionnalités de navigation de Puppeteer, choisir la bonne stratégie d'attente est essentiel pour créer une automatisation fiable. Vos scripts ne doivent s'exécuter que lorsque la page est entièrement prête.

Conditions d'attente

Le marionnettiste utilise le waitUntil Paramètre définissant le moment où une page est considérée comme chargée. Voici un exemple :

<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 vous spécifiez plusieurs conditions d'attente, Puppeteer attend qu'elles soient toutes remplies avant de continuer. Voici une description des conditions d'attente courantes et de leur durée habituelle :

Condition d'attente	Temps approximatif
domcontentloaded	secondes 1-2
charge	secondes 2-5
réseau inactif2	secondes 3-8
réseau inactif0	secondes 5-10

Choisissez vos conditions d’attente en fonction de la structure de votre page et de la vitesse à laquelle elle se charge.

Sélection des options d'attente

La bonne condition d'attente dépend du fait que vous avez affaire à un site statique ou dynamique :

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

Assurez-vous que la valeur du délai d'attente correspond à la complexité de la condition d'attente choisie. Des conditions plus détaillées, comme networkidle0, des délais d'attente plus longs peuvent être nécessaires pour éviter les erreurs. Pour rendre votre script encore plus fiable, combinez les conditions d'attente avec des vérifications supplémentaires.

Plusieurs états d'attente

Pour une meilleure précision, vous pouvez associer des conditions d'attente à des vérifications d'éléments spécifiques :

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

Cette méthode garantit que la page est entièrement chargée et que certains éléments sont disponibles. Vous minimisez ainsi les échecs de test et améliorez la fiabilité de votre automatisation.

Méthodes de navigation complexes

Cette section explique les techniques avancées de gestion de la navigation complexe dans Puppeteer. S'appuyant sur les stratégies de navigation et d'attente de base décrites précédemment, ces méthodes se concentrent sur la gestion de scénarios plus complexes.

Gestion des erreurs

Gérez efficacement les erreurs de navigation en combinant des vérifications de délai d'expiration avec des étapes de récupération personnalisées :

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

Cette approche garantit que les délais d’attente sont gérés et que la page peut récupérer ou se recharger selon les besoins.

Navigation SPA

La navigation dans les applications monopage (SPA) nécessite une stratégie différente, impliquant souvent des changements d'itinéraire et des comportements spécifiques au framework :

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

Cette méthode garantit une navigation fluide dans les SPA en attendant des changements spécifiques dans l'état de l'application.

Navigation combinée

Pour les flux de travail impliquant plusieurs étapes, vous pouvez combiner des techniques de navigation pour gérer des scénarios complexes :

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

Pour les processus en plusieurs étapes, vous pouvez également utiliser une navigation et des actions parallélisées :

<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>)
]);

Ces techniques rationalisent la navigation dans les flux de travail complexes, garantissant une gestion efficace du contenu dynamique et des processus en plusieurs étapes.

Vitesse et performance

Améliorer la vitesse et l'efficacité de la navigation est essentiel pour créer des workflows d'automatisation performants. Voici quelques techniques pratiques pour améliorer les performances dans différents scénarios.

Utilisation du cache du navigateur

Vous pouvez configurer la taille du cache du navigateur et gérer efficacement la mise en cache en suivant ces étapes :

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

Une fois la mise en cache configurée, vous pouvez vous concentrer sur la gestion du chargement des ressources pour une navigation encore plus rapide.

Gestion des ressources

Pour réduire le chargement inutile des ressources, bloquez les éléments non essentiels comme les images et les polices :

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

Cette approche permet d’économiser de la bande passante et d’accélérer les interactions entre les pages.

Navigation multi-onglets

Gérer efficacement plusieurs onglets peut améliorer les performances en optimisant les ressources disponibles. Voici comment gérer la navigation entre plusieurs onglets :

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

Pour éviter de surcharger les ressources, limitez le nombre d'onglets ouverts en les traitant par lots :

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

Cette méthode de traitement par lots garantit un fonctionnement fluide sans surcharger les ressources système.

Conclusion

À retenir

Pour tirer le meilleur parti de Puppeteer's page.goto() méthode, concentrez-vous sur ces stratégies pratiques :

Utiliser Latenode: Essayez Headless Browser sur Latenode pour visiter des URL, faire des captures d'écran et analyser des sites Web !
Stratégies d'attente: Correspond à waitUntil option à votre type de page pour une meilleure fiabilité.
Gestion des erreurs : Utilisation try-catch blocs et délais d'attente pour gérer efficacement les erreurs de navigation.
Gestion des ressources: Ajustez les paramètres de cache du navigateur et gérez le chargement des ressources pour améliorer les performances.
Applications à page unique (SPA): Paire page.goto() avec des conditions d'attente personnalisées pour gérer correctement les changements d'état.

Ces approches s'appuient sur les techniques évoquées précédemment et vous aident à gérer des scénarios complexes et à améliorer vos performances. Voici comment les appliquer étape par étape :

Guide d'implémentation

1. Configurer la navigation de base

<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. Intégrer la gestion des erreurs

<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. Optimiser le chargement des ressources

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