Le guide ultime de l'automatisation et de la récupération de données sur le Web de Playwright pour 2023

Suciu Dan le 21 avril 2023

Le web scraping et l'automatisation vont de pair dans le monde numérique d'aujourd'hui. Qu'il s'agisse de sites de comparaison de prix ou d'entreprises axées sur les données, la capacité d'extraire et de traiter des données du web est devenue une partie intégrante de nombreuses entreprises en ligne.

Voici Playwright : un outil qui vous permet d'automatiser facilement les tâches de grattage et de test sur le web. Playwright vous permet de contrôler un navigateur sans tête, ce qui vous donne la possibilité de récupérer des données et d'interagir avec des sites web de manière rapide et efficace.

Dans cet article, nous allons explorer les capacités de Playwright pour l'automatisation et le scraping. Je vous montrerai comment installer et configurer Playwright, je vous fournirai des exemples de code pour les tâches courantes et j'aborderai des techniques avancées telles que la gestion des formulaires de connexion, la réalisation de captures d'écran, etc.

Qu'est-ce que le dramaturge ?

Playwright est une bibliothèque Node.js multiplateforme à code source ouvert, développée par Microsoft, qui vous permet d'automatiser des tâches dans un navigateur web. Elle est conçue pour être fiable et facile à utiliser, et prend en charge les fonctionnalités web modernes telles que CSS3 et JavaScript.

Playwright peut être utilisé pour des tâches telles que le test d'applications web, l'automatisation de tâches basées sur le web et le web scraping. Il est construit sur la base de la bibliothèque de test web populaire Puppeteer et vise à fournir une API plus conviviale et plus facile à maintenir.

Playwright prend en charge plusieurs navigateurs, notamment Chromium, Firefox et WebKit. Cela signifie que vous pouvez l'utiliser pour automatiser des tâches et récupérer des données sur différents navigateurs. Playwright vous permet de passer facilement d'un navigateur à l'autre et de tirer parti de leurs caractéristiques uniques.

Pour commencer

Pour installer et configurer Playwright sur une machine locale, vous devez avoir installé Node.js et npm (le gestionnaire de paquets pour Node.js). Si vous ne les avez pas encore, vous pouvez les télécharger et les installer à partir du site officiel de Node.js.

Une fois Node.js et npm installés, vous pouvez installer Playwright en suivant les étapes suivantes :

• Ouvrir un terminal ou une invite de commande
• Créer un dossier appelé `playwright` dans lequel se trouvera le code de notre projet
• Aller dans le dossier nouvellement créé
• Lancer la commande `npm init` pour initialiser le projet (et créer le fichier package.json)
• Installez les dépendances nécessaires en utilisant la commande `npm install playwright`

Le scraping de base avec Playwright

Créez un fichier appelé `index.js` et collez le code suivant :

const { chromium } = require('playwright');

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

    await page.goto('https://coinmarketcap.com');

    // Get the page content

    const content = await page.content();

    // Display the content

    console.log(content);

    // Close the browser

    await browser.close();

})();

Ce code lancera un navigateur Chromium sans tête, créera une nouvelle page, naviguera jusqu'à la page d'accueil de CoinMarketCap, obtiendra le contenu de la page, enregistrera le contenu, puis fermera le navigateur.

Vous pouvez utiliser un code similaire pour lancer les autres navigateurs pris en charge (Firefox et WebKit) en demandant le module approprié et en remplaçant "chromium" par "firefox" ou "webkit".

Recherche d'éléments pour l'extraction de données

Maintenant que nous disposons d'une base pour notre scraper, extrayons quelques données du site web cible. Dans cet exemple, nous allons récupérer le nom et le prix des 10 premières devises affichées sur la page.

Pour visualiser l'arbre DOM de la page d'accueil de CoinMarketCap, ouvrez le site web dans un navigateur, cliquez avec le bouton droit de la souris sur le nom d'une devise et sélectionnez "Inspecter". Cela ouvrira les outils de développement et affichera l'arbre DOM.

Choisir les bons sélecteurs est un art en soi. Dans le cas présent, l'élément de tableau que nous voulons sélectionner est le contexte. Ce tableau possède une classe appelée "cmc-table" qui nous sera utile.

Pour trouver le sélecteur du nom de la monnaie, nous devons descendre dans l'arbre du DOM. L'élément que nous recherchons se trouve dans l'élément `.cmc-table tbody tr td:nth-child(3) a .name-area p`.

En règle générale, il est important d'être aussi précis que possible lors de la sélection des éléments, afin de minimiser le nombre d'erreurs à traiter.

En utilisant la même technique, nous pouvons trouver le sélecteur pour le prix qui est `.cmc-table tbody tr td:nth-child(3) a span`. Pour résumer, voici notre liste de sélecteurs :

• Nom : `.cmc-table tbody tr td:nth-child(3) a .name-area p`
• Prix : `.cmc-table tbody tr td:nth-child(4) a span`

Extraction des données

En utilisant les sélecteurs que nous avons identifiés précédemment, nous allons extraire les données de la page web et les stocker dans une liste. La fonction utilitaire $$eval renvoie un tableau d'éléments correspondant à un sélecteur, évalué dans le contexte du DOM de la page.

Remplaçons la ligne console.log(content) ; par celle-ci :

// Extract the currencies data

const currencies = await page.$$eval('.cmc-table tbody tr:nth-child(-n+10)', trs => {

    const data = []

    trs.forEach(tr => {

        data.push({

            name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

            price: tr.querySelector('td:nth-child(4) a span').innerHTML,

        })

    })

    return data

})

// Display the results

console.log(currencies)

Ce code utilise la fonction $$eval pour sélectionner les 10 premiers éléments du tableau .cmc. Il itère ensuite sur ces éléments, sélectionne les cellules de données du tableau à l'aide des sélecteurs identifiés précédemment et extrait leur contenu textuel. Les données sont renvoyées sous la forme d'un tableau d'objets.

Vous pouvez en savoir plus sur la fonction $$eval dans la documentation officielle.

Le code complet se présente comme suit :

const { chromium } = require('playwright');

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

    await page.goto('https://coinmarketcap.com');

    // Extract the currencies data

    const currencies = await page.$$eval('.cmc-table tbody tr:nth-child(-n+10)', trs => {

   	 const data = []

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 })

   	 })

   	 return data

    })

    // Display the results

    console.log(currencies)

    // Close the browser

    await browser.close();

})();

Gestion du contenu dynamique

Nous n'avons récupéré que les 10 premières devises, car c'est le nombre de devises que CoinMarketCap charge lors du chargement initial de la page. Pour en extraire davantage, nous devons effectuer une action humaine qui consiste à faire défiler la page. Heureusement, Playwright est bien adapté à cette tâche.

Commençons par remanier la fonction $$eval que nous utilisions précédemment et par mettre en œuvre la pagination. Nous appellerons cette nouvelle fonction extractData :

const extractData = async (page, currentPage, perPage = 10) => {

}

Nous étendons le sélecteur :nth-child en sélectionnant les éléments par étapes (éléments de 0 à 10, de 11 à 21, de 22 à 32, etc). Nous définissons le sélecteur initial (10 premiers éléments) :

let selector = `:nth-child(-n+${currentPage * perPage})`;

Enfin, nous ajoutons la prise en charge des pages suivantes. Le code ressemble à ceci :

if(currentPage > 1) {

    selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

}

La fonction finale se présentera comme suit :

const extractData = async (page, currentPage, perPage = 10) => {

    let selector = `:nth-child(-n+${currentPage * perPage})`;

    if(currentPage > 1) {

   	 selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

    }

    return await page.$$eval(`.cmc-table tbody tr${selector}`, trs => {

   	 const data = [];

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 });

   	 });

   	 return data;

    });

};

Il est maintenant temps de revenir au code de notre scraper, d'implémenter le scroll et d'étendre l'extraction de données. Nous faisons tout le travail après cette ligne :

await page.goto('https://coinmarketcap.com') ;

Nous redéfinissons la variable des devises :

// Extract the currencies data

let currencies = await extractData(page, 1, 10);

À l'aide de la fonction evaluate, nous faisons défiler la page jusqu'à 1,5 fois la taille de la fenêtre. Cela déclenchera le chargement des éléments suivants du tableau :

// Scroll the page to a little more than the viewport height

await page.evaluate(() => {

    window.scrollTo(0, window.innerHeight * 1.5);

});

Cette seconde d'attente permettra à l'interface utilisateur de remplir le tableau avec les données extraites de l'API :

// Wait for the new elements to load

await page.waitForTimeout(1000);

Enfin, extrayons les données de la deuxième page et enregistrons les résultats :

// Extract the next 10 elements

currencies = [...currencies, ...await extractData(page, 2, 10)]

// Display the results

console.log(currencies)

Le code complet du scraper doit ressembler à ceci :

const { chromium } = require('playwright');

const extractData = async (page, currentPage, perPage = 10) => {

    let selector = `:nth-child(-n+${currentPage * perPage})`;

    if(currentPage > 1) {

   	 selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

    }

    return await page.$$eval(`.cmc-table tbody tr${selector}`, trs => {

   	 const data = [];

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 });

   	 })

   	 return data;

    })

};

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

    await page.goto('https://coinmarketcap.com');

    // Extract the currencies data

    let currencies = await extractData(page, 1, 10)

    // Scroll the page to a little more than the viewport height

    await page.evaluate(() => {

   	 window.scrollTo(0, window.innerHeight * 1.5);

    });

    // Wait for the new elements to load

    await page.waitForTimeout(1000);

    // Extract the next 10 elements

    currencies = [...currencies, ...await extractData(page, 2, 10)];

    // Display the results

    console.log(currencies);

    // Close the browser

    await browser.close();

})();

Pour résumer, le scraper ouvrira la page d'accueil de CoinMarketCap, extraira les données des 10 premières devises, fera défiler la page, extraira les données des 10 devises suivantes et affichera les résultats.

Vous devriez obtenir des résultats similaires à ceux-ci :

[

  { name: 'Bitcoin', price: '$16,742.58' },

  { name: 'Ethereum', price: '$1,244.45' },

  { name: 'Tether', price: '$0.9997' },

  { name: 'USD Coin', price: '$1.00' },

  { name: 'BNB', price: '$255.78' },

  { name: 'XRP', price: '$0.335' },

  { name: 'Binance USD', price: '$1.00' },

  { name: 'Dogecoin', price: '$0.07066' },

  { name: 'Cardano', price: '$0.2692' },

  { name: 'Polygon', price: '$0.7762' },

  { name: 'Dai', price: '$0.9994' },

  { name: 'Litecoin', price: '$73.80' },

  { name: 'Polkadot', price: '$4.59' },

  { name: 'Solana', price: '$12.95' },

  { name: 'TRON', price: '$0.0505' },

  { name: 'Shiba Inu', price: '$0.000008234' },

  { name: 'Uniswap', price: '$5.29' },

  { name: 'Avalanche', price: '$11.43' },

  { name: 'UNUS SED LEO', price: '$3.47' },

  { name: 'Wrapped Bitcoin', price: '$16,725.03' },

  { name: 'Cosmos', price: '$9.97' }

]

Techniques avancées

Maintenant que nous avons couvert les bases du scraping web avec Playwright, comme la création d'un scraper, la recherche de sélecteurs, l'extraction de données et la mise en œuvre du défilement infini, il est temps de se plonger dans certaines des fonctionnalités les plus avancées que Playwright a à offrir.

Il s'agit notamment de prendre des captures d'écran, de remplir des formulaires, d'utiliser des XPaths au lieu de sélecteurs de classe et d'utiliser des proxys pour contourner les blocages d'IP.

Faire une capture d'écran

L'un des avantages des captures d'écran lors du web scraping est qu'elles permettent de voir comment un site ou une application web se présente dans différents navigateurs et différentes résolutions.

Cela peut s'avérer particulièrement utile pour les développeurs, qui peuvent utiliser les captures d'écran pour déboguer les problèmes de mise en page et tester l'apparence de leurs applications web sur différentes plates-formes.

Pour réaliser une capture d'écran pleine page, vous pouvez utiliser la méthode screenshot de l'objet Page. En voici un exemple :

const screenshot = await page.screenshot() ;

Ce code prend une capture d'écran de la page entière et la renvoie sous forme de tampon. La fonction `screenshot` accepte des propriétés. Nous pouvons définir le chemin où nous voulons que la capture d'écran soit sauvegardée et si la capture d'écran doit contenir seulement la fenêtre de visualisation ou la page entière.

Voici le code complet :

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://coinmarketcap.com');

    // Take a full page screenshot and save the file

    await page.screenshot({

   	 path: "screenshot.png",

   	 fullPage: false

    });

    await browser.close();

})();

Vous pouvez stocker ce code dans un fichier appelé `screenshot.js` et exécuter le code avec la commande `node screenshot.js`. Après l'exécution, un fichier `screenshot.png` sera créé dans le dossier de votre projet.

Nous pouvons faire une capture d'écran d'une zone de la page en utilisant la propriété `clip`. Nous devons définir quatre propriétés :

• x : le décalage horizontal par rapport au coin supérieur gauche
• y : le décalage vertical par rapport au coin supérieur gauche
• width : la largeur de la zone
• hauteur : la hauteur de la zone

La fonction de capture d'écran avec la propriété clip définie se présente comme suit :

// Take a screenshot of a part of the page

await page.screenshot({

    path: "screenshot.png",

    fullPage: false,

    clip: {

        x: 50,

        y: 50,

        width: 320,

        height: 160

    }

});

Remplir les formulaires

L'un des avantages de l'utilisation de Playwright est qu'il vous permet d'accéder à des pages protégées. En émulant des actions humaines telles que cliquer sur des boutons, faire défiler la page et remplir des formulaires, Playwright permet de contourner les exigences de connexion et d'accéder à des contenus restreints.

Utilisons Playwright pour accéder à notre compte Reddit (si vous n'avez pas de compte Reddit, créez-en un dès maintenant !)

Allez sur la page de connexion et utilisez les techniques que nous avons apprises dans la section "Trouver des éléments pour l'extraction de données" pour extraire les classes pour les entrées de nom d'utilisateur et de mot de passe.

Les sélecteurs doivent ressembler à ceci :

• Entrée du nom d'utilisateur : `#loginUsername`
• Entrée du mot de passe : `#loginPassword`
• Bouton de soumission : `button[type="submit"]`

Utilisons ces sélecteurs dans le code. Créez un fichier `login.js` et collez ce code :

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://reddit.com/login');

    // Fill up the form

    await page.fill('#loginUsername', "YOUR_REDDIT_USERNAME");

    await page.fill('#loginPassword', "YOUR_REDDIT_PASSWORD");

    // Click the submit button

    await page.click('button[type="submit"]');

    // Wait for the new page to load

    await page.waitForNavigation()

    // Take a screenshot of the new page

    await page.screenshot({

   	 path: "reddit.png",

   	 fullPage: false

    });

    // Close the browser

    await browser.close();

})();

Pour exécuter le code et prendre une capture d'écran de la page protégée, entrez simplement node login.js dans le terminal. Après quelques secondes, une capture d'écran nommée reddit.png apparaîtra dans votre répertoire de projet.

Malheureusement, je ne peux pas partager avec vous la capture d'écran qui en résulte, car la majeure partie de mon compte Reddit n'est pas sûre pour le travail.

Pour en savoir plus sur l'authentification avec Playwright, consultez la documentation officielle.

Utilisation de XPath pour l'extraction de données

XPath peut être un choix plus stable pour le web scraping car il est moins susceptible de changer que les noms de classe. Des sites web comme Reddit et Google mettent souvent à jour leurs noms de classe, ce qui peut poser des problèmes aux scrapeurs qui en dépendent.

En revanche, les expressions XPath sont basées sur la structure du document HTML et sont moins susceptibles de changer. Cela signifie que vous pouvez utiliser XPath pour identifier des éléments de manière plus fiable et plus stable, même sur des sites web dont les noms de classe sont fréquemment mis à jour.

Par conséquent, l'utilisation de XPath peut vous aider à construire un scraper web plus robuste et plus résistant, moins susceptible de tomber en panne lors des mises à jour du site web.

Dans cet article, nous ne ferons qu'effleurer les possibilités offertes par XPath. Pour un guide plus complet, consultez cet article.

Retournons sur Reddit, ouvrons un subreddit et ouvrons les outils de développement. Je vais utiliser le subreddit /r/webscraping, mais vous pouvez choisir n'importe quel subreddit.

Si vous examinez l'arbre DOM, vous pouvez remarquer que les classes des éléments semblent être générées de manière aléatoire. L'utilisation de ces classes réduirait la fiabilité du scraper et nécessiterait une maintenance permanente.

Faites un clic droit sur la balise `h3`, allez à Copy, et sélectionnez `Copy XPath`. Le résultat devrait ressembler à ceci :

//*[@id="t3_104ocrd"]/div[3]/div[2]/div[1]/a/div/h3

Avant d'utiliser cette règle, supprimons la partie @id afin que le chemin couvre tous les messages et pas seulement le premier.

Il est temps de le mettre en œuvre. Créez le fichier `xpath.js` et collez ce code :

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://reddit.com/r/webscraping');

    const titles = await page.$$eval("//*/div[3]/div[2]/div[1]/a/div/h3", element => {

   	 const data = []

   	 element.forEach(el => {

   		 data.push(el.innerHTML)

   	 })

   	 return data

    })

    console.log(titles)

    // Close the browser

    await browser.close();

})();

Pour exécuter le code, utilisez la commande `node xpath.js`. Cela renverra une liste de titres du subreddit que vous avez sélectionné. Par exemple, ma liste ressemble à ceci :

[

 'A Year of Writing about Web Scraping in Review',

 'Linkedin Comments Scraper - Script to scrape comments (including name, profile picture, designation, email(if present), and comment) from a LinkedIn post from the URL of the post',

 'Best Proxy Lists?',

 'Sorry if this is the wrong sub, but is it possible to extract an email from an old youtube account?',

 'Looking for people with datasets for sale !',

 "Les noms de classes de reddit changent-ils périodiquement (ceux avec des lettres et des chiffres aléatoires, etc.) ?",

 "Scrape Videos from multiple websites",

 "Quelqu'un veut-il m'écrire un programme qui peut automatiser la génération d'un pdf d'un abonnement à un magazine ?',

 'Scraping a Dynamic Webpage with rSelenium',

 'Is there a way to convert LinkedIn Sales Navigator URLs to a LinkedIn public URL?',

 'Gurufocus / Implemented new cloudflare protection?',

 'Scraper to collect APY data from Web3 frontends'

]

Vous pouvez en savoir plus sur XPath dans la documentation officielle de Playwright. Vous la trouverez ici.

Le dramaturge contre les autres

Playwright, Puppeteer et Selenium WebDriver sont autant d'outils qui peuvent être utilisés pour le web scraping et l'automatisation.

Playwright, développé par Microsoft, est un outil plus récent qui se veut une solution "complète" pour l'automatisation du web. Il prend en charge plusieurs navigateurs (Chromium, Firefox et WebKit) et plusieurs langages de programmation (JavaScript, TypeScript, Python et C#).

Puppeteer est un outil développé par Google pour le web scraping et l'automatisation qui est construit sur le protocole Chrome DevTools. Il s'utilise principalement avec JavaScript et possède de nombreuses fonctionnalités, notamment la réalisation de captures d'écran, la génération de PDF et l'interaction avec le DOM.

Selenium WebDriver est un outil d'automatisation et de test web qui prend en charge plusieurs langages de programmation et navigateurs. Il est axé sur les tests et peut nécessiter plus d'installation que d'autres outils.

Comparaison des performances

La performance est un élément important à prendre en compte lors du choix d'un outil de web scraping. Dans cette section, nous allons comparer les performances de Playwright, Puppeteer et Selenium WebDriver pour voir quel outil est le plus rapide et le plus efficace.

Lors de nos tests, nous avons constaté que Playwright et Puppeteer avaient des temps de réponse presque identiques en ce qui concerne les tâches de web scraping et d'automatisation. Cependant, Selenium WebDriver était nettement plus lent au démarrage que les deux autres outils.

Conclusion

Le web scraping permet d'extraire et de traiter des données à partir de sites web, offrant ainsi une mine d'informations et de possibilités aux entreprises et aux particuliers. Voici quelques-uns des avantages du web scraping

• Réduction des coûts : Le web scraping peut être un moyen rentable de collecter des données, car il vous permet de ne pas avoir à acheter des bases de données ou des API coûteuses.
• Efficacité en termes de temps : L'extraction de grandes quantités de données peut être réalisée beaucoup plus rapidement que la collecte manuelle.
• Des données actualisées : Le web scraping peut vous aider à maintenir vos données à jour en vous permettant de récupérer et d'actualiser régulièrement vos sources de données.

Playwright est un outil puissant pour le scraping web, offrant une variété de fonctionnalités qui en font un choix de premier ordre pour de nombreux utilisateurs. Voici quelques-uns des avantages de l'utilisation de Playwright :

• Compatibilité avec Chromium : Playwright est construit sur Chromium, le projet de navigateur à source ouverte qui alimente Google Chrome, ce qui vous permet d'accéder aux dernières fonctionnalités de la plateforme web et à un large éventail de compatibilité avec les sites web.
• Prise en charge de plusieurs navigateurs : Playwright vous permet d'automatiser des tâches dans plusieurs navigateurs, notamment Chrome, Firefox et Safari.
• Facilité d'utilisation : L'API de Playwright est simple et intuitive, ce qui facilite le démarrage des tâches d'exploration du Web et d'automatisation.
• Polyvalence : Playwright peut être utilisé pour un large éventail de tâches, y compris l'exploration du Web, les tests et l'automatisation.

Dans l'ensemble, les avantages du scraping web et les avantages de l'utilisation de Playwright en font un outil essentiel pour tous ceux qui cherchent à extraire et à traiter des données à partir du web.

Si vous êtes à la recherche d'une solution plus simple pour vos besoins en web scraping, pensez à utiliser WebScrapingAPI. Notre service vous permet d'extraire des données de n'importe quel site web sans avoir à vous préoccuper de la complexité de la mise en place et de la maintenance d'un scraper web.

Avec WebScrapingAPI, il vous suffit d'envoyer une requête HTTP à notre API avec l'URL du site web que vous souhaitez récupérer, et nous vous renverrons les données dans le format de votre choix (JSON, HTML, PNG).

Notre API prend en charge toutes les tâches lourdes pour vous, y compris le contournement des CAPTCHA, la gestion des blocs d'adresses IP et la gestion du contenu dynamique.

Alors pourquoi perdre du temps et des ressources à construire et maintenir votre propre scraper web quand vous pouvez utiliser WebScrapingAPI et obtenir les données dont vous avez besoin avec seulement quelques requêtes API simples ? Essayez-nous et voyez comment nous pouvons vous aider à rationaliser vos besoins en matière de web scraping.