Comment trouver des éléments par sélecteur CSS dans Puppeteer ?

Les sélecteurs CSS sont l’un des moyens les plus efficaces pour analyser les pages HTML lors du Scraping web. Dans Node.js et Puppeteer, vous pouvez utiliser les sélecteurs CSS avec les méthodes page.$ et page.$$. Ces méthodes vous permettent d’interagir avec les éléments de la page en utilisant la syntaxe CSS habituelle.

Vous trouverez ci-dessous un exemple de code illustrant comment utiliser ces méthodes pour trouver des éléments sur une page, accompagné de commentaires détaillés pour vous aider à comprendre chaque étape.

      const puppeteer = require('puppeteer');

async function run() {
    // Lancer une nouvelle instance de navigateur
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Accéder à la page Web cible
await page.goto("https://httpbin.dev/html", { waitUntil: 'domcontentloaded' });

// Obtenir le premier élément correspondant
const firstParagraph = await page.$("p");
console.log("Premier élément de paragraphe trouvé :", firstParagraph);

    // Obtenir tous les éléments correspondants
    const allParagraphs = await page.$$("p");
    console.log("Nombre total de paragraphes trouvés :", allParagraphs.length);

    // Extraire et enregistrer le contenu textuel du premier paragraphe
    const firstParagraphText = await page.$eval("p", element => element.innerText);
    console.log("Texte du premier paragraphe :", firstParagraphText);

    // Extraire et enregistrer l'attribut href de la première balise d'ancrage
    const firstAnchorHref = await page.$eval("a", element => element.href);
    console.log("Href de la première balise d'ancrage :", firstAnchorHref);

    // Compter le nombre total d'éléments de paragraphe
const paragraphCount = await page.$$eval("p", elements => elements.length);
console.log("Nombre total d'éléments de paragraphe :", paragraphCount);

// Modifier le texte interne du premier paragraphe
    await page.$eval("p", element => element.innerText = "Nouveau texte pour le premier paragraphe");  
    console.log("Modification du texte du premier paragraphe.");  
  
    // Fermer le navigateur  
    await browser.close();  
}  
  
// Exécuter la fonction  
run();

Dans cet exemple, nous effectuons les actions suivantes :

Lancer une nouvelle instance de navigateur: cela démarre un nouveau navigateur contrôlé par Puppeteer.
Naviguer vers la page Web cible: la méthode goto navigue vers l’URL spécifiée et attend que le contenu DOM de la page soit entièrement chargé.
Obtenir le premier élément correspondant: la méthode page.$ récupère le premier élément qui correspond au sélecteur CSS p.
Récupérer tous les éléments correspondants: la méthode page.$$ récupère tous les éléments qui correspondent au sélecteur CSS p.
Extraire et enregistrer le contenu textuel du premier paragraphe: la méthode page.$eval évalue une fonction dans le contexte du premier élément correspondant et renvoie son innerText.
Extraire et enregistrer l’attribut href de la première balise d’ancrage: la méthode page.$eval récupère l’attribut href de la première balise a.
Compter le nombre total d’éléments de paragraphe: la méthode page.$$eval évalue une fonction dans le contexte de tous les éléments correspondants et renvoie le nombre total.
Modifier le texte interne du premier paragraphe: la méthode page.$eval modifie l'innerText du premier élément p correspondant.
Fermer le navigateur: cela garantit que l’instance du navigateur est correctement fermée une fois le script terminé.

Remarque :

Il est essentiel d’attendre que la page soit entièrement chargée avant d’essayer de trouver des éléments, en particulier pour les pages avec un contenu dynamique. Pour plus d’informations, consultez Comment attendre le chargement d’une page dans Puppeteer ?.

Pour découvrir d’autres méthodes de localisation d’éléments, vous pouvez également consulter Comment trouver des éléments par XPath dans Puppeteer ?.

Conclusion

L’utilisation des sélecteurs CSS avec Puppeteer rend les tâches de Scraping web et d’automatisation simples et efficaces. En comprenant et en exploitant ces méthodes, vous pouvez interagir efficacement avec les éléments des pages web et extraire des données précieuses.

Essai gratuit Commencez avec Google