Naviguer sur le web

Leçon corrigée le 3 novembre 2026 d’après le guide Computer use d’OpenAI, ses Integration recipes et la référence de la Responses API : les consignes passent par le paramètre instructions, à renvoyer à chaque requête puisqu’il n’est pas reporté par previous_response_id ; le script qui retirait les target="_blank" contenait une erreur de syntaxe JavaScript et ne couvrait que les liens déjà présents ; les recommandations d’image suivent désormais celles d’OpenAI (detail: "original", réduction avec conversion des coordonnées). Sources : Integration recipes · Computer use.

Au-delà du simple clic

Naviguer, pour un agent, ce n’est pas ouvrir une URL. C’est traverser un web réel fait de redirections, de pages qui mettent quatre secondes à s’afficher, de bannières de consentement qui recouvrent tout, de contenus qui n’apparaissent qu’après plusieurs défilements. Un agent qui ignore ces frictions échoue dès la deuxième page ; celui qui les anticipe enchaîne un parcours de dix écrans sans la moindre intervention.

Deux façons d’aller quelque part

Quand vous connaissez l’adresse exacte, ne demandez pas à l’IA de la chercher : envoyez-y le navigateur directement.

page.goto("https://example.com/products")
page.wait_for_load_state("networkidle")

Quand l’adresse dépend au contraire de ce qui s’affiche — le troisième produit d’une liste triée par prix, un lien « Voir la facture » généré à la volée —, laissez le modèle regarder et cliquer.

# L'IA voit le screenshot et décide de cliquer sur un lien
# C'est automatique dans la boucle Computer Use

Le bon réflexe consiste à combiner les deux dans un même workflow : navigation directe pour les jalons connus de votre parcours, navigation visuelle pour tout ce qui se découvre en chemin. Vous économisez ainsi des itérations coûteuses là où elles n’apportent rien.

La bannière de cookies, obstacle numéro un

En Europe, la quasi-totalité des sites affichent un bandeau de consentement au premier chargement. Tant qu’il est présent, il capte les clics et votre agent tourne à vide sans comprendre pourquoi la page ne réagit pas. Le traitement ne s’improvise pas site par site : inscrivez-le une fois pour toutes dans les instructions de l’agent — le paramètre instructions de la Responses API, qui joue le rôle du system prompt —, avec une consigne claire sur ce qu’il faut refuser.

INSTRUCTIONS = """Tu es un agent qui navigue sur le web.
Règles :
- Si tu vois une bannière de cookies ou de consentement,
  refuse les cookies optionnels ou clique sur "Refuser" / "Reject"
- Si seul "Accepter" est proposé, n'accepte que si la tâche l'autorise ;
  sinon arrête-toi et signale-le
- Ne perds pas de temps sur les popups : traite-les immédiatement
"""

# À passer à CHAQUE requête de la boucle : avec previous_response_id,
# les instructions de la réponse précédente ne sont pas reprises.
response = client.responses.create(
    model="gpt-6.1-sol",
    tools=[{"type": "computer"}],
    instructions=INSTRUCTIONS,
    input=tache,
)

L’ordre des deux premières règles n’est pas indifférent : l’agent refuse par défaut, et accepter reste une décision de la personne qui confie la tâche, pas du modèle. Et retenez le commentaire du code : la documentation de la Responses API précise que les instructions d’une réponse ne sont pas reportées sur la suivante quand vous chaînez par previous_response_id. Une boucle qui ne les envoie qu’au premier tour les perd dès le deuxième.

Trois manières d’attendre

Les pages modernes chargent leur contenu de façon asynchrone, et votre agent peut très bien cliquer là où le bouton n’est pas encore arrivé. La parade la plus fiable reste l’attente réseau de Playwright, qui rend la main une fois toutes les requêtes terminées.

page.goto(url)
page.wait_for_load_state("networkidle")
# Toutes les requêtes réseau sont terminées

Elle ne suffit pas partout : sur une application qui maintient une connexion permanente — websocket, polling, chat en direct —, le réseau n’est jamais inactif et l’attente finit par expirer. Repliez-vous alors sur une temporisation simple avant la capture.

import time

def wait_and_screenshot(page, wait_seconds=2):
    """Attend puis capture un screenshot."""
    time.sleep(wait_seconds)
    return page.screenshot()

Reste une troisième voie, souvent négligée : confier le jugement au modèle lui-même. Il voit le spinner ou le contenu à moitié rendu et comprend qu’il vaut mieux réclamer une capture supplémentaire plutôt que d’agir à l’aveugle.

task = """
Navigue vers https://example.com/dashboard.
Si la page semble encore en train de charger 
(spinner visible, contenu partiel), 
attends un screenshot supplémentaire avant d'agir.
"""

Guider un parcours long

Sur un enchaînement de plusieurs pages, la tâche formulée en une seule phrase se délite en cours de route : l’agent oublie la moitié de la consigne au troisième écran. Découpez-la en étapes explicites — grâce au chaînage des réponses par previous_response_id, le modèle garde trace de celles qu’il a déjà franchies et sait en permanence où il en est.

task = """
Étape 1 : Va sur https://shop.example.com
Étape 2 : Cherche "clavier mécanique" dans la barre de recherche
Étape 3 : Trie les résultats par prix croissant
Étape 4 : Ouvre le premier produit
Étape 5 : Note le prix et la disponibilité
"""

Les onglets ne se gèrent pas côté IA

Computer Use ne travaille que sur un seul viewport. Si un lien s’ouvre dans un nouvel onglet, l’agent continue de photographier l’ancien et ne comprend pas pourquoi rien n’a changé — situation classique avec les liens target="_blank", qu’on croise sur presque tous les sites de presse. Le problème se règle en amont, côté Playwright, sans que le modèle ait à s’en soucier.

RETIRER_BLANK = """
document.addEventListener("click", (e) => {
  const lien = e.target.closest && e.target.closest('a[target="_blank"]');
  if (lien) lien.removeAttribute("target");
}, true);
"""

def handle_new_tab(context, page):
    """Garde la navigation dans l'onglet que l'agent photographie."""
    # Sur chaque page chargée, un clic sur un lien target="_blank"
    # l'ouvre dans l'onglet courant…
    context.add_init_script(RETIRER_BLANK)
    # … et une fenêtre ouverte par script est refermée aussitôt
    page.on("popup", lambda popup: popup.close())

Le script d’initialisation s’exécute dans chaque page avant ses propres scripts : l’écouteur, posé en phase de capture, retire l’attribut target avant que le navigateur ne suive le lien. L’événement popup de la page couvre ce qui reste, les fenêtres ouvertes par window.open.

La qualité de l’image conditionne tout le reste

Une capture floue ou tronquée produit un agent qui se trompe de bouton, et vous perdrez plus de temps à déboguer ses errements qu’à soigner le screenshot. Capturez le viewport visible plutôt que la page entière : une capture full_page produit une image démesurée, et surtout ses coordonnées ne correspondent plus à l’écran sur lequel page.mouse clique.

import base64

def optimized_screenshot(page) -> str:
    """Capture du viewport visible, au format PNG, en base64."""
    screenshot = page.screenshot(
        type="png",
        full_page=False,  # Seulement le viewport visible
    )
    return base64.b64encode(screenshot).decode("utf-8")

Côté API, OpenAI recommande d’envoyer les captures avec detail: "original", qui préserve la résolution et améliore la précision des clics, et déconseille high et low pour Computer Use. Une grande capture consomme davantage de tokens, et l’API peut la redimensionner, voire la refuser si elle dépasse ses limites. Si vous devez réduire vos captures, faites-le avant l’envoi et convertissez les coordonnées du modèle dans l’espace de l’image d’origine ; OpenAI indique obtenir de bons résultats avec des bureaux en 1440×900 et 1600×900. Le viewport de 1280×720 utilisé dans ce cours n’a pas besoin d’être réduit.

Points clés à retenir

• Combinez navigation directe (URLs connues) et visuelle (liens dynamiques) selon le contexte
• Gérez les popups RGPD dans les instructions de l’agent, renvoyées à chaque requête
• Attendez le chargement complet avant de capturer un screenshot
• Capturez le viewport visible et envoyez-le en detail: "original" ; si vous réduisez l’image, convertissez les coordonnées
• Gérez les nouveaux onglets côté Playwright, pas côté IA