Die Seitennavigation mit Puppeteer meistern: Effektive Nutzung von goto und Navigationsoptionen

Puppeteer vereinfacht die Webautomatisierung, indem es Tools zur Steuerung der Chrome- und Chromium-Browser anbietet. Die page.goto() Die Methode ist für eine effektive Seitennavigation von zentraler Bedeutung, sei es zum Testen, Scraping oder zur Automatisierung von Aufgaben. Hier finden Sie:

Probieren Sie die Headless-Browser-Vorlage auf Latenode aus, um die Website-Navigation, das Erstellen von Screenshots und die Analyse zu automatisieren!
Hauptmerkmale von page.goto(): Navigieren Sie zu URLs mit Optionen wie timeout, waitUntil und referer.
Wartestrategien: Verwenden Sie Bedingungen wie domcontentloaded, load, networkidle0den networkidle2 für dynamische oder statische Seiten.
Fehlerbehandlung: Navigationsfehler erkennen und Timeouts verwalten mit try-catch Blöcke
Fortgeschrittene Techniken: Verwalten Sie SPAs, handhaben Sie mehrstufige Workflows und optimieren Sie die Leistung mit Caching und Ressourcenkontrolle.

Kurzübersicht über Warteoptionen

Warteoption	Geeignet für	Zeitangabe (ca.)
domcontentloaded	Statische Strukturprüfungen	1-2 Sekunden
Belastung	Vollständig geladene statische Seiten	2-5 Sekunden
Netzwerkleerlauf2	Ausgewogen für dynamische Inhalte	3-8 Sekunden
Netzwerkleerlauf0	Komplexe, dynamische Seiten	5-10 Sekunden

Schlüssel zum Mitnehmen: Passen Sie Ihre Wartebedingungen und Fehlerbehandlung an den Seitentyp an, um eine zuverlässige Automatisierung zu gewährleisten. Tauchen Sie ein in erweiterte Methoden für SPAs und mehrstufige Prozesse, um komplexe Workflows effizient abzuwickeln.

sbb-itb-23997f1

Wie navigiert man mit Puppeteer auf Latenode zu bestimmten URLs?

Latenode nutzt den Puppeteer-basierten Headless Browser, der in verschiedenen automatisierten Szenarien verwendet wird und den Analyseprozess auf Websites und in der YouTube-Seite steuert. Sie können einige Zeit mit der Integration in die von Ihnen genutzte Bibliothek verbringen, einen neuen Code hinzufügen und andere Dienste nutzen – Sie erhalten mehr als 300 Integrationen с приложениями.

Vorlage JETZT testen: Erfassen, analysieren und teilen Sie Website-Einblicke mit Headless Browser und ChatGPT

Im Gegensatz zu herkömmlichen Scrapern erfasst es die tatsächliche visuelle Struktur und erkennt sowohl Designelemente als auch Textblöcke. Probieren Sie jetzt den Headless Browser in dieser Vorlage aus! Dieser Workflow erfasst und analysiert nicht nur Website-Daten, sondern stellt auch sicher, dass Sie Erkenntnisse problemlos weitergeben können, um eine nahtlose Kommunikation zu gewährleisten.

Festlegen der URL: Geben Sie die Website-URL ein, die Sie für visuelle Einblicke analysieren möchten.
Erfassen Sie den Screenshot: Ein Headless-Browser navigiert zur Website und macht einen Screenshot.
Analysieren mit ChatGPT: Der Screenshot wird von ChatGPT analysiert, um wichtige Erkenntnisse zu extrahieren und zusammenzufassen.
Einblicke teilen: Integrieren Sie anschließend Ihren Messenger, um eine Nachricht mit der Analyse zu senden und klare Details direkt in Ihren Posteingang zu liefern.

Wie verwende ich page.goto() in Puppeteer?

Die page.goto() Die Methode in Puppeteer wird verwendet, um zu bestimmten URLs zu navigieren.

Methodenparameter

Die page.goto() Die Methode akzeptiert mehrere Parameter zur Anpassung der 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>
});

Hier ist eine Aufschlüsselung der wichtigsten Parameter:

URL: Die URL, zu der navigiert werden soll. Diese ist erforderlich und kann ein absoluter oder relativer Pfad sein.
Timeout: Legt die maximale Wartezeit (in Millisekunden) für das Laden der Seite fest. Der Standardwert beträgt 30,000 ms.
warte bis: Definiert, wann die Navigation als abgeschlossen gilt.
Referer: Legt einen benutzerdefinierten Referrer-Header für die Anfrage fest.

Warteoption	Beschreibung	Geeignet für
Belastung	Wird ausgelöst, wenn das Ladeereignis eintritt.	Statische Seiten, die einfach zu laden sind.
domcontentloaded	Wird ausgelöst, wenn das anfängliche HTML vollständig geladen ist.	Schnelle Überprüfung der Seitenstruktur.
Netzwerkleerlauf0	Wartet, bis 500 ms lang keine Netzwerkaktivität mehr vorliegt.	Seiten mit dynamischem oder komplexem Inhalt.
Netzwerkleerlauf2	Wartet, bis nur noch 2 Netzwerkverbindungen übrig sind.	Gleicht Geschwindigkeit und Gründlichkeit aus.

Mit diesen Optionen können Sie steuern, wie und wann die Seite als vollständig geladen gilt, und so eine genaue und zuverlässige Navigation gewährleisten.

Antworthandhabung

Sobald die Navigationsparameter festgelegt sind, ist der nächste Schritt die Bearbeitung der Antwort. page.goto() Die Methode gibt ein Promise zurück, das in ein Response-Objekt aufgelöst wird. Dieses Objekt liefert Details zur 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>
}

So können Sie die Navigation überprüfen:

Statuscodes prüfen: Benutzen response.status() um den HTTP-Status zu bestätigen.
Behandeln Sie Fehler: Verwenden Sie Try-Catch-Blöcke, um fehlgeschlagene Navigationen abzufangen.
Kopfzeilen analysieren: Zugriff auf Antwortheader mit response.headers().

Um Fehler zu behandeln, umschließen Sie die page.goto() Aufruf in einem Try-Catch-Block:

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

Das Antwortobjekt enthält mehrere hilfreiche Methoden:

response.status(): Ruft den HTTP-Statuscode ab.
response.headers(): Ruft die Antwortheader ab.
response.securityDetails(): Bietet SSL/TLS-Details.
response.timing(): Bietet Zeitdaten für die Navigation.

Diese Tools stellen sicher, dass Sie die Navigation validieren und alle Probleme effektiv behandeln können.

Seitenladeoptionen

Bei der Arbeit mit den Navigationsfunktionen von Puppeteer ist die Wahl der richtigen Wartestrategie entscheidend für eine zuverlässige Automatisierung. Ihre Skripte sollten erst ausgeführt werden, wenn die Seite vollständig bereit ist.

Wartebedingungen

Puppenspieler verwendet die waitUntil Parameter, um festzulegen, wann eine Seite als geladen gilt. Hier ein Beispiel:

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

Wenn Sie mehrere Wartebedingungen angeben, wartet Puppeteer, bis alle erfüllt sind, bevor fortgefahren wird. Hier ist eine Übersicht über häufige Wartebedingungen und ihren typischen Zeitablauf:

Wartebedingung	Ungefähre Zeit
domcontentloaded	1-2 Sekunden
Belastung	2-5 Sekunden
Netzwerkleerlauf2	3-8 Sekunden
Netzwerkleerlauf0	5-10 Sekunden

Wählen Sie Ihre Wartebedingungen basierend darauf, wie Ihre Seite strukturiert ist und wie schnell sie geladen wird.

Auswählen von Warteoptionen

Die richtige Wartebedingung hängt davon ab, ob es sich um eine statische oder dynamische Site handelt:

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

Stellen Sie sicher, dass der Timeout-Wert der Komplexität Ihrer gewählten Wartebedingung entspricht. Detailliertere Bedingungen, wie networkidle0, benötigen möglicherweise längere Timeouts, um Fehler zu vermeiden. Um Ihr Skript noch zuverlässiger zu machen, kombinieren Sie Wartebedingungen mit zusätzlichen Prüfungen.

Mehrere Wartezustände

Für eine höhere Genauigkeit können Sie Wartebedingungen mit bestimmten Elementprüfungen kombinieren:

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

Diese Methode stellt sicher, dass die Seite vollständig geladen wird und bestimmte Elemente verfügbar sind. Dadurch minimieren Sie Testfehler und verbessern die Zuverlässigkeit Ihrer Automatisierung.

Komplexe Navigationsmethoden

Dieser Abschnitt erläutert fortgeschrittene Techniken zur Verwaltung komplexer Navigation in Puppeteer. Aufbauend auf den grundlegenden Navigations- und Wartestrategien von zuvor konzentrieren sich diese Methoden auf die Bewältigung anspruchsvollerer Szenarien.

Fehlermanagement

Behandeln Sie Navigationsfehler effektiv, indem Sie Timeout-Prüfungen mit benutzerdefinierten Wiederherstellungsschritten kombinieren:

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

Dieser Ansatz stellt sicher, dass Zeitüberschreitungen verwaltet werden und die Seite bei Bedarf wiederhergestellt oder neu geladen werden kann.

SPA-Navigation

Die Navigation in Single-Page-Anwendungen (SPAs) erfordert eine andere Strategie, die häufig Routenänderungen und Framework-spezifisches Verhalten beinhaltet:

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

Diese Methode gewährleistet eine reibungslose Navigation in SPAs, indem auf bestimmte Änderungen im Anwendungsstatus gewartet wird.

Kombinierte Navigation

Bei Workflows mit mehreren Schritten können Sie Navigationstechniken kombinieren, um komplexe Szenarien zu bewältigen:

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

Bei mehrstufigen Prozessen können Sie auch parallelisierte Navigation und Aktionen verwenden:

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

Diese Techniken optimieren die Navigation in komplexen Arbeitsabläufen und gewährleisten eine effiziente Handhabung dynamischer Inhalte und mehrstufiger Prozesse.

Geschwindigkeit und Leistung

Die Steigerung der Navigationsgeschwindigkeit und -effizienz ist für die Erstellung effektiver Automatisierungs-Workflows unerlässlich. Im Folgenden finden Sie einige praktische Techniken zur Leistungssteigerung in verschiedenen Szenarien.

Browser-Cache-Nutzung

Mit diesen Schritten können Sie die Größe des Browser-Cache konfigurieren und das Caching effizient verwalten:

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

Sobald das Caching eingerichtet ist, können Sie sich auf die Verwaltung des Ressourcenladens konzentrieren, um eine noch schnellere Navigation zu ermöglichen.

Ressourcenmanagement

Um unnötiges Laden von Ressourcen zu vermeiden, blockieren Sie nicht unbedingt erforderliche Elemente wie Bilder und Schriftarten:

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

Dieser Ansatz hilft, Bandbreite zu sparen und Seiteninteraktionen zu beschleunigen.

Navigation mit mehreren Registerkarten

Die effiziente Verwaltung mehrerer Registerkarten kann die Leistung verbessern, indem die verfügbaren Ressourcen optimal genutzt werden. So verwalten Sie die Navigation über mehrere Registerkarten hinweg:

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

Um eine Überlastung der Ressourcen zu vermeiden, begrenzen Sie die Anzahl der geöffneten Tabs, indem Sie sie stapelweise verarbeiten:

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

Diese Batch-Methode gewährleistet einen reibungslosen Betrieb, ohne die Systemressourcen zu überlasten.

Fazit

Key Take Away

Um das Beste aus Puppeteer's herauszuholen page.goto() Konzentrieren Sie sich bei der Methode auf diese praktischen Strategien:

Verwenden Sie Latenode: Probieren Sie den Headless Browser auf Latenode aus, um URLs zu besuchen, Screenshots zu machen und Websites zu analysieren!
Wartestrategien: Passen Sie die waitUntil Option zu Ihrem Seitentyp für bessere Zuverlässigkeit.
Fehlerbehandlung: Benutzen try-catch Blöcke und Timeouts, um Navigationsfehler effektiv zu behandeln.
Ressourcenmanagement: Passen Sie die Browser-Cache-Einstellungen an und verwalten Sie das Laden von Ressourcen, um die Leistung zu steigern.
Single-Page-Anwendungen (SPAs): Paar page.goto() mit benutzerdefinierten Wartebedingungen, um Statusänderungen ordnungsgemäß zu verarbeiten.

Diese Ansätze bauen auf den zuvor besprochenen Techniken auf und helfen Ihnen, komplexe Szenarien zu meistern und die Leistung zu verbessern. So können Sie sie Schritt für Schritt anwenden:

Implementierungshandbuch

1. Grundlegende Navigation einrichten

<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. Integrieren Sie die Fehlerbehandlung

<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. Optimieren der Ressourcenauslastung

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

Seitennavigation mit Puppeteer meistern: Effektive Nutzung von „goto“ und Navigationsoptionen