Tutoriel de Scraping Web HTML

Découvrez comment maîtriser le scraping web HTML pour collecter efficacement des données depuis des sites web, idéal pour améliorer vos projets et stratégies.
18 min de lecture
HTML web scraping main blog image

Si vous vous intéressez au scraping web, comprendre le HTML est essentiel car chaque site web est construit avec ce langage. Le scraping web peut être utilisé dans toutes sortes de scénarios et peut aider à collecter des données de sites web sans API, surveiller les prix des produits, constituer des listes de prospects, mener des recherches académiques, et bien plus encore.

Dans cet article, vous apprendrez les bases du HTML et comment extraire, analyser et traiter des données à l’aide de Python.

Intéressé par un guide approfondi sur le scraping web Python ? Cliquez ici.

Comment scraper des sites web et extraire le HTML

Avant de commencer ce tutoriel, prenons un moment pour passer en revue les composants essentiels du HTML.

Introduction au HTML

Le HTML est un ensemble de balises qui indiquent à un navigateur la structure et les éléments d’un site web. Par exemple, <h1> Texte </h1> indique au navigateur que le texte suivant la balise est un titre, et <a href=""> lien </a> identifie un hyperlien.

Un attribut HTML fournit des informations supplémentaires sur une balise. Par exemple, l’attribut href de la balise <a> </a> vous donne des informations sur l’URL de la page vers laquelle pointe l’attribut.

Les classes et les IDs sont des attributs essentiels pour identifier avec précision les éléments d’une page. Les classes regroupent des éléments similaires pour les styliser de manière cohérente avec CSS ou les manipuler uniformément avec JavaScript. Les classes sont ciblées à l’aide de .nom-de-classe.

Sur le site W3Schools, les groupes de classes ressemblent à ceci :

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

Vous pouvez voir comment chaque titre et bloc de ville est enveloppé par un div ayant la même classe city.

En revanche, les IDs sont uniques à chaque élément (c’est-à-dire que deux éléments ne peuvent pas avoir le même ID). Par exemple, les H1 suivants ont des IDs uniques et peuvent être stylisés/manipulés de manière unique :

<h1 id="header1">Hello World!</h1>

<h1 id="header2">Lorem Ipsum Dolor</h1>

La syntaxe pour cibler des éléments avec des IDs est #nom-id.

Maintenant que vous connaissez les bases du HTML, commençons le scraping web.

Configurer votre environnement de scraping

Ce tutoriel utilise Python car il offre de nombreuses bibliothèques de scraping HTML et le langage est facile à apprendre. Pour vérifier si Python est installé sur votre ordinateur, exécutez la commande suivante dans PowerShell (Windows) ou votre terminal (macOS) :

python3

Si Python est installé, vous verrez votre numéro de version ; sinon, vous recevrez une erreur. Allez-y et installez Python si vous ne l’avez pas déjà.

Ensuite, créez un dossier appelé WebScraper et créez un fichier à l’intérieur du dossier WebScraper nommé scraper.py. Puis ouvrez-le dans votre environnement de développement intégré (IDE) de votre choix. Visual Studio Code est utilisé ici :

Une image montrant où VSC est utilisé

Un IDE est une application polyvalente qui permet aux programmeurs d’écrire du code, de le déboguer, de tester des programmes, de créer des automatisations, et bien plus encore. Vous l’utiliserez ici pour coder votre Scraper HTML.

Ensuite, vous devez séparer votre installation Python globale de votre projet de scraping en créant un environnement virtuel. Cela permet d’éviter les conflits de dépendances et de garder l’ensemble de l’application organisée.

Pour ce faire, installez la bibliothèque virtualenv à l’aide de la commande suivante :

pip3 install virtualenv

Accédez à votre dossier de projet :

cd WebScraper

Puis créez un environnement virtuel :

 python<version> -m venv <virtual-environment-name>

Cette commande crée un dossier pour tous les packages et scripts à l’intérieur de votre dossier de projet :

Commande pour créer un dossier pour tous les packages et scripts

Maintenant, vous devez activer l’environnement virtuel à l’aide de l’une des commandes suivantes (selon votre plateforme) :

source <virtual-environment-name>/bin/activate #Sur MacOS et Linux

<virtual-environment-name>/Scripts/activate.bat #Sur CMD

<virtual-environment-name>/Scripts/Activate.ps1 #Sur Powershell

Après une activation réussie, vous verrez le nom de votre environnement virtuel sur le côté gauche de l’écran :

Le nom de votre environnement virtuel

Maintenant que votre environnement virtuel est activé, vous devez installer une bibliothèque de scraping web. Il existe de nombreuses options, notamment PlaywrightSeleniumBeautiful Soup, et Scrapy. Ici, vous utilisez Playwright car il est facile à utiliser, prend en charge plusieurs navigateurs, peut gérer le contenu dynamique et offre un mode sans interface graphique (scraping sans interface utilisateur graphique (GUI)).

Exécutez pip install pytest-playwright pour installer Playwright ; puis installez les navigateurs requis avec playwright install.

Après avoir installé Playwright, vous êtes prêt à commencer le scraping web.

Extraire le HTML d’un site web

La première étape de tout projet de scraping web consiste à identifier le site web que vous souhaitez scraper. Ici, vous utilisez ce site de test.

Ensuite, vous devez identifier les informations que vous souhaitez extraire de la page. Dans ce cas, il s’agit du contenu HTML complet de la page.

Une fois que vous avez identifié les informations que vous essayez d’extraire, vous pouvez commencer à coder le Scraper. En Python, la première étape consiste à importer les bibliothèques requises pour Playwright. Playwright vous permet d’importer deux types d’API : sync et async. La bibliothèque async est utilisée uniquement lors de l’écriture de code asynchrone, vous importez donc la bibliothèque sync avec la commande suivante :

from playwright.sync_api import sync_playwright

Après avoir importé la bibliothèque sync, vous devez déclarer une fonction Python à l’aide de l’extrait de code suivant :

def main():
    #Le reste du code sera à l'intérieur de cette fonction

Comme vous pouvez le voir dans la note précédente, vous écrivez votre code de scraping web à l’intérieur de cette fonction.

En général, pour obtenir des informations d’un site web, vous ouvrez un navigateur web, créez un nouvel onglet et visitez ce site web. Pour scraper le site, vous devez traduire ces actions en code, c’est ce pour quoi vous utiliserez Playwright. Leur documentation montre que vous pouvez appeler la sync_api importée précédemment et ouvrir un navigateur avec cet extrait :

with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)

En ajoutant headless=False entre les crochets, vous pouvez voir le contenu du site web.

Après avoir ouvert votre navigateur, ouvrez un nouvel onglet et visitez l’URL cible :

page = browser.new_page()
try:
  page.goto("https://webscraper.io/test-sites/e-commerce/static")
except:
  print("Error")

Remarque : Les lignes précédentes doivent être ajoutées sous les lignes qui ont lancé le navigateur. Tout ce code va à l’intérieur de la fonction principale et dans un seul fichier.

Cet extrait de code enveloppe la fonction goto() dans un bloc try-except pour une meilleure gestion des erreurs.

Lorsque vous entrez l’URL d’un site dans la barre de recherche, vous devez attendre qu’il se charge. Pour reproduire cela dans le code, vous pouvez utiliser ce qui suit :

page.wait_for_timeout(7000) #valeur en millisecondes entre crochets

Remarque : Ces lignes précédentes doivent être ajoutées sous les lignes précédentes.

Enfin, il est temps d’ extraire tout le contenu HTML de la page à l’aide de cette ligne de code :

print(page.content())

Le code complet pour extraire le HTML d’une page ressemble à ceci :


from playwright.sync_api import sync_playwright

def main():
  with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)   
        page = browser.new_page()
        try:
            page.goto("https://webscraper.io/test-sites/e-commerce/static")
        except:
            print("Error")

        page.wait_for_timeout(7000)
        print(page.content())

main()

Dans Visual Studio Code, le HTML extrait ressemble à ceci :

Le HTML extrait dans VSC

Extraire le HTML à l’aide d’attributs spécifiques

Précédemment, vous avez extrait tous les éléments de la page web du Scraper Web ; cependant, le scraping web n’est utile que si vous vous limitez à extraire uniquement les informations dont vous avez besoin. Dans cette section, vous extrayez uniquement les titres de tous les ordinateurs portables sur la première page du site web :

Affichage des titres que nous allons extraire du site web cible

Pour extraire des éléments spécifiques, vous devez comprendre la structure du site web cible. Vous pouvez le faire en faisant un clic droit et en sélectionnant l’option Inspecter comme ceci :

Cliquez sur Inspecter sur le site web cible

Vous pouvez également utiliser ces raccourcis clavier :

  • Pour macOS, utilisez Cmd + Option + I
  • Pour Windows, utilisez Control + Shift + C

Voici la structure de la page cible :

La structure HTML du site web cible

Vous pouvez afficher le code d’un élément spécifique sur une page à l’aide de l’outil de sélection en haut à gauche de la fenêtre Inspecter :

Comment inspecter des éléments spécifiques dans le code source

Sélectionnez l’un des titres d’ordinateurs portables dans votre fenêtre Inspecter :

Inspection d'un des titres que nous voulons scraper

Vous pouvez voir que le titre est à l’intérieur d’une balise <a> </a>, qui est enveloppée par une balise h4, et le lien a une classe title. Cela signifie que vous recherchez des balises <a href> (URLs) à l’intérieur de balises <h4> ayant une classe title.

Pour créer un programme de scraping qui cible avec précision ces éléments, vous devez importer les bibliothèques pour créer une fonction Python, lancer le navigateur et naviguer vers le site web cible :

from playwright.sync_api import sync_playwright

def main():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        try:
            page.goto("https://webscraper.io/test-sites/e-commerce/static/computers/laptops")

        except:
            print("Error")

        page.wait_for_timeout(7000)

Notez que l’URL cible à l’intérieur de la fonction page.goto() a été mise à jour pour pointer vers la première page contenant la liste des ordinateurs portables.

Une fois que vous avez créé le programme de scraping, vous devez localiser l’élément cible en fonction de votre analyse de la structure du site web. Playwright dispose d’un outil appelé locators qui vous permet de localiser des éléments sur une page en fonction de divers attributs, tels que les suivants :

  • get_by_label() localise l’élément cible à l’aide du label associé à un élément.
  • get_by_text() localise l’élément cible à l’aide du texte que contient l’élément.
  • get_by_alt_text() localise l’élément cible et effectue des actions sur les images à l’aide de leur texte alternatif.
  • get_by_test_id() localise l’élément cible à l’aide de l’ID de test d’un élément.

Vous pouvez vous référer à la documentation officielle pour plus de méthodes de localisation d’éléments.

Pour scraper tous les titres d’ordinateurs portables, vous devez localiser les balises <h4> car elles enveloppent tous les titres d’ordinateurs portables. Vous pouvez utiliser le locator get_by_role() pour trouver des éléments en fonction de leur fonction, tels que les boutons, les cases à cocher et les titres. Cela signifie que pour trouver tous les titres de la page, vous devez écrire ce qui suit :

titles = page.get_by_role("heading").all()

Après cela, vous pouvez l’afficher dans votre console avec le code suivant :

print(titles)

Après l’affichage, vous remarquerez qu’il donne un tableau d’éléments :

Tableau d'éléments après l'affichage des titres

Cette sortie n’inclut pas les titres, mais elle fait référence aux éléments correspondant aux conditions du sélecteur. Vous devez parcourir ces éléments pour trouver une balise <a> avec une classe title et le texte qu’elle contient.

Il est recommandé d’utiliser le locator CSS pour trouver un élément en fonction de son chemin et de sa classe, et vous pouvez utiliser la fonction all_inner_texts() pour extraire le texte interne d’un élément comme ceci :

for title in titles:
  laptop = title.locator("a.title").all_inner_texts()

Après avoir exécuté ce code, votre sortie devrait ressembler à ceci :

Une image de ce à quoi devrait ressembler la sortie

Pour rejeter les tableaux sans valeurs, écrivez ce qui suit :

if len(laptop) == 1:
  print(laptop[0])

Une fois que vous avez rejeté les tableaux sans valeurs, vous avez réussi à construire un programme de scraping qui extrait uniquement des éléments spécifiques.

Voici le code complet pour ce Scraper :

from playwright.sync_api import sync_playwright

def main():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        try:
            page.goto("https://webscraper.io/test-sites/e-commerce/static/computers/laptops")

        except:
            print("Error")

        page.wait_for_timeout(7000)

        titles = page.get_by_role("heading").all()

        for title in titles:
            laptop = title.locator("a.title").all_inner_texts()
            if len(laptop) == 1:
                print(laptop[0])

main()

Interagir avec les éléments

Passons maintenant à la vitesse supérieure et créons un programme qui extrait les titres de la première page contenant des ordinateurs portables, navigue vers la deuxième page, et extrait également ces titres.

Puisque vous savez déjà comment extraire des titres d’une page, vous devez seulement trouver comment naviguer vers la page suivante d’ordinateurs portables.

Vous avez peut-être déjà remarqué les boutons de Pagination sur la page sur laquelle vous vous trouvez actuellement.

Vous devez localiser 2 et cliquer dessus à l’aide de votre programme de scraping. En inspectant la page, vous verrez que l’élément requis est un élément de liste (balise <li>) et a le texte interne 2 :

L'élément requis a un texte interne de 2

Cela signifie que vous pouvez utiliser le sélecteur get_by_role() pour trouver un élément de liste et un sélecteur get_by_text() pour trouver un élément avec 2 comme texte.

Voici comment le coder dans votre fichier :

page.get_by_role("listitem").get_by_text("2", exact=True)

Ceci trouve un élément qui correspond à deux conditions : premièrement, il doit être un élément de liste, et deuxièmement, il doit avoir 2 comme texte.

exact=True est un argument de fonction pour trouver l’élément avec le texte donné.

Pour cliquer sur le bouton, modifiez le code précédent pour qu’il ressemble à ceci :

        page.get_by_role("listitem").get_by_text("2", exact=True).click()

Dans ce code, la fonction click() clique sur l’élément donné.

Attendez que la page se charge et extrayez à nouveau tous les titres :

        page.wait_for_timeout(5000)

        titles = page.get_by_role("heading").all()

        for title in titles:
            laptop = title.locator("a.title").all_inner_texts()
            if len(laptop) == 1:
                print(laptop[0])

Votre bloc de code complet devrait ressembler à ceci :

from playwright.sync_api import sync_playwright

def main():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        try:
            page.goto("https://webscraper.io/test-sites/e-commerce/static/computers/laptops")

        except:
            print("Error")

        page.wait_for_timeout(7000)

        titles = page.get_by_role("heading").all()

        for title in titles:
            laptop = title.locator("a.title").all_inner_texts()
            if len(laptop) == 1:
                print(laptop[0])
        
        page.get_by_role("listitem").get_by_text("2", exact=True).click()

        page.wait_for_timeout(5000)

        titles = page.get_by_role("heading").all()

        for title in titles:
            laptop = title.locator("a.title").all_inner_texts()
            if len(laptop) == 1:
                print(laptop[0])

main()

Extraire le HTML et l’écrire dans un CSV

Si vous ne stockez pas et n’analysez pas les données que vous scrapez, elles sont inutiles. Dans cette section, vous créerez un programme avancé qui prend en entrée le nombre de pages d’ordinateurs portables à scraper, extrait les titres et les stocke dans un fichier CSV dans votre dossier de projet.

Pour ce programme, vous avez besoin d’une bibliothèque CSV pré-installée, qui peut être importée à l’aide de la commande suivante :

import csv

Après avoir installé la bibliothèque CSV, vous devez déterminer comment vous allez visiter un nombre variable de pages en fonction de l’entrée de l’utilisateur.

Si vous regardez la structure des URL du site web, vous remarquerez que chaque page d’ordinateurs portables est indiquée à l’aide d’un paramètre URL. Par exemple, l’URL de la deuxième page du répertoire des ordinateurs portables est https://webscraper.io/test-sites/e-commerce/static/computers/laptops?page=2.

Vous pouvez visiter différentes pages en modifiant le paramètre URL ?page=2 avec différentes valeurs numériques. Cela signifie que vous devez demander à l’utilisateur d’entrer le nombre de pages à scraper avec la commande suivante :

pages = int(input("entrez le nombre de pages à scraper : "))

Pour visiter chaque page de 1 jusqu’au nombre de pages entré par l’utilisateur, vous utilisez une boucle for comme ceci :

for i in range(1, pages+1):

À l’intérieur de cette fonction range, vous utilisez 1 et pages+1 comme arguments de fonction pour représenter les valeurs auxquelles la boucle commence et se termine. Le deuxième argument de fonction est exclu de la boucle. Par exemple, si la fonction range est range(1,5), le programme bouclerait de 1 à 4 seulement.

Ensuite, vous devez visiter chaque page en entrant la valeur i comme paramètre URL dans l’itération. Vous pouvez ajouter des variables à une chaîne à l’aide des f-strings Python.

Lors de la sortie d’une chaîne, vous préfixez les guillemets avec un f pour indiquer qu’il s’agit d’une f-string. À l’intérieur des guillemets, vous pouvez utiliser des accolades pour indiquer des variables.

Voici un exemple de la façon dont vous pouvez utiliser les f-strings pour afficher des variables avec des chaînes :

print(f"La valeur de la variable est {nom_variable_ici}")

En revenant au Scraper, vous pouvez utiliser les f-strings en écrivant ce bloc de code dans le fichier :

     try:
             page.goto(f"https://webscraper.io/test-sites/e-commerce/static/computers/laptops?page={i}")

     except:
            print("Error")

Attendez que la page se charge avec une fonction de délai d’attente et extrayez les titres à l’aide de ce qui suit :

            page.wait_for_timeout(7000)

            titles = page.get_by_role("heading").all()

Une fois que vous avez tous les éléments de titre, vous devez ouvrir votre fichier CSV, parcourir chaque titre, extraire le texte requis et l’écrire dans votre fichier.

Pour ouvrir un fichier CSV, utilisez la syntaxe suivante :

with open("laptops.csv", "a") as csvfile:

Ici, vous ouvrez le fichier laptops.csv en mode append (a). Vous utilisez le mode append ici car vous ne voulez pas perdre les anciennes données à chaque fois que le fichier est ouvert. Si le fichier n’existe pas, la bibliothèque en crée un dans le dossier du projet. CSV offre plusieurs modes pour ouvrir un fichier, notamment les suivants :

  • r est l’option par défaut utilisée si rien n’est spécifié. Elle ouvre le fichier en lecture seule.
  • w ouvre un fichier en écriture uniquement. À chaque ouverture du fichier, les données précédentes sont écrasées.
  • a ouvre un fichier pour ajouter des données. Les données précédentes ne sont pas écrasées.
  • r+ ouvre un fichier pour la lecture et l’écriture.
  • x crée un nouveau fichier.

En dessous du code précédent, vous devez déclarer un objet writer qui vous permet de manipuler le fichier CSV :

writer = csv.writer(csvfile)

Ensuite, parcourez chaque élément de titre et extrayez le texte avec ce qui suit :

                for title in titles:
                    laptop = title.locator("a.title").all_inner_texts()

Cela vous donne plusieurs tableaux, chacun contenant le titre des ordinateurs portables individuels. Pour rejeter les tableaux vides, écrivez le code conditionnel suivant dans le fichier CSV :

               if len(laptop) == 1:
                        writer.writerow([laptop[0]])

La fonction writerow vous permet d’écrire de nouvelles lignes dans un fichier CSV.

Voici le code complet du programme :

from playwright.sync_api import sync_playwright
import csv

def main():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        pages = int(input("entrez le nombre de pages à scraper : "))

        for i in range(1, pages+1):
            try:
                page.goto(f"https://webscraper.io/test-sites/e-commerce/static/computers/laptops?page={i}")

            except:
                print("Error")

            page.wait_for_timeout(7000)

            titles = page.get_by_role("heading").all()

            with open("laptops.csv", "a") as csvfile:
                writer = csv.writer(csvfile)
                for title in titles:
                    laptop = title.locator("a.title").all_inner_texts()
                    if len(laptop) == 1:
                        writer.writerow([laptop[0]])

        browser.close()             


main()

Après avoir exécuté ce code, votre fichier CSV devrait ressembler à ceci :

Exemple de ce à quoi devrait ressembler le fichier CSV

Conclusion

Dans cet article, vous avez appris comment extraire, analyser et stocker du HTML à l’aide de Python.

Bien que ce tutoriel soit relativement simple, dans un scénario réel, vous rencontreriez probablement divers obstacles lors du scraping, notamment des CAPTCHAs, des limites de débit, des changements de mise en page de site web ou des exigences réglementaires. Heureusement, Bright Data peut vous aider. Bright Data propose des outils tels que des proxys résidentiels avancés pour améliorer votre scraping, un IDE Web Scraper pour créer des Scrapers à grande échelle, et un Web Unlocker pour débloquer des sites web publics, notamment la résolution de CAPTCHAs. Ces outils peuvent vous aider à collecter des données précises à grande échelle et à surmonter les obstacles. De plus, l’engagement de Bright Data envers un scraping éthique vous assure de rester dans les conditions d’utilisation des sites web et les réglementations légales.

Avec l’infrastructure riche en fonctionnalités de Bright Data, vous pouvez vous concentrer sur l’extraction des données précieuses dont vous avez besoin, en laissant derrière vous les complexités du scraping web. Commencez votre essai gratuit dès aujourd’hui !