Naviguer sur le web

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 le system prompt, avec une consigne claire sur ce qu’il faut refuser.

system_prompt = """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 disponible, clique dessus pour continuer
- Ne perds pas de temps sur les popups : traite-les immédiatement
"""

L’ordre des deux premières règles n’est pas indifférent : l’agent refuse par défaut et n’accepte qu’en dernier recours, lorsque le site ne laisse aucune autre issue.

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 à l’historique des messages, 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.

def handle_new_tab(context, page):
    """Redirige les nouveaux onglets vers la page courante."""
    # Écouter les nouveaux onglets
    context.on("page", lambda new_page: new_page.close())
    
    # Alternative : intercepter les target="_blank"
    page.evaluate("""
        document.querySelectorAll(a[target=_blank])
            .forEach(a => a.removeAttribute(target));
    """)

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 d’un article de blog étire dix mille pixels dans une image que le modèle devra compresser, et où plus aucun libellé n’est lisible.

def optimized_screenshot(page) -> str:
    """Screenshot optimisé pour Computer Use."""
    screenshot = page.screenshot(
        type="png",
        full_page=False,  # Seulement le viewport visible
    )
    return base64.b64encode(screenshot).decode("utf-8")

Gardez le viewport à 1280x720 ou 1024x768 : ces deux résolutions offrent le meilleur équilibre entre lisibilité des libellés et coût en tokens, et elles correspondent à ce que les sites attendent d’un écran de bureau ordinaire.

Points clés à retenir

• Combinez navigation directe (URLs connues) et visuelle (liens dynamiques) selon le contexte
• Gérez les popups RGPD dans le system prompt de l’agent
• Attendez le chargement complet avant de capturer un screenshot
• Utilisez un viewport de 1280x720 pour un bon ratio lisibilité/coût
• Gérez les nouveaux onglets côté Playwright, pas côté IA