Maîtriser la navigation entre les pages avec Puppeteer : utilisation efficace de goto et des options de navigation

Puppeteer simplifie l’automatisation web en proposant des outils pour contrôler les navigateurs Chrome et Chromium. La méthode page.goto() est essentielle pour naviguer efficacement entre les pages, que ce soit pour les tests, le scraping ou l’automatisation de tâches. Voici ce que vous découvrirez :

• Essayez le modèle Navigateur headless sur Latenode pour automatiser la navigation sur les sites web, les captures d’écran et l’analyse !
• Fonctionnalités clés de page.goto() : naviguez vers des 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 : interceptez les échecs de navigation et gérez les délais d’attente avec des blocs try-catch.
• Techniques avancées : gérez les SPA, traitez les workflows en plusieurs étapes et optimisez les performances grâce au cache et au contrôle des ressources.

Vue d’ensemble rapide des options d’attente

À retenir : adaptez vos conditions d’attente et votre gestion des erreurs au type de page afin d’obtenir une automatisation fiable. Explorez les méthodes avancées pour les SPA et les processus en plusieurs étapes afin de gérer efficacement les workflows complexes.

sbb-itb-23997f1

Comment naviguer vers des URL spécifiques avec Puppeteer sur Latenode ?

Latenode vous permet d’utiliser un navigateur headless propulsé par Puppeteer directement dans vos workflows d’automatisation afin de configurer l’analyse de sites web et le suivi des pages. Vous pouvez facilement trouver l’intégration dans la bibliothèque de nœuds, ajouter le code dont vous avez besoin et le connecter à d’autres services : plus de 300 intégrations d’applications sont disponibles.

Essayez le modèle DÈS MAINTENANT : capturez, analysez et partagez des informations sur les sites web avec Navigateur headless et ChatGPT

Contrairement aux scrapers classiques, il capture la structure visuelle réelle en reconnaissant à la fois les éléments de design et les blocs de texte. Essayez Navigateur headless dans ce modèle dès maintenant ! Ce workflow ne se contente pas de capturer et d’analyser les données d’un site web : il vous permet également de partager facilement les informations obtenues pour une communication fluide.

• Définissez l’URL : saisissez l’URL du site web que vous souhaitez analyser pour obtenir des informations visuelles.
• Capturez la capture d’écran : un navigateur headless accède au site web et effectue une capture d’écran.
• Analysez avec ChatGPT : ChatGPT analyse la capture d’écran afin d’extraire et de résumer les informations clés.
• Partagez les informations : intégrez ensuite votre messagerie pour envoyer un message contenant l’analyse et recevoir des détails clairs directement dans votre boîte de réception.

Comment utiliser page.goto() dans Puppeteer ?

La méthode page.goto() de Puppeteer sert à naviguer vers des URL spécifiques.

Paramètres de la méthode

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

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

Voici le détail des principaux paramètres :

• url : l’URL vers laquelle naviguer. Ce paramètre est obligatoire et peut être un chemin absolu ou relatif.
• timeout : définit le délai maximal (en millisecondes) d’attente du chargement de la page. La valeur par défaut est de 30 000 ms.
• waitUntil : définit le moment où la navigation est considérée comme terminée.
• referer : définit un en-tête referer personnalisé pour la requête.

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

Gestion de la réponse

Une fois les paramètres de navigation définis, la gestion de la réponse est l’étape suivante. La méthode page.goto() renvoie une Promise qui se résout en objet Response. Cet objet fournit des informations détaillées sur la 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
}

Voici comment vérifier la navigation :

• Vérifiez les codes d’état : utilisez response.status() pour confirmer l’état HTTP.
• Gérez les erreurs : utilisez des blocs try-catch pour intercepter les échecs de navigation.
• Analysez les en-têtes : accédez aux en-têtes de réponse avec response.headers().

Pour gérer les erreurs, encapsulez l’appel à page.goto() dans un bloc try-catch :

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

L’objet de réponse comprend 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() : fournit les données de durée de navigation.

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

Options de chargement des pages

Lorsque vous utilisez les fonctionnalités de navigation de Puppeteer, choisir la bonne stratégie d’attente est essentiel pour créer des automatisations fiables. Vos scripts ne doivent continuer que lorsque la page est entièrement prête.

Conditions d’attente

Puppeteer utilise le paramètre waitUntil pour définir le moment où une page est considérée comme chargée. Voici un exemple :

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

Si vous spécifiez plusieurs conditions d’attente, Puppeteer attend qu’elles se produisent toutes avant de continuer. Voici les conditions d’attente courantes et leur durée habituelle :

Choisissez vos conditions d’attente selon la structure de votre page et sa vitesse de chargement.

Sélection des options d’attente

La bonne condition d’attente dépend du fait que vous travaillez avec un site statique ou dynamique :

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

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

Assurez-vous que la valeur du délai d’attente correspond à la complexité de la condition choisie. Des conditions plus détaillées, telles que networkidle0, peuvent nécessiter des délais plus longs 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 :

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

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

Méthodes de navigation complexes

Cette section présente des techniques avancées pour gérer la navigation complexe dans Puppeteer. En s’appuyant sur les stratégies de navigation et d’attente de base abordées précédemment, ces méthodes se concentrent sur les situations plus exigeantes.

Gestion des erreurs

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

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

Cette approche garantit que les délais d’attente sont gérés et que la page peut être récupérée ou rechargée selon les besoins.

Navigation dans les SPA

La navigation dans les applications monopages (SPA) nécessite une stratégie différente, impliquant souvent des changements de route et des comportements propres aux frameworks :

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

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 workflows comprenant plusieurs étapes, vous pouvez combiner des techniques de navigation pour gérer des situations complexes :

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

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

await page.goto(baseUrl);

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

Ces techniques rationalisent la navigation dans les workflows complexes et assurent une gestion efficace du contenu dynamique ainsi que des processus en plusieurs étapes.

Rapidité et performances

Améliorer la rapidité et l’efficacité de la navigation est essentiel pour créer des workflows d’automatisation performants. Vous trouverez ci-dessous des techniques pratiques pour optimiser les performances dans différents contextes.

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 :

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

Une fois le cache configuré, vous pouvez vous concentrer sur la gestion du chargement des ressources pour accélérer encore davantage la navigation.

Gestion des ressources

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

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

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

Navigation multi-onglets

La gestion efficace de plusieurs onglets peut améliorer les performances en exploitant au mieux les ressources disponibles. Voici comment gérer la navigation sur plusieurs onglets :

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

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

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

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

Conclusion

Points clés à retenir

Pour exploiter au mieux la méthode page.goto() de Puppeteer, concentrez-vous sur les stratégies pratiques suivantes :

• Utilisez Latenode : Essayez Navigateur headless sur Latenode pour visiter des URL, réaliser des captures d’écran et analyser des sites web !
• Stratégies d’attente : adaptez l’option waitUntil à votre type de page pour une meilleure fiabilité.
• Gestion des erreurs : utilisez des blocs try-catch et des délais d’attente pour gérer efficacement les erreurs de navigation.
• Gestion des ressources : ajustez les paramètres du cache du navigateur et gérez le chargement des ressources pour améliorer les performances.
• Applications monopages (SPA) : associez page.goto() à des conditions d’attente personnalisées afin de gérer correctement les changements d’état.

Ces approches s’appuient sur les techniques abordées précédemment et vous aident à naviguer dans des situations complexes tout en améliorant les performances. Voici comment les appliquer étape par étape :

Guide d’implémentation

1. Configurez une navigation de base

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

2. Intégrez la gestion des erreurs

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

3. Optimisez le chargement des ressources

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