Aller au contenu principal
Leçon 7 sur 14 · Computer Use et Automatisation

Extraire des données de pages web

Leçon 7 sur 14 Mis à jour le 3 novembre 2026 Développeur
Sur cette page
  1. Le scraping par la vision
  2. Lire et rapporter
  3. Extraire ce qui dépasse de l’écran
  4. L’approche hybride : naviguer par la vision, extraire par le DOM
  5. Les structures non standard
  6. Conserver la trace de l’extraction
  7. Ce que la vision ne vous donnera pas
  8. Points clés à retenir

Leçon corrigée le 3 novembre 2026 d’après le guide Computer use d’OpenAI : la fin d’une tâche se repère à l’absence de computer_call dans la réponse, et non au stop_reason de l’API d’Anthropic qu’employait l’ancienne version. Le script d’extraction DOM, dont les sélecteurs n’étaient pas entre guillemets, provoquait une erreur JavaScript ; il est corrigé. Les chiffres sans source (tokens par capture, durée par page) sont remplacés par les facteurs de coût documentés par OpenAI. Sources : Computer use · Calculateur du coût des images.

Le scraping par la vision

Un extracteur classique lit du HTML : il descend dans le DOM, suit une hiérarchie de balises, et s’effondre le jour où le site passe en rendu côté client ou renomme ses classes. Computer Use procède autrement — l’agent lit l’écran comme le ferait un lecteur humain, puis restitue ce qu’il a compris dans le format que vous lui avez demandé. La conséquence pratique est considérable : des sites jusque-là inaccessibles aux scrapers s’ouvrent, puisque ce que voit l’agent est exactement ce que voit l’utilisateur.

Lire et rapporter

Le cas le plus simple consiste à demander une lecture du contenu visible et une restitution structurée. Le point décisif est d’imposer le format de sortie dans le prompt : sans consigne, le modèle répond en prose et vous devrez parser du texte libre, ce qui ruine tout le bénéfice de l’opération.

task = """
Va sur https://news.example.com et extrais les 5 premiers titres 
d'articles visibles sur la page d'accueil.

Retourne le résultat au format JSON :
[
  {"rank": 1, "title": "..."},
  {"rank": 2, "title": "..."},
  ...
]
"""

L’agent voit le screenshot, identifie les titres et vous rend le JSON dans sa réponse textuelle finale, celle qui arrive quand la réponse ne contient plus de computer_call : vous la lisez dans response.output_text.

Extraire ce qui dépasse de l’écran

Un viewport de 720 pixels de haut ne montre qu’une fraction d’une page de résultats. Il faut donc décrire non seulement ce qu’il faut collecter, mais aussi la manière d’avancer dans la page et la condition d’arrêt — faute de quoi l’agent scrollera jusqu’à épuisement de vos itérations, en renvoyant une collecte tronquée.

task = """
Sur cette page de résultats de recherche :
1. Lis tous les résultats visibles et note-les
2. Scrolle vers le bas pour voir plus de résultats
3. Continue jusqu'à avoir collecté 20 résultats ou atteint 
   le bas de la page

Pour chaque résultat, extrais :
- Titre
- URL
- Description courte

Retourne le tout en JSON.
"""

Les tableaux constituent le terrain le plus favorable, car le modèle saisit d’emblée les structures tabulaires visuelles : il rattache une cellule à sa colonne par simple alignement, là où un extracteur DOM doit compter les <td> et se perd dès qu’une cellule est fusionnée. Décrivez les colonnes attendues, il remplira les lignes.

task = """
Ouvre https://stats.example.com/prices et extrais le tableau 
des prix affiché sur la page.

Le tableau a les colonnes : Produit, Prix HT, TVA, Prix TTC.
Extrais toutes les lignes et retourne en JSON :
{
  "headers": ["Produit", "Prix HT", "TVA", "Prix TTC"],
  "rows": [
    ["Widget A", "10.00", "20%", "12.00"],
    ...
  ]
}
"""

L’approche hybride : naviguer par la vision, extraire par le DOM

Sur des données sensibles — des montants, des références produit —, la lecture visuelle reste approximative. La combinaison la plus solide répartit les rôles selon les forces de chacun : l’agent se charge de la partie difficile à scripter, c’est-à-dire atteindre la bonne page à travers les recherches, les filtres et les consentements ; Playwright prend ensuite le relais là où la précision prime, en lisant les valeurs directement dans le DOM.

def extract_with_dom(page, task_description: str):
    """Utilise Computer Use pour naviguer, Playwright pour extraire."""
    # Phase 1 : Computer Use navigue et identifie la zone
    run_agent(task_description, page=page)
    
    # Phase 2 : Playwright extrait les données précises
    data = page.evaluate("""
        () => {
            const rows = document.querySelectorAll('table tbody tr');
            return Array.from(rows).map(row => {
                const cells = row.querySelectorAll('td');
                return Array.from(cells).map(c => c.textContent.trim());
            });
        }
    """)
    
    return data

Les structures non standard

Cartes produits, profils, annonces : ces mises en page échappent aux gabarits réguliers, et c’est justement là que la vision prend l’avantage. Le prompt doit alors nommer chaque champ attendu, préciser son type et fournir un exemple complet de sortie, sinon vous récupérerez « 250 000 € » dans un enregistrement et 250000 dans le suivant, avec un traitement aval qui casse à la première ligne.

task = """
Sur cette page de résultats immobiliers, extrais pour chaque annonce :
- prix (nombre, en euros)
- surface (en m²)
- nombre_pieces (entier)
- ville
- code_postal
- url_annonce

Scrolle pour charger plus d'annonces si nécessaire.
Arrête-toi quand tu as 10 annonces ou quand il n'y en a plus.

Format de sortie JSON strict :
{
  "annonces": [
    {
      "prix": 250000,
      "surface": 65,
      "nombre_pieces": 3,
      "ville": "Paris",
      "code_postal": "75011",
      "url_annonce": "https://..."
    }
  ]
}
"""

Conserver la trace de l’extraction

Une extraction sans métadonnées devient inexploitable trois semaines plus tard : vous ne savez plus d’où viennent les chiffres ni de quand ils datent, et la comparaison avec la collecte suivante n’a plus de sens. Enregistrez systématiquement la source et l’horodatage à côté des données.

import json
from datetime import datetime, timezone

def save_extraction(data: dict, source_url: str):
    """Sauvegarde les données extraites avec métadonnées."""
    maintenant = datetime.now(timezone.utc)
    output = {
        "source": source_url,
        "extracted_at": maintenant.isoformat(),
        "data": data,
    }

    filename = f"extraction_{maintenant:%Y%m%d_%H%M%S}.json"
    with open(filename, "w", encoding="utf-8") as f:
        json.dump(output, f, ensure_ascii=False, indent=2)
    
    print(f"Données sauvegardées dans {filename}")

Ce que la vision ne vous donnera pas

La précision des chiffres est la première limite. L’OCR implicite du modèle peut confondre des caractères de forme proche — 0 et O, 1 et l —, ce qui est sans conséquence sur un titre d’article mais devient inacceptable sur un IBAN ou une référence de commande : vérifiez toujours les données critiques, ou passez par l’extraction DOM pour ces champs-là.

Le coût vient ensuite. Chaque capture compte comme une entrée image, dont le prix dépend de sa taille et du modèle — OpenAI fournit un calculateur pour l’estimer —, et une extraction avec défilement enchaîne de nombreux tours. Comme tout l’historique de la chaîne est refacturé en entrée à chaque requête, le coût d’une longue collecte grandit plus vite que son nombre de captures. Un volume important à collecter quotidiennement mérite donc une mesure sur quelques pages réelles avant le passage en production. Le temps suit la même logique : chaque tour attend une réponse du modèle, ce qui convient à un traitement de nuit mais rarement à une interface utilisateur en attente de réponse.

Points clés à retenir

  • Computer Use excelle à extraire des données de pages visuellement complexes
  • Demandez toujours un format de sortie structuré (JSON) dans le prompt
  • Combinez la navigation IA avec l’extraction DOM Playwright pour plus de fiabilité
  • Prévoyez le scrolling pour les pages longues
  • Vérifiez les données numériques critiques car l’OCR implicite n’est pas parfait