Naviguer sur le web

Au-delà du simple clic

La navigation web avec Computer Use va bien au-delà de l’ouverture d’une URL. Votre agent doit savoir gérer les redirections, les pages qui chargent lentement, les popups de consentement, et les sites qui nécessitent du scrolling pour accéder au contenu.

Vous avez deux approches pour naviguer :

Navigation directe — utilisez Playwright pour aller à une URL connue :

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

Navigation visuelle — laissez l’IA cliquer sur les liens :

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

La navigation directe est plus rapide et plus fiable quand vous connaissez l’URL. La navigation visuelle est nécessaire quand vous explorez un site ou suivez des liens dynamiques.

Gérer les popups de consentement (RGPD)

En Europe, la quasi-totalité des sites affichent une bannière de cookies. Votre agent doit la gérer avant de pouvoir interagir avec le reste de la page.

Ajoutez une instruction spécifique dans votre prompt :

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
"""

Attendre le chargement

Les pages modernes chargent du contenu de manière asynchrone. Votre agent peut essayer de cliquer sur un élément qui n’existe pas encore. Plusieurs stratégies :

Attente réseau

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

Attente temporelle avec retry

import time

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

Attente intelligente dans le prompt

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

Pour les workflows qui traversent plusieurs pages, maintenez le contexte dans le prompt :

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é
"""

Le modèle garde en mémoire les étapes déjà accomplies grâce à l’historique des messages.

Gérer les onglets et les fenêtres

Computer Use fonctionne sur un seul viewport. Si un lien ouvre un nouvel onglet, vous devez le gérer côté Playwright :

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));
    """)

Prendre des screenshots de qualité

La qualité du screenshot impacte directement la performance de l’IA :

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 résolutions offrent le meilleur équilibre entre lisibilité et coût en tokens.

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