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. Das 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, networkidle0, oder auch 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

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?

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

Methodenparameter

Das page.goto() Die Methode akzeptiert mehrere Parameter zur Anpassung der Navigation:

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

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.

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:

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

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

const navigationOptions = { waitUntil: ['load', 'networkidle0'], timeout: 30000 };
await page.goto('https://example.com', 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:

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:

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

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

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

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

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

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

await page.goto(baseUrl);

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

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:

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

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

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:

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 Anzahl der geöffneten 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 die Systemressourcen zu überlasten.

Schlussfolgerung

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

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

2. Integrieren Sie die Fehlerbehandlung

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

3. Optimieren der Ressourcenauslastung

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

Ähnliche Blog-Beiträge

• Headless Browser in C#: Setup und Codebeispiele
• Installieren und Konfigurieren von Puppeteer: Lösen häufiger Abhängigkeits- und Chromium-Probleme
• Screenshots mit Puppeteer erstellen: Ganzseitige Aufnahmen, Elemente und Größenoptimierung