Comment utiliser les sélecteurs CSS pour le Web Scraping en Python

Les sélecteurs CSS offrent un moyen puissant de cibler et d'extraire du contenu spécifique des pages HTML. Ce guide détaillé couvre tout ce que vous devez savoir pour exploiter les sélecteurs CSS pour le web scraping en Python.

Introduction aux sélecteurs CSS

Les sélecteurs CSS vous permettent de sélectionner des éléments sur une page Web en fonction de l'identifiant, de la classe, du nom de la balise, des attributs, etc. Voici quelques exemples:

• div - Tout sélectionner
  éléments
• #container – Sélectionnez l'élément avec id="container"
• .item – Sélectionnez les éléments avec class="item"
• a[href^="http"] – Sélectionnez les balises d’ancrage avec href commençant par http

Il existe plus de 50 types et combinaisons de sélecteurs CSS différents disponibles. Cela inclut les sélecteurs de balise, d’ID, de classe, d’attribut, de pseudo-classe, de position, d’état et lexicaux.

Certains types de sélecteurs de clé incluent :

Ceux-ci peuvent être combinés de différentes manières pour cibler des éléments de manière très précise. Par exemple:

div.content table.data tr.highlight > td

Ce qui se décompose en :

• div.content - <div> éléments avec class="content"
• table.data - <table> éléments avec class="data" à l'intérieur du <div>
• tr.highlight - <tr> éléments avec class="highlight" à l'intérieur du <table>
• > td - <td> éléments qui sont des enfants directs du <tr>

Comme vous pouvez le constater, les sélecteurs CSS vous permettent d'explorer et de spécifier très précisément les éléments de la hiérarchie HTML. Cela les rend inestimables pour extraire des données spécifiques de pages Web.

Des études montrent que les identifiants et classes CSS sont utilisés sur plus de 90 % des sites pour activer le style. Cette prévalence les rend également parfaits pour sélectionner le contenu à gratter.

Utiliser des sélecteurs CSS en Python

Les bibliothèques Python populaires comme BeautifulSoup et Parsel prennent en charge les sélecteurs CSS :

BeautifulSoup

Pour utiliser les sélecteurs CSS dans BeautifulSoup, appelez le select() méthode sur un BeautifulSoup objet:

from bs4 import BeautifulSoup

soup = BeautifulSoup(html)
links = soup.select(‘a‘) # All anchor tags
first_link = soup.select_one(‘a‘) # First anchor tag

• select() renvoie une liste de tous les éléments correspondants.
• select_one() renvoie uniquement la première correspondance.

parcelle

La bibliothèque Parsel fournit une API similaire :

from parsel import Selector

selector = Selector(html)
links = selector.css(‘a‘).getall() 
first_link = selector.css(‘a‘).get()

• .css() exécute les sélecteurs CSS
• .getall() renvoie toutes les correspondances
• .get() renvoie le premier match

Parsel est utilisé en interne par le framework de scraping Web Scrapy.

Comparaison des bibliothèques

BeautifulSoup et Parsel ont tous deux une fonctionnalité de sélecteur CSS presque identique. Parsel est un peu plus rapide dans les tests de performance, mais BeautifulSoup fournit des fonctionnalités supplémentaires telles que la recherche et la modification du DOM.

Pour la plupart des objectifs de scraping, leur support de sélecteur CSS est interchangeable.

Exemples de sélecteur CSS

Passons maintenant à quelques exemples spécifiques d'utilisation de sélecteurs CSS pour récupérer des données :

Obtenir des éléments par nom de balise

Sélectionnez tous les hyperliens sur une page :

links = soup.select(‘a‘)

Cela correspondra à n'importe quel <a> éléments de balise d’ancrage.

Sélectionnez l'élément par ID

Obtenez un formulaire sur une page avec un identifiant spécifique :

login_form = soup.select_one(‘#loginForm‘) 

La # le préfixe indique qu'il correspond à l'attribut id. Cela sélectionnera l'élément avec id="loginForm".

Les identifiants doivent être uniques au sein d'une page, cela renverra donc toujours un élément.

Obtenir des éléments par nom de classe

Sélectionnez tous les éléments de page avec une classe spécifique :

products = soup.select(‘.product-item‘)

La . le préfixe désigne un sélecteur de classe. Cela sélectionnera tous les éléments avec class="product-item".

Notez que les classes peuvent être réutilisées afin qu'elles puissent correspondre à plusieurs éléments.

Sélectionner par valeur d'attribut

Extrayez les champs de saisie en fonction de leur attribut de type :

text_inputs = soup.select(‘input[type="text"]‘)

La [attribute="value"] la syntaxe vous permet de faire correspondre des valeurs d'attribut spécifiques.

Combiner plusieurs sélecteurs

Sélectionnez les ancres dans un div de la barre latérale spécifique :

sidebar_links = soup.select(‘div.sidebar a.highlight‘)

Cela correspondra <a> éléments avec class="highlight" à l'intérieur <div class="sidebar">.

Plusieurs sélecteurs peuvent être combinés en les séparant par un espace qui sélectionne les éléments descendants.

Récupérer des données avec des sélecteurs CSS

Une fois que vous avez extrait les éléments, les sélecteurs CSS peuvent être utilisés pour récupérer les données :

for product in soup.select(‘.product‘):
  name = product.select_one(‘.product-name‘).text
  price = product.select_one(‘.product-price‘).text
  print(name, price)

Cela fait une boucle à travers .product éléments et gratte les .product-name ainsi que .product-price valeurs de chaque bloc de produits.

L'avantage des sélecteurs CSS est qu'ils vous permettent d'isoler les données souhaitées du code HTML environnant.

Exemple de grattage - Boîtes d'informations Wikipédia

Par exemple, pensez à gratter infobox de Wikipédia:

url = ‘https://en.wikipedia.org/wiki/Abraham_Lincoln‘
soup = BeautifulSoup(requests.get(url).text)

infobox = soup.select_one(‘.infobox‘)

title = infobox.select_one(‘.fn‘).text
born = infobox.select_one(‘.bday‘).text
office = infobox.select_one(‘.label[style*=bold]‘).text

print(title) # Abraham Lincoln
print(born) # February 12, 1809
print(office) # 16th President of the United States

Cela isole le contenu de l'infobox en utilisant .infobox classe, puis extrait des champs spécifiques à l'aide de sélecteurs de balises, de classes et d'attributs imbriqués.

Comme vous pouvez le constater, enchaîner différents types de sélecteurs vous permet de vous concentrer sur les données dont vous avez besoin.

Récupérer des données d'une table

Les sélecteurs peuvent également aider à extraire des données tabulaires :

url = ‘https://www.example.com/data.html‘ 

soup = BeautifulSoup(requests.get(url).text)
table = soup.select_one(‘table.data-table‘)

headers = [h.text for h in table.select(‘th‘)]
rows = []
for row in table.select(‘tr‘):
  cells = [d.text for d in row.select(‘td‘)]
  rows.append(dict(zip(headers, cells)))

print(rows)  

Cela extrait une table de données, lit les étiquettes d'en-tête, puis parcourt les lignes et crée un dictionnaire à partir des paires d'en-tête-cellule.

Les sélecteurs CSS permettent de récupérer facilement des données structurées.

Limites des sélecteurs CSS pour le scraping

L'un des inconvénients des sélecteurs CSS est qu'ils ne peuvent analyser que du HTML statique et ne fonctionnent pas avec du contenu chargé dynamiquement via JavaScript. Le scraping de sites modernes nécessite des outils supplémentaires tels que Selenium ou l'automatisation du navigateur.

Ils offrent également une capacité limitée à parcourir et à sélectionner les éléments parents. Le chaînage ne peut donc que descendre dans une hiérarchie, pas monter.

Malgré cela, les sélecteurs CSS restent un outil essentiel pour le scraping en raison de leur omniprésence, de leur rapidité et de leur commodité d'extraction de données.

Chaînage des sélecteurs CSS

Le chaînage permet d'explorer les éléments descendants :

rows = soup.select(‘div#content table.data tr‘)
for row in rows:
  name = row.select_one(‘td.name‘).text
  price = row.select_one(‘td.price‘).text 
  print(name, price)

Tout d'abord, tout <tr> les lignes sont sélectionnées, puis spécifiques <td> les cellules de chaque ligne sont extraites par chaînage.

Le chaînage des sélecteurs en combinaison permet de récupérer des données en relation avec la structure et le contenu environnants.

Sélecteurs CSS avancés

Il existe également des fonctionnalités de sélection CSS plus avancées qui méritent d'être abordées :

Wildcards

La * le sélecteur de caractère générique correspond à n'importe quel élément :

panels = soup.select(‘div.panel *‘) # All descendants

Sélecteurs d'attributs

Une correspondance d'attributs plus complexe est possible :

input[type^="text"] # Type starts with "text"
a[href$=".pdf"] # Href ends with ".pdf" 
div[class*="head"] # Class contains "head"

Pseudo-sélecteurs

Sélecteurs d'état spéciaux comme :hover, :visited etc. Par exemple :

a:visited {color: purple}

La prise en charge varie selon les analyseurs. Certains pseudo-sélecteurs comme :contains() sont des extensions personnalisées plutôt que CSS.

Sélecteurs de frères et sœurs

Cible basée sur les frères et sœurs, par exemple un frère ou une sœur adjacente p + ul trouve <ul> juste après <p>.

Négation

:not(selector) exclut les éléments correspondants.

Ces sélecteurs supplémentaires permettent un contrôle encore plus précis du grattage.

Scraping de sites interactifs

Bien que les sélecteurs CSS ne fonctionnent que sur du HTML statique, il existe des moyens de les utiliser lors du scraping de pages interactives avec du contenu généré par JavaScript :

Automatisation du navigateur

Des outils comme Selenium peuvent amener un navigateur à afficher du JavaScript avant de l'analyser avec des sélecteurs CSS :

from selenium import webdriver

driver = webdriver.Chrome()
driver.get(url)

soup = BeautifulSoup(driver.page_source)
results = soup.select(‘#results .result‘)

Cela permet de sélectionner des éléments après l'exécution de JS.

Navigation sans tête

Pour le scraping sans tête, des outils comme Puppeteer et Playwright fournissent la prise en charge du sélecteur CSS :

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
  browser = p.chromium.launch()
  page = browser.new_page()
  page.goto(url)

  html = page.content()
  soup = BeautifulSoup(html)

Le contenu de la page après le rendu JavaScript peut être analysé.

Extensions du navigateur

Les extensions de navigateur comme SelectorGadget éliminent les sélecteurs CSS en analysant le trafic réseau et le DOM.

Ces approches permettent d'utiliser des sélecteurs CSS sur des sites dynamiques. Les sélecteurs correspondent toujours uniquement au HTML, mais sont générés dynamiquement via JavaScript.

Limites et défis

Bien que les sélecteurs CSS soient omniprésents et pratiques, ils présentent certaines limites :

Grattage de sites complexes

Les sélecteurs ont du mal avec certaines structures de site complexes :

• Les frames et les iframes nécessitent une analyse distincte.
• Les grilles et mises en page avancées peuvent nécessiter des sélecteurs complexes.
• Les widgets interactifs et les applications intégrées nécessitent des approches alternatives.

Souvent, un mélange de sélection CSS et d’autres logiques d’analyse est nécessaire.

Les problèmes de performance

Les sélecteurs très longs et complexes peuvent devenir lents. Une nidification à plus de 3 ou 4 niveaux de profondeur doit être évitée.

Il est recommandé de garder les sélecteurs individuels simples, avec pas plus de 3 à 4 composants. Chaînez plusieurs sélecteurs simples au lieu d’expressions uniques alambiquées.

Sélecteurs fragiles

Le ciblage basé sur des attributs tels que la classe et l'ID conduit à des sélecteurs fragiles qui se cassent facilement si ces valeurs changent lors de la refonte du site.

Dans la mesure du possible, ciblez les éléments en fonction de leur nom, de leur position et de leur hiérarchie plutôt que d'attributs fragiles. Ou combinez plusieurs sélecteurs comme sauvegardes.

Limites de traversée du DOM

Les sélecteurs CSS ne peuvent parcourir que l'arborescence descendante, pas jusqu'aux éléments parents.

Les expressions XPath offrent une traversée plus flexible vers le haut et vers le bas d'un document.

Prise en charge du pseudo-sélecteur

Les pseudo-sélecteurs CSS classiques comme :visited ainsi que :hover ont une prise en charge multi-navigateurs limitée dans les analyseurs. Sélecteurs personnalisés comme :contains() sont hors normes.

Fiez-vous à des pseudo-classes simples comme :first-child plutôt que des pseudo-sélecteurs complexes.

Alternatives aux sélecteurs CSS

Bien qu'indispensables, les sélecteurs CSS ne sont pas le seul jeu disponible pour analyser le HTML :

XPath

XPath est un langage de requête permettant de sélectionner des nœuds dans des documents XML/HTML et offre une alternative au CSS.

Avantages:

• Traversée plus puissante de la structure du document.
• Norme robuste maintenue par le W3C.

Inconvénients:

• Syntaxe verbeuse et complexe.
• Les performances peuvent être plus lentes.

expression régulière

Les expressions régulières peuvent extraire des modèles de texte :

Avantages:

• Correspondance de motifs flexible et puissante.

Inconvénients:

• Désordonné lors de l'analyse du HTML imbriqué.
• Pas de support intégré pour la traversée.

En pratique, une combinaison de sélecteurs CSS, XPath et Regex offre souvent les capacités les plus robustes pour le web scraping à l'échelle industrielle.

Outils et bibliothèques

Voici quelques outils essentiels pour travailler avec les sélecteurs CSS :

• SélecteurGadget – Extension de navigateur pour générer des sélecteurs.
• Dramaturge – Scraper sans tête avec prise en charge du sélecteur CSS.
• Scrapy – Framework de scraping Web utilisant les sélecteurs Parsel et CSS.
• Marionnettiste – Grattage Chrome sans tête.
• BeautifulSoup – Analyseur HTML Python leader.

Ceux-ci fournissent tout le nécessaire pour exploiter les sélecteurs CSS pour le web scraping en production.

Conclusion

Les sélecteurs CSS fournissent un mécanisme polyvalent et omniprésent pour extraire des données de pages Web. La prédominance des identifiants et des classes dans HTML les rend parfaits pour explorer et extraire uniquement le contenu dont vous avez besoin.

Maîtriser la variété des types de sélecteurs et les combiner par chaînage et imbrication permet un ciblage extrêmement précis. Grâce à la puissance des bibliothèques Python comme BeautifulSoup et Parsel, les sélecteurs CSS sont une technique essentielle pour tout web scraper.