AI Agents · Leçon

Gérer la pagination et le contenu dynamique

Suivez les liens vers les pages suivantes et utilisez Playwright pour les pages rendues par JavaScript.

Leçon 3 sur 413 étapes

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 results

Sché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_items

Pagination 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_data

Contenu 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 html

Gé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 html

Combiner 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 products

Choisir 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.

Gratuit pour commencer

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

  1. Clients HTTP pour agents : httpx et requests
  2. Analyser du HTML avec BeautifulSoup
  3. Gérer la pagination et le contenu dynamique
  4. Pratiques de collecte respectueuses
← Retour à AI Agents