Gérer la pagination et le contenu dynamique
Suivez les liens vers les pages suivantes et utilisez Playwright pour les pages rendues par JavaScript.
Gérer la pagination et le contenu dynamique est une leçon AI Agents gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage AI Agents, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours AI Agents comprend 4 leçons au total.
Le problème de la pagination
La plupart des sites web réels ne fournissent pas toutes leurs données sur une seule page. Les résultats sont répartis sur plusieurs pages afin de réduire la charge. Un agent doit détecter la pagination et la suivre pour collecter des jeux de données complets.
Il existe deux schémas de pagination courants : les liens vers la page suivante et les schémas d’URL avec numéro de page.
Détecter les liens vers la page suivante
De nombreux sites disposent d’un bouton « Next » ou d’un lien en forme de flèche. Trouvez la balise d’ancrage avec rel='next' ou dont le texte ressemble à « Next », extrayez son href, puis suivez-le dans une boucle jusqu’à ce qu’il n’y en ait plus.
from bs4 import BeautifulSoup
import httpx
def scrape_all_pages(start_url: str) -> list:
results = []
url = start_url
while url:
response = httpx.get(url, timeout=10.0)
soup = BeautifulSoup(response.text, 'html.parser')
# Collect data from this page
for item in soup.select('.result-item'):
results.append(item.text.strip())
# Find the next page link
next_link = soup.find('a', rel='next') or soup.find('a', string='Next')
url = next_link.get('href') if next_link else None
return resultsSchémas d’URL avec numéro de page
De nombreuses API et de nombreux sites utilisent des schémas d’URL prévisibles : /results?page=1, /results?page=2, etc. Un agent peut les parcourir directement sans analyser le DOM à la recherche d’un lien vers la page suivante.
import httpx
def scrape_paginated_api(base_url: str, max_pages: int = 10) -> list:
all_items = []
for page in range(1, max_pages + 1):
response = httpx.get(
base_url,
params={'page': page, 'per_page': 50},
timeout=10.0
)
response.raise_for_status()
data = response.json()
items = data.get('results', [])
if not items:
break # No more data
all_items.extend(items)
print(f'Page {page}: fetched {len(items)} items')
return all_itemsPagination basée sur un curseur
Les API modernes (GitHub, Slack, Twitter) utilisent une pagination basée sur un curseur. Chaque réponse contient un jeton de curseur pour la page suivante. Transmettez le curseur dans la requête suivante jusqu’à ce qu’il soit absent ou nul.
import httpx
def fetch_with_cursor(url: str, headers: dict) -> list:
all_data = []
cursor = None
while True:
params = {'cursor': cursor} if cursor else {}
response = httpx.get(url, headers=headers, params=params, timeout=10.0)
response.raise_for_status()
data = response.json()
all_data.extend(data.get('items', []))
cursor = data.get('next_cursor') # None when done
if not cursor:
break
return all_dataContenu statique ou dynamique
Certaines pages chargent leur contenu via JavaScript après la transmission du HTML initial. Un client HTTP normal ne reçoit que la structure vide : les données réelles sont injectées par JS dans le navigateur.
Pour ces pages, des outils comme Playwright exécutent un véritable moteur de navigateur et attendent l’exécution de JavaScript avant d’extraire le contenu.
Installer et importer Playwright
Installez Playwright avec pip install playwright, puis exécutez playwright install chromium pour télécharger le navigateur. Utilisez async_playwright() pour les flux de travail asynchrones des agents.
# Installation (run in terminal):
# pip install playwright
# playwright install chromium
from playwright.async_api import async_playwright
import asyncio
async def fetch_dynamic(url: str) -> str:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
html = await page.content() # Full rendered HTML
await browser.close()
return html
# html = asyncio.run(fetch_dynamic('https://example.com'))Attendre le chargement du contenu dynamique
Les pages JavaScript chargent souvent les données de manière asynchrone. Demandez à Playwright d’attendre l’apparition d’un élément précis avant d’extraire le contenu, afin de vous assurer que les données dont vous avez besoin sont bien présentes dans le DOM.
from playwright.async_api import async_playwright
async def scrape_dynamic_table(url: str) -> list:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
# Wait for the table to appear in the DOM
await page.wait_for_selector('table.results', timeout=10000)
html = await page.content()
await browser.close()
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
return [td.text for td in soup.select('table.results td')]Cliquer et interagir avec les pages
Playwright peut simuler les interactions de l’utilisateur : clics, remplissage de formulaires, défilement et saisie au clavier. Votre agent peut ainsi parcourir des processus de connexion, des menus déroulants ou des pages à défilement infini.
from playwright.async_api import async_playwright
async def click_load_more(url: str) -> str:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
# Click the 'Load More' button
load_more = page.locator('button:text("Load More")')
if await load_more.count() > 0:
await load_more.click()
await page.wait_for_timeout(2000) # wait 2s for content
html = await page.content()
await browser.close()
return htmlGérer le défilement infini
Certains sites chargent davantage de contenu lorsque vous faites défiler la page vers le bas. Playwright peut simuler le défilement pour déclencher ces chargements. Faites défiler la page à plusieurs reprises et vérifiez chaque fois si du nouveau contenu est apparu.
from playwright.async_api import async_playwright
async def scrape_infinite_scroll(url: str, scroll_count: int = 5) -> str:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
for _ in range(scroll_count):
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
await page.wait_for_timeout(1500) # wait for new content
html = await page.content()
await browser.close()
return htmlCombiner Playwright et BeautifulSoup
Une fois que Playwright a rendu la page et renvoyé le HTML complet, transmettez-le à BeautifulSoup pour en extraire facilement les données. Vous combinez ainsi les points forts des deux bibliothèques.
from playwright.async_api import async_playwright
from bs4 import BeautifulSoup
async def extract_js_rendered_data(url: str) -> list:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
await page.wait_for_selector('.product-card')
html = await page.content()
await browser.close()
soup = BeautifulSoup(html, 'html.parser')
products = []
for card in soup.select('.product-card'):
products.append({
'name': card.select_one('.name').text.strip(),
'price': card.select_one('.price').text.strip()
})
return productsChoisir le bon outil
Playwright n’est pas nécessaire pour toutes les pages. Utilisez l’approche la plus simple qui fonctionne :
- HTML statique : httpx + BeautifulSoup (rapide, sans surcharge liée au navigateur)
- API JSON avec pagination : httpx avec des paramètres de page ou de curseur
- Contenu rendu par JS : Playwright asynchrone (plus lent, mais plus puissant)
Commencez toujours par l’approche statique et ne recourez à Playwright qu’en cas de besoin.
Contrôle des connaissances : pagination et contenu dynamique
Vérifiez votre compréhension de la pagination et de la gestion du contenu dynamique.
Récapitulatif : pagination et contenu dynamique
Vos agents peuvent désormais gérer toute la diversité des contenus web :
- Suivre les liens vers la page suivante ou parcourir les paramètres de page des URL
- Utiliser des jetons de curseur pour la pagination des API modernes
- Utiliser
async_playwright()pour les pages rendues par JavaScript - Attendre les éléments avec
page.wait_for_selector() - Combiner Playwright et BeautifulSoup pour extraire facilement les données
Commencez toujours par l’approche la plus simple et passez à Playwright uniquement lorsque l’approche statique ne suffit pas.
Apprends AI Agents avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 60
- Leçons
- 239
Questions Fréquemment Posées
La leçon « Gérer la pagination et le contenu dynamique » est-elle gratuite ?
Oui — le texte complet de « Gérer la pagination et le contenu dynamique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours AI Agents, passe à CoddyKit PRO. Le cours AI Agents comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer la pagination et le contenu dynamique » ?
Suivez les liens vers les pages suivantes et utilisez Playwright pour les pages rendues par JavaScript. Tu pratiques AI Agents avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer AI Agents ?
Aucune expérience préalable n'est requise. AI Agents sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Gérer la pagination et le contenu dynamique » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon AI Agents ?
Oui. Chaque leçon AI Agents inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Clients HTTP pour agents : httpx et requests
- Analyser du HTML avec BeautifulSoup
- Gérer la pagination et le contenu dynamique
- Pratiques de collecte respectueuses