Tester mon site web avec Gemini 2.5 Computer Use et Playwright

Google a publié aujourd'hui Gemini 2.5 Computer Use. C'est un modèle qui peut regarder des captures d'écran et vous dire où cliquer. Il peut, littéralement, regarder une page web et comprendre que « le lien du blog se trouve dans la navigation supérieure ».

J'ai 8 langues sur mon site. Parfois, lorsque vous changez de langue, la page se charge vide. Aucune erreur, juste du blanc. J'essayais de détecter quand cela se produisait, mais les tests manuels sont fastidieux.

J'ai donc décidé de laisser l'IA s'en charger. Avec l'aide de Claude Code, j'ai obtenu un test fonctionnel en moins de 15 minutes. Je lui ai simplement fourni la documentation de Gemini 2.5 Computer Use et je lui ai dit ce dont j'avais besoin. Il a écrit le test.

Comment ça marche

Le modèle Gemini 2.5 Computer Use examine les captures d'écran et génère des appels de fonction. Le code capture une capture d'écran du navigateur, l'envoie au modèle, le modèle l'analyse et renvoie un appel de fonction comme « click_at » avec des coordonnées.

Le code exécute cet appel de fonction (en utilisant Playwright). Après avoir cliqué, il capture une nouvelle capture d'écran et la renvoie au modèle en réponse à la fonction. Le modèle utilise cela pour décider de la prochaine action.

Je voulais tester si mes traductions fonctionnaient réellement. Je lui ai donc dit :

• Aller sur la page du blog
• Cliquer sur le premier article de blog que vous voyez
• Mémoriser le titre et le premier paragraphe
• Changer la langue en espagnol, allemand et français
• Pour chaque langue, vérifier si le contenu a changé et n'est pas vide
• Signaler tout problème de traduction trouvé

Configuration

Vous avez besoin de trois choses :

• Le paquet @google/genai pour communiquer avec Gemini
• Playwright pour contrôler le navigateur
• Une clé API de Google AI Studio (c'est gratuit)

Le code est essentiellement une boucle :

while (!done) {
  // Envoyer la capture d'écran à l'IA
  const response = await client.models.generateContent({
    model: 'gemini-2.5-computer-use-preview-10-2025',
    contents: [screenshot, task],
  });

  // Obtenir les coordonnées du clic
  const action = response.candidates[0].functionCall;

  if (!action) {
    done = true; // L'IA indique que c'est terminé
    break;
  }

  // Cliquer là où l'IA a indiqué de cliquer
  await page.mouse.click(action.args.x, action.args.y);

  // Prendre une nouvelle capture d'écran
  screenshot = await page.screenshot();
}

Le modèle renvoie des coordonnées sur une grille normalisée de 1000x1000. Vous les mettez à l'échelle de vos dimensions d'écran réelles. J'utilise 1440x900 (la taille recommandée).

const actualX = Math.floor((x / 1000) * 1440);
const actualY = Math.floor((y / 1000) * 900);

Observation de l'exécution

Je l'ai exécuté avec le navigateur visible. C'est assez fascinant à regarder.

Tour 1 : Regarde ma page d'accueil. « Je vois un lien Blog en haut. » Clique dessus.

Tour 2 : Sur la page du blog. « Le premier article parle de l'IA sur Kindle. » Clique dessus.

Tour 3 : Lecture de l'article. Mémorise le titre : « Comment utiliser l'IA directement sur votre Kindle. »

Tour 4 : Trouve le sélecteur de langue (cette petite icône de globe). Clique dessus.

Tour 5 : Le menu s'ouvre. Clique sur « Español. »

Tour 6 : La version espagnole se charge. « Le contenu a changé. Ça fonctionne. »

Tour 7 : Passe à l'allemand. Clique à nouveau sur le sélecteur de langue.

Tour 8 : La page se charge en allemand. « Attendez, cette page semble presque vide. Elle n'affiche qu'un point. Le contenu est manquant. » S'arrête immédiatement.

Il a trouvé le bug (vous pouvez en savoir plus sur ce qui a causé les pages traduites vides ici). Ensuite, il a généré un rapport détaillé :

📊 RAPPORT FINAL
⚠️  1 problème(s) trouvé(s):

[ES] - 1 problème(s):
Article : Cómo usar IA directamente en tu Kindle
URL : .../traer-ia-a-kindle-como-construi-chatgpt-para-lectores-electronicos
Problème : La page s'est chargée mais la zone de contenu est vide, affichant seulement un point de puce.
Étapes : Page d'accueil → Blog → Clic sur l'article → Contenu manquant

L'IA a détecté le problème exact que je recherchais. Elle a même décrit ce qu'elle voyait (page vide avec juste un point) et a listé les étapes pour reproduire.

Problèmes rencontrés

Lors de la première exécution, j'ai obtenu une erreur 503. L'API est en préversion et est surchargée. Je l'ai relancée, et cela a fonctionné sans problème.

Le modèle prend en charge 13 actions : open_web_browser, wait_5_seconds, go_back, go_forward, search, navigate, click_at, hover_at, type_text_at, key_combination, scroll_document, scroll_at, et drag_and_drop. Je n'en ai implémenté que 7 pour ce test. Pour une véritable suite de tests, vous voudriez toutes les implémenter.

Chaque capture d'écran représente 50 à 100 Ko envoyés à l'API. Mon test a envoyé environ 30 captures d'écran. Cela s'accumule si vous testez beaucoup.

Utilité

Pour les tests, les tests Playwright normaux ressemblent à ceci :

await page.click('[data-testid="lang-switcher"]');
await page.click('[data-lang="es"]');
expect(await page.textContent('h1')).toBe('Cómo usar IA...');

Avec Computer Use, vous dites simplement : « Passe en espagnol et vérifie que le titre a changé. »

Le test IA est plus lent et coûte de l'argent. Mais :

• Beaucoup plus rapide à écrire
• Ne casse pas lorsque vous modifiez les classes CSS
• Fonctionne comme un utilisateur réel
• Idéal pour les vérifications ponctuelles

Autres utilisations possibles

Le modèle n'est pas limité aux tests. La documentation mentionne des cas d'utilisation tels que l'automatisation de la saisie de données répétitives, la recherche sur des sites web et le remplissage de formulaires. Après avoir vu cela fonctionner, j'ai pensé à d'autres applications :

• « Comparer les prix de ce produit sur ces 5 sites web »
• « Remplir ce formulaire de candidature d'emploi avec les données de mon CV »
• « Trouver tous les articles de blog sur le sujet X et les résumer »
• « Surveiller cette page quotidiennement et m'alerter lorsque le contenu change »
• « Extraire tous les détails du produit de ce catalogue dans une feuille de calcul »

Tout ce que vous feriez manuellement dans un navigateur, vous pouvez l'automatiser avec de simples instructions en langage naturel.

Essayez

L'API Gemini dispose d'un niveau gratuit pour les tests, bien que Computer Use utilise la même tarification que Gemini 2.5 Pro (1,25 $ par million de jetons d'entrée). Vous avez besoin :

• D'une clé API de Google AI Studio
• Du paquet npm @google/genai
• De Playwright

Commencez simplement : « Allez sur example.com et dites-moi le titre de la page. » Ensuite, développez à partir de là.

Le nom du modèle est gemini-2.5-computer-use-preview-10-2025.