Seitennavigation mit Puppeteer meistern: page.goto und Navigationsoptionen effektiv nutzen

Puppeteer vereinfacht die Webautomatisierung mit Tools zur Steuerung von Chrome- und Chromium-Browsern. Die Methode page.goto() ist zentral für die effektive Navigation auf Seiten, ob für Tests, Scraping oder die Automatisierung von Aufgaben. Das erwartet Sie:

• Testen Sie die Headless-Browser-Vorlage auf Latenode, um die Website-Navigation, Screenshot-Erstellung und Analyse zu automatisieren!
• Wichtige Funktionen von page.goto(): Navigieren Sie zu URLs mit Optionen wie timeout, waitUntil und referer.
• Warte-Strategien: Nutzen Sie Bedingungen wie domcontentloaded, load, networkidle0 oder networkidle2 für dynamische oder statische Seiten.
• Fehlerbehandlung: Fangen Sie Navigationsfehler ab und verwalten Sie Timeouts mit try-catch-Blöcken.
• Fortgeschrittene Techniken: Verwalten Sie SPAs, bearbeiten Sie mehrstufige Workflows und optimieren Sie die Performance durch Caching und Ressourcensteuerung.

Kurzübersicht der Warteoptionen

Wichtigste Erkenntnis: Stimmen Sie Ihre Wartebedingungen und Fehlerbehandlung auf den Seitentyp ab, um eine zuverlässige Automatisierung zu gewährleisten. Nutzen Sie fortgeschrittene Methoden für SPAs und mehrstufige Prozesse, um komplexe Workflows effizient zu bearbeiten.

sbb-itb-23997f1

Wie navigieren Sie mit Puppeteer auf Latenode zu bestimmten URLs?

Mit Latenode können Sie einen Puppeteer-basierten Headless Browser direkt in Ihren Automatisierungs-Workflows verwenden, um die Website-Analyse und das Monitoring von Seiten einzurichten. Sie finden die Integration ganz einfach in der Node-Bibliothek, können den benötigten Code hinzufügen und sie mit anderen Diensten verbinden – Ihnen stehen mehr als 300 App-Integrationen zur Verfügung.

Jetzt Vorlage testen: Website-Erkenntnisse mit Headless Browser und ChatGPT erfassen, analysieren und teilen

Im Gegensatz zu herkömmlichen Scrapern erfasst sie die tatsächliche visuelle Struktur und erkennt sowohl Designelemente als auch Textblöcke. Testen Sie den Headless Browser jetzt in dieser Vorlage! Dieser Workflow erfasst und analysiert nicht nur Website-Daten, sondern stellt auch sicher, dass Sie Erkenntnisse für eine nahtlose Kommunikation einfach teilen können.

• URL festlegen: Geben Sie die Website-URL ein, die Sie auf visuelle Erkenntnisse analysieren möchten.
• Screenshot erfassen: Ein Headless Browser navigiert zur Website und erstellt einen Screenshot.
• Mit ChatGPT analysieren: Der Screenshot wird von ChatGPT analysiert, um wichtige Erkenntnisse zu extrahieren und zusammenzufassen.
• Erkenntnisse teilen: Integrieren Sie anschließend Ihren Messenger, um eine Nachricht mit der Analyse zu senden und klare Details direkt in Ihren Posteingang zu erhalten.

Wie verwenden Sie page.goto() in Puppeteer?

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

Methodenparameter

Die Methode page.goto() akzeptiert mehrere Parameter, um die Navigation anzupassen:

await page.goto(url, {
  timeout: 30000,
  waitUntil: 'networkidle0',
  referer: 'https://example.com'
});

Hier ist eine Übersicht der wichtigsten Parameter:

• url: Die URL, zu der navigiert werden soll. Dieser Parameter ist erforderlich und kann ein absoluter oder relativer Pfad sein.
• timeout: Legt die maximale Zeit in Millisekunden fest, die auf das Laden der Seite gewartet wird. Der Standardwert beträgt 30.000 ms.
• waitUntil: Definiert, wann die Navigation als abgeschlossen gilt.
• referer: Legt einen benutzerdefinierten Referer-Header für die Anfrage fest.

Mit diesen Optionen steuern Sie, wie und wann eine Seite als vollständig geladen gilt, und sorgen so für eine präzise und zuverlässige Navigation.

Verarbeitung der Antwort

Sobald die Navigationsparameter festgelegt sind, ist die Verarbeitung der Antwort der nächste Schritt. Die Methode page.goto() gibt ein Promise zurück, das zu einem Response-Objekt aufgelöst wird. Dieses Objekt liefert Details zur Navigation:

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
}

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

• Statuscodes prüfen: Verwenden Sie response.status(), um den HTTP-Status zu bestätigen.
• Fehler behandeln: Nutzen Sie try-catch-Blöcke, um fehlgeschlagene Navigationen abzufangen.
• Header analysieren: Greifen Sie mit response.headers() auf Antwort-Header zu.

Für die Fehlerbehandlung kapseln Sie den Aufruf von page.goto() in einen try-catch-Block:

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

Das Response-Objekt enthält mehrere hilfreiche Methoden:

• response.status(): Ruft den HTTP-Statuscode ab.
• response.headers(): Ruft die Antwort-Header ab.
• response.securityDetails(): Liefert SSL/TLS-Details.
• response.timing(): Liefert Zeitdaten zur Navigation.

Mit diesen Tools können Sie die Navigation validieren und Probleme effektiv behandeln.

Optionen zum Laden von Seiten

Bei der Arbeit mit den Navigationsfunktionen von Puppeteer ist die Wahl der richtigen Warte-Strategie entscheidend für zuverlässige Automatisierungen. Ihre Skripte sollten erst fortfahren, wenn die Seite vollständig bereit ist.

Wartebedingungen

Puppeteer verwendet den Parameter waitUntil, um zu definieren, wann eine Seite als geladen gilt. Hier ein Beispiel:

const navigationOptions = { waitUntil: ['load', 'networkidle0'], timeout: 30000 };
await page.goto('https://example.com', navigationOptions);

Wenn Sie mehrere Wartebedingungen angeben, wartet Puppeteer, bis alle eintreten, bevor es fortfährt. Hier ist eine Übersicht häufiger Wartebedingungen und ihrer typischen Dauer:

Wählen Sie Ihre Wartebedingungen danach aus, wie Ihre Seite aufgebaut ist und wie schnell sie lädt.

Warteoptionen auswählen

Die richtige Wartebedingung hängt davon ab, ob Sie mit einer statischen oder dynamischen Website arbeiten:

// For a static site
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 15000 });

// For a dynamic site
await page.goto(url, { waitUntil: 'networkidle0', timeout: 45000 });

Stellen Sie sicher, dass der Timeout-Wert zur Komplexität der gewählten Wartebedingung passt. Detailliertere Bedingungen wie networkidle0 benötigen möglicherweise längere Timeouts, um Fehler zu vermeiden. Für noch zuverlässigere Skripte kombinieren Sie Wartebedingungen mit zusätzlichen Prüfungen.

Mehrere Wartezustände

Für eine höhere Genauigkeit können Sie Wartebedingungen mit Prüfungen bestimmter Elemente kombinieren:

await page.goto(url, { waitUntil: 'load' });
await page.waitForSelector('#main-content');
await page.waitForFunction(() => {
    return document.readyState === 'complete' && !document.querySelector('.loading-spinner');
});

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

Komplexe Navigationsmethoden

Dieser Abschnitt erläutert fortgeschrittene Techniken zur Verwaltung komplexer Navigation in Puppeteer. Aufbauend auf den zuvor beschriebenen grundlegenden Navigations- und Warte-Strategien konzentrieren sich diese Methoden auf anspruchsvollere Anwendungsfälle.

Fehlerverwaltung

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

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

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

SPA-Navigation

Die Navigation in Single-Page Applications (SPAs) erfordert eine andere Strategie, die häufig Routenänderungen und frameworkspezifische Verhaltensweisen umfasst:

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

Diese Methode gewährleistet eine reibungslose Navigation in SPAs, indem sie auf spezifische Änderungen des Anwendungsstatus wartet.

Kombinierte Navigation

Für Workflows mit mehreren Schritten können Sie Navigationstechniken kombinieren, um komplexe Anwendungsfälle zu bewältigen:

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

Für mehrstufige Prozesse können Sie außerdem parallelisierte Navigation und Aktionen einsetzen:

await page.goto(baseUrl);

await Promise.all([
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
    page.click('button[type="submit"]')
]);

Diese Techniken optimieren die Navigation in komplexen Workflows und gewährleisten eine effiziente Verarbeitung dynamischer Inhalte und mehrstufiger Prozesse.

Geschwindigkeit und Performance

Eine höhere Navigationsgeschwindigkeit und Effizienz ist entscheidend für effektive Automatisierungs-Workflows. Im Folgenden finden Sie praktische Techniken zur Verbesserung der Performance in verschiedenen Anwendungsfällen.

Nutzung des Browser-Cache

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

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

Sobald das Caching eingerichtet ist, können Sie die Ressourcenverwaltung optimieren, um die Navigation weiter zu beschleunigen.

Ressourcenverwaltung

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

await page.setRequestInterception(true);
page.on('request', request => {
  if (request.resourceType() === 'image' || request.resourceType() === 'font') {
    request.abort();
  } else {
    request.continue();
  }
});

Dieser Ansatz spart Bandbreite und beschleunigt Seiteninteraktionen.

Navigation mit mehreren Tabs

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

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

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

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

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

Fazit

Wichtigste Erkenntnisse

Um die Methode page.goto() von Puppeteer optimal zu nutzen, konzentrieren Sie sich auf diese praktischen Strategien:

• Latenode verwenden: Testen Sie den Headless Browser auf Latenode, um URLs aufzurufen, Screenshots zu erstellen und Websites zu analysieren!
• Warte-Strategien: Stimmen Sie die Option waitUntil auf Ihren Seitentyp ab, um die Zuverlässigkeit zu steigern.
• Fehlerbehandlung: Verwenden Sie try-catch-Blöcke und Timeouts, um Navigationsfehler effektiv zu behandeln.
• Ressourcenverwaltung: Passen Sie Browser-Cache-Einstellungen an und verwalten Sie das Laden von Ressourcen, um die Performance zu steigern.
• Single-Page Applications (SPAs): Kombinieren Sie page.goto() mit benutzerdefinierten Wartebedingungen, um Statusänderungen korrekt zu behandeln.

Diese Ansätze bauen auf den zuvor beschriebenen Techniken auf, helfen Ihnen bei der Navigation in komplexen Anwendungsfällen und verbessern die Performance. So setzen Sie sie Schritt für Schritt um:

Implementierungsleitfaden

1. Grundlegende Navigation einrichten

const page = await browser.newPage();
await page.setDefaultNavigationTimeout(30000);
await page.goto(url, {
  waitUntil: 'networkidle0',
  timeout: 30000
});

2. Fehlerbehandlung integrieren

try {
  await page.goto(url, {
    waitUntil: ['load', 'networkidle0'],
    timeout: 30000
  });
} catch (error) {
  if (error instanceof TimeoutError) {
    await page.evaluate(() => window.stop());
    throw error;
  }
}

3. Laden von Ressourcen optimieren

await page.setRequestInterception(true);
await page.setCacheEnabled(true);
page.on('request', request => {
  if (request.resourceType() === 'image') {
    request.abort();
  } else {
    request.continue();
  }
});