Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Tests d'UI automatisés avec Antigravity (AGY) CLI, BrowserMCP, Playwright et l'agent de navigateur

1. Introduction

La révolution de l'IA agentique transforme notre façon de créer des logiciels, rendant l'ensemble du processus incroyablement cool, passionnant et accessible. Les tâches et les projets qui prenaient auparavant des mois aux développeurs peuvent désormais être réalisés en une seule session à l'aide d'outils agentiques.

Les tests d'applications Web sont un domaine propice à cette transformation agentique. Traditionnellement, tester des applications Web est une corvée et un combat constant contre la fragilité. Et si vous pouviez contourner complètement cette complexité ? Et si vous pouviez simplement indiquer à un agent ce qu'il doit tester en langage naturel et le laisser réfléchir à la manière de l'exécuter ?

Dans cet atelier de programmation, nous allons explorer comment utiliser Antigravity CLI avec les compétences des agents et les outils MCP multimodaux comme BrowserMCP. Vous apprendrez à créer et à exécuter des tests d'UI automatisés en langage naturel. Vous découvrirez comment les outils agentiques peuvent gérer des tâches complexes et vous donner des superpouvoirs en tant que développeur.

Il est important de noter que, bien que cet atelier de programmation se concentre sur les cas d'utilisation spécifiques de l'automatisation de l'UI et du contrôle à distance du navigateur, ce sont les principes sous-jacents et l'immense éventail de possibilités qu'ils ouvrent qui sont vraiment importants. En apprenant aux agents à utiliser les CLI locales et les serveurs MCP, nous pouvons déléguer des workflows complexes que nous n'aurions pas le temps ou l'expertise spécialisée pour gérer nous-mêmes.

Au programme

Présentation d'Antigravity CLI et de son rôle dans l'écosystème Antigravity.
Découvrez le protocole MCP (Model Context Protocol) et pourquoi il change la donne.
Comment BrowserMCP permet aux agents d'IA de contrôler les navigateurs Web.
Exécuter des tests d'UI automatisés à partir de l'interface de ligne de commande Antigravity
Comprendre les compétences des agents et leurs avantages.
Apprendre à un agent à utiliser Playwright avec une compétence
Comprendre l'agent de navigateur intégré d'Antigravity.
Autres cas d'utilisation du contrôle du navigateur.

Objectifs de l'atelier

Cet atelier de programmation utilise l'interface de ligne de commande Antigravity, les outils MCP, les compétences d'agent et une application de démonstration React.

Vous découvrirez comment :

Configurez votre environnement de développement.
Explorez une application de démonstration qui doit être testée.
Utilisez Antigravity CLI pour interagir avec l'application via BrowserMCP.
Apprenez à votre agent comment utiliser Playwright avec une compétence d'agent.

2. L'écosystème Antigravity

En mai 2026, Google a lancé la nouvelle suite Antigravity. Il s'agissait d'une refonte majeure d'Antigravity, qui a été divisée en quatre produits :

Antigravity 2.0, qui est désormais l'environnement de "création" dédié aux agents sur votre ordinateur. Il est à noter qu'il n'inclut pas lui-même d'IDE. Au lieu de cela, nous n'interagissons plus qu'avec le gestionnaire d'agents. Cette interface vise à inaugurer l'ère de l'idée au produit à l'aide d'agents, sans se soucier du code. De nombreux créateurs qui ne sont pas issus du monde du code apprécieront cette fonctionnalité.
L'IDE Antigravity, qui nous offre un environnement de codage plus familier de type VS Code, pris en charge par le harnais d'agent Antigravity. Ici, nous pouvons effectuer un développement assisté par un agent et nous voyons toujours le code. Les développeurs se sentiront à l'aise ici.
Le SDK Antigravity, qui vous fournit le harnais et les outils qui alimentent Antigravity, mais exposé en tant que SDK d'agent Python. En important depuis google.antigravity, nous pouvons exploiter les capacités d'Antigravity de manière programmatique.
Antigravity CLI, qui est la prochaine évolution de l'excellente Gemini CLI. Il s'agit toujours d'un environnement axé sur le terminal pour interagir avec les modèles Gemini. Mais la nouvelle CLI Antigravity est conçue en Go, et cela se voit : elle est beaucoup plus rapide que Gemini CLI, à la fois au démarrage et en utilisation générale. Il utilise le même "harnais" d'agent qu'Antigravity 2.0 et l'IDE, ce qui permet d'avoir des paramètres et une configuration communs à l'ensemble de la suite Antigravity.

Bien que cet atelier se concentre sur l'utilisation de l'interface de ligne de commande Antigravity, tout ce qui y est présenté peut également être effectué avec Agy IDE ou Agy 2.0.

3. Prérequis

Avant de passer aux choses intéressantes, vérifions que vous avez tout ce dont vous avez besoin.

Outils

Dans cet atelier, nous partons du principe que vous disposez déjà des éléments suivants :

Navigateur Chrome
Node.js
CLI Antigravity
Git

Pour utiliser l'interface de ligne de commande Antigravity, vous devez vous authentifier auprès de Google. Lorsque vous lancez agy pour la première fois, il vous invite automatiquement à vous connecter avec Google Sign-In via votre navigateur Web par défaut. Cette option est associée à un quota sans frais généreux d'utilisation de Gemini et ne nécessite pas de projet Google Cloud. Si vous disposez d'une clé API Gemini ou d'un projet Google Cloud, vous pouvez également configurer cette option.

Les instructions supposent que vous travaillez dans un environnement Linux (ou WSL) ou macOS. Si vous êtes sous Windows (comme moi), vous pouvez suivre le tutoriel en utilisant WSL.

(Notez que BrowserMCP ne fonctionnera pas depuis Google Cloud Shell, car il ne se connectera qu'à un navigateur local exécuté sur la même machine.)

Configurer l'environnement de développement

J'ai créé un dépôt de démonstration sur GitHub. Il inclut un exemple d'application que nous pouvons utiliser pour nos tests d'interface utilisateur. Clonez-le en exécutant cette commande depuis votre terminal local :

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

Un fichier Makefile vous permet de configurer facilement l'environnement pour lancer l'application de démonstration. Exécutons-le pour initialiser notre environnement :

make install

# Or if you don't have make
npm install --prefix demo-app

4. Notre application de démonstration

L'application que nous testons aujourd'hui est The Dazbo Omni-Dash, un tableau de bord futuriste à thème sombre permettant de gérer la télémétrie de sécurité. (Oui, il a été codé avec des vibrations !)

Pourquoi cette application ?

Il est conçu pour fournir une surface de test réaliste avec :

Authentification fictive : flux de connexion nécessitant des identifiants spécifiques.
Contenu dynamique : fiches de télémétrie et journaux de sécurité qui simulent des données en temps réel.
États interactifs : menus de navigation et saisies de formulaire qui changent en fonction de l'action de l'utilisateur.
Technologie moderne : conçu avec React et Vite pour une expérience rapide et réactive.

Lancer l'application

Pour démarrer l'application, exécutez simplement la commande suivante :

make dev

# Or if you don't have make
npm run dev --prefix demo-app

Le serveur de développement devrait démarrer très rapidement, et l'application sera disponible à l'adresse http://localhost:5173.

Il vous suffit de cliquer sur le lien pour ouvrir l'application dans votre navigateur. Laissez simplement ce processus s'exécuter dans votre terminal. Nous exécuterons les commandes de terminal suivantes dans une session de terminal distincte.

5. Le défi des tests d'UI

Les tests d'UI traditionnels sont notoirement difficiles à mettre en place et encore plus à maintenir. Voici quelques difficultés courantes :

Courbe d'apprentissage élevée : les développeurs doivent investir énormément de temps pour maîtriser des langages spécifiques à un domaine complexe et des particularités propres à un framework (comme Selenium ou Playwright) juste pour automatiser une interaction de base.
Sélecteurs et automatisation fragiles : les scripts traditionnels s'appuient sur des structures DOM rigides (comme div > div > button) ou des libellés de texte spécifiques. Que se passe-t-il si vous renommez un bouton "Se déconnecter" en "Se déconnecter" ? Ou déplacer un bouton vers un menu complètement différent ? Ou modifier la structure de votre code HTML ? Les outils de test traditionnels ne fonctionneront pas dans ce cas, ce qui vous obligera à effectuer une maintenance constante des scripts.
Test de "flakiness" : tests qui réussissent une minute et échouent la suivante en raison de problèmes de timing, de conditions de concurrence ou d'assets à chargement lent.
Parité de l'environnement : difficulté à reproduire les états d'application et surcharge liée au nettoyage des données de test.

Intention vs implémentation

Pour résoudre ces problèmes, nous avons besoin d'une méthode de test axée sur l'intention plutôt que sur l'implémentation.

En utilisant des outils d'IA agentique, nous pouvons créer une automatisation reproductible qui est complètement isolée des modifications mineures de l'UI et des changements structurels. Au lieu de coder en dur des noms, des libellés ou la hiérarchie exacte des objets, l'agent exécute des actions en fonction de l'intention de l'utilisateur en langage naturel. Si un bouton se déplace ou si son libellé change légèrement, les capacités multimodales de l'agent lui permettent de localiser l'élément et d'accomplir la tâche avec succès.

6. Le MCP à la rescousse

Le Model Context Protocol (MCP) est une norme ouverte qui permet aux modèles et agents d'IA d'interagir avec des outils, des API et des données externes. Considérez-le comme un adaptateur universel qui permet aux modèles et aux agents de trouver et d'exécuter les outils auxquels ils ont accès.

Traditionnellement, l'intégration de grands modèles de langage (LLM) avec des données et des outils externes obligeait les développeurs à écrire des connexions d'API personnalisées et codées en dur pour chaque nouvelle source de données. Cela créait un problème d'intégration "M x N" insoutenable, où chaque nouveau modèle et outil multipliait la charge de maintenance. Le protocole MCP (Model Context Protocol) résout ce problème en supprimant la nécessité d'écrire du code spécifique pour orchestrer ces capacités. Au lieu de coder explicitement des workflows d'exécution complexes, les développeurs peuvent s'appuyer sur le LLM pour interpréter les requêtes en langage naturel d'un utilisateur et déterminer de manière dynamique les outils à utiliser à la volée.

Lorsqu'un utilisateur émet une commande en langage naturel (par exemple, "Accède à localhost:5173, connecte-toi en tant qu'administrateur et clique sur le bouton "Envoyer""), le LLM découvre les fonctionnalités disponibles et génère une requête structurée pour invoquer un outil spécifique. Le client MCP sert de traducteur, en acheminant cette requête vers le serveur MCP désigné, qui exécute l'action ou récupère les données et renvoie le contexte au modèle. L'IA peut ainsi agir de manière autonome sans que le développeur ait à coder en dur le chemin d'exécution spécifique.

Comme MCP crée une norme universelle (souvent décrite comme l'équivalent de l'USB-C pour les applications d'IA), il permet une réutilisation prête à l'emploi à grande échelle. Les développeurs peuvent créer un serveur MCP une seule fois, et n'importe quel hôte d'IA compatible avec MCP peut s'y connecter instantanément, ce qui élimine le problème d'intégration M x N. Vous n'avez plus besoin de créer des ponts d'API personnalisés pour chaque plate-forme. Vous pouvez à la place exploiter l'écosystème de serveurs MCP Open Source prédéfinis pour les services courants tels que GitHub, Slack, les bases de données, etc., et les intégrer directement à vos workflows d'agent. Cette architecture modulaire et plug-and-play garantit que votre infrastructure d'intégration de base reste complètement inchangée si vous changez de fournisseur de LLM ou si vous mettez à niveau vos outils ultérieurement.

7. Automatisation avec BrowserMCP

Qu'est-ce que BrowserMCP ?

Il s'agit du premier outil que nous allons utiliser aujourd'hui. BrowserMCP est un serveur MCP qui donne aux agents d'IA les "yeux" et les "mains" dont ils ont besoin pour interagir avec un navigateur Web. En résumé, il imite l'interaction humaine avec un navigateur. Il est open source. Vous pouvez consulter le dépôt GitHub ici. Consultez la documentation principale de BrowserMCP ici.

Voici quelques-unes de ses fonctionnalités :

Il peut accéder à des URL.
Il peut inspecter le DOM.
Il peut cliquer sur des boutons et saisir du texte dans des formulaires.
Il peut effectuer des opérations de glisser-déposer.
Il peut lire les journaux de la console du navigateur.
C'est rapide : l'automatisation se produit localement sur votre ordinateur.

Installer Browser MCP

Pour utiliser BrowserMCP, vous devez effectuer deux opérations :

Installez l'extension BrowserMCP dans Chrome (ou tout autre navigateur basé sur Chromium).
Configurez manuellement le serveur MCP dans votre configuration Antigravity.

Pour installer l'extension, suivez simplement les instructions ici. Cela ne prend que quelques secondes. Une fois l'extension installée, cliquez sur "Connecter" pour autoriser votre agent à contrôler l'onglet actuel. (Évidemment, l'onglet actuel doit être celui où l'application de démonstration est en cours d'exécution.)

Nous allons ensuite configurer le serveur MCP dans Antigravity. Pour ce faire, nous ajoutons la définition du serveur browsermcp à notre fichier mcp_config.json global.

Créez ou modifiez le fichier ~/.gemini/config/mcp_config.json et ajoutez la configuration suivante :

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

Pour obtenir un tutoriel détaillé sur la configuration des serveurs et des compétences MCP dans l'écosystème Antigravity, consultez les ressources suivantes :

Tester avec BrowserMCP

Passons maintenant à la partie magique. Tout d'abord, lançons l'interface de ligne de commande Antigravity (en exécutant agy) dans une nouvelle session de terminal. (Rappelons que l'application de démonstration s'exécute dans notre session de terminal initiale.) Dans l'interface utilisateur interactive, saisissez /mcp pour vérifier la liste des outils actifs et vous assurer que browsermcp est disponible.

Si vous n'avez pas démarré l'application de démonstration plus tôt, lancez-la maintenant :

make dev

Si vous ne l'avez pas déjà fait, vous devez ouvrir l'application dans votre navigateur Chrome et connecter l'extension BrowserMCP dans cet onglet. Suivez le lien de la commande run, puis cliquez sur l'icône de l'extension BrowserMCP et sur "Connect" (Connecter).

Nous pouvons maintenant utiliser l'interface de ligne de commande Agy pour exécuter un test. Copiez et collez ce prompt dans la CLI :

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

La CLI peut d'abord vérifier que l'application de démonstration s'exécute sur le port spécifié. Elle vous invite ensuite à confirmer les actions de l'outil qu'elle prévoit d'effectuer.

Autorisez la CLI à exécuter tous les outils BrowserMCP pour cette session. Revenez ensuite au navigateur et regardez les interactions automatisées se dérouler.

Voici quelques points à noter concernant la requête ci-dessus :

Nous commençons par demander à l'agent de se déconnecter si l'application est déjà connectée. Notez que nous n'avons pas besoin de demander à l'agent de cliquer sur un texte spécifique comme "Quitter la passerelle". Il est suffisamment intelligent pour savoir sur quoi cliquer.
Une fois connecté et la page principale affichée, l'agent capture les informations de télémétrie. Là encore, nous n'avons pas besoin de demander à l'agent de rechercher des tuiles spécifiques ni de faire correspondre des mots spécifiques. Par conséquent, si nous devions ultérieurement étendre ou modifier les informations affichées sur cette page, cette requête fonctionnerait toujours et le résultat serait toujours capturé dans notre tableau Markdown.

Pas mal, non ?

Nous en avons terminé avec BrowserMCP pour le moment. Déconnectez-le dans votre navigateur.

8. Automatisation avec Skills et Playwright

Limites de BrowserMCP

BrowserMCP est un excellent outil, mais il présente quelques limites. Exemple :

Il nécessite une session de navigateur existante, avec l'extension BrowserMCP connectée. (Elle ne génère pas de nouvelles sessions.)
Elle n'est pas compatible avec les navigateurs autres que Chromium.
Il nécessite l'exécution d'un processus de navigateur distinct sur la même machine que celle sur laquelle le serveur MCP s'exécute.
Il n'est pas en mesure de fonctionner avec le système de fichiers local. Par exemple, il ne peut pas créer de fichiers locaux pour les captures d'écran ni télécharger et stocker des fichiers depuis l'application Web, comme des PDF téléchargeables.
Il n'est pas déterministe. Il tentera d'effectuer les actions que vous lui demandez, mais l'état local, comme un pop-up inattendu, peut interrompre l'interaction.
Il n'est pas compatible avec le fonctionnement "sans interface graphique", ce qui signifie qu'il ne peut pas s'exécuter dans un pipeline CI/CD sans fenêtre de navigateur réelle.

Playwright

Playwright est un outil beaucoup plus sophistiqué. Il s'agit d'un framework de test et d'automatisation de navigateur Open Source bien établi. Il peut faire beaucoup de choses que BrowserMCP ne peut pas faire, y compris tous les points que j'ai mentionnés ci-dessus.

Il est beaucoup plus adapté à l'exécution de scénarios de test complexes, fiables et reproductibles. Il est particulièrement adapté aux sessions de longue durée ou à l'exécution de plusieurs sessions indépendantes en parallèle.

Mais cette capacité supplémentaire s'accompagne d'une courbe d'apprentissage beaucoup plus abrupte.

Compétences

Heureusement, nous n'avons pas besoin d'apprendre à utiliser Playwright directement. Nous pouvons plutôt utiliser une compétence d'agent.

Qu'est-ce qu'une compétence d'agent ? Considérez-le comme un ensemble d'expertise dans un domaine spécifique que vous pouvez transmettre à votre agent d'IA lorsqu'il doit effectuer une tâche spécifique. Il contient des instructions, des bonnes pratiques et parfois même des scripts d'aide adaptés à une tâche spécifique.

Voici la partie vraiment astucieuse : la divulgation progressive. Au lieu de bourrer chaque documentation d'API et règle de framework de test imaginable dans l'invite système initiale du LLM (ce qui consomme votre fenêtre de contexte et brûle des jetons à tout-va), l'agent ne lit la compétence que lorsqu'il en a réellement besoin. Il maintient le contexte de base simple et efficace, en récupérant les instructions détaillées juste à temps. Et oui, une compétence peut tout à fait inclure des instructions sur la façon d'utiliser des serveurs MCP spécifiques pour accomplir une tâche.

Imaginez la scène dans Matrix : l'agent est confronté à un problème, se rend compte qu'il a besoin de connaître Playwright, télécharge la compétence et, tout à coup, "il connaît le kung-fu". Le micro sur perche. Devenez un expert instantanément.

Pour en savoir plus sur les compétences, consultez les ressources suivantes :

Pourquoi les compétences sont idéales pour Playwright

Utiliser une compétence ici est un excellent choix. Playwright est incroyablement puissant, mais sa syntaxe peut être délicate. En donnant à l'agent une compétence Playwright, nous n'avons pas à nous soucier de notre LLM qui hallucine une syntaxe obsolète ou écrit des sélecteurs fragiles. Nous lui donnons un playbook organisé et faisant autorité sur la façon d'utiliser correctement Playwright.

Je vais utiliser la CLI Playwright et la compétence associée.

Avec cette approche, nous installons Playwright CLI en local, puis nous fournissons à notre agent les connaissances dont il a besoin pour l'utiliser. Pour éviter toute confusion, je ne vais installer aucun serveur MCP Playwright.

Installation

Commençons par installer la CLI Microsoft Playwright Open Source. Si vous ne l'avez pas déjà fait, quittez la CLI interactive en saisissant /quit``. Ensuite, dans votre terminal :

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

Ajoutons maintenant la compétence. Cette commande téléchargera le sous-dossier de compétence directement depuis GitHub dans notre dossier de compétences Gemini :

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

Nous pouvons maintenant le tester.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

Une session de navigateur doit s'ouvrir sur l'URL spécifiée.

Je veux également que Gemini puisse utiliser Playwright en mode "headed", c'est-à-dire avec une interface utilisateur visible. Mais la compétence n'indique pas à Gemini comment faire. J'ai donc ajouté ces lignes à ~/.gemini/skills/playwright-cli/SKILL.md dans la section Core :

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Tester avec Playwright

Comme précédemment, nous devons lancer l'application (si elle n'est pas déjà en cours d'exécution). Effectuez cette opération depuis la session de terminal initiale :

make dev

Ensuite, dans l'autre session de terminal, désactivons temporairement BrowserMCP pour que l'agent ne se trompe pas d'outils à utiliser. Relancez Antigravity CLI (agy). Nous pouvons désactiver temporairement le serveur browsermcp directement via l'interface utilisateur :

Saisissez /mcp dans le champ de requête pour ouvrir le panneau de gestion MCP.
Utilisez les touches fléchées (haut/bas) pour sélectionner browsermcp, puis appuyez sur Entrée.
Déplacez-vous vers la droite pour sélectionner "Désactiver", puis appuyez sur Entrée pour désactiver l'option.

Nous allons maintenant demander à l'agent d'accéder à notre application avec Playwright. Mais contrairement à BrowserMCP, nous n'avons pas besoin de démarrer le navigateur en premier. Playwright le fera pour nous avec un processus local.

Saisissez cette invite dans la CLI Agy :

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(Comme toujours, l'interface CLI vous demandera l'autorisation avant d'exécuter des outils.)

Qu'est-ce qui change ?

Nous n'avons pas eu besoin de démarrer le navigateur en premier.
Nous n'avons pas eu besoin de démarrer ni de connecter une extension de navigateur.
Nous n'avons pas besoin de demander à l'agent de se déconnecter en premier. Le test est instancié à partir d'une session "propre".
Nous pouvons faire des captures d'écran et les enregistrer en tant que fichiers locaux.

Peu de temps après, un fichier dashboard.png devrait s'afficher dans le dossier de sortie.

Notez que vous verrez les appels d'outils s'exécuter dans l'interface de ligne de commande Agy, mais pas dans l'interface utilisateur du navigateur. En effet, Playwright s'exécute par défaut en mode "sans affichage".

Mais si vous exécutez à nouveau la requête avec cette invite modifiée, vous pourrez également voir l'UI :

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Le résultat de l'interface de ligne de commande Agy devrait ressembler à ceci :

C'était génial, non ?

9. Agent de navigation intégré d'Antigravity

Google Antigravity est équipé de son propre agent de navigateur intégré ( sous-agent de navigateur) qui fournit une automatisation du navigateur prête à l'emploi, sans que vous ayez à installer un outil distinct comme Playwright CLI.

Fonctionnement

Pour contrôler votre navigateur, l'agent de navigateur intégré fonctionne directement via le protocole Chrome DevTools (CDP). Il n'est donc pas nécessaire d'utiliser des extensions de navigateur ni des plug-ins intermédiaires dans Antigravity 2.0 et l'IDE.

Lorsqu'il est lancé, Antigravity se connecte à votre instance Chrome via un port de débogage local sur une connexion WebSocket. Les instructions de haut niveau de l'agent sont directement traduites en commandes CDP de bas niveau qui :

manipuler le DOM de la page (par exemple, cliquer sur des éléments ou saisir du texte) ;
Contrôlez l'état du navigateur et déclenchez la navigation.
Capturez des frames et des données visuelles en temps réel.

En combinant le contrôle direct du CDP à l'analyse visuelle et multimodale, le sous-agent prend en compte votre objectif général (par exemple, "vérifier que le tableau de bord affiche les valeurs de télémétrie correctes"), analyse visuellement la page pour déterminer les actions requises et les exécute lui-même. Il enregistre également automatiquement des vidéos et prend des captures d'écran de ses actions, en les enregistrant directement dans votre espace de travail en tant qu'artefacts pour servir de preuve visuelle de l'exécution du test.

Disponibilité de l'outil

L'agent de navigateur intégré n'est pas encore compatible avec la CLI Antigravity (Agy CLI), qui est axée sur le terminal. Toutefois, vous pouvez l'utiliser immédiatement dans Antigravity IDE et Antigravity 2.0. Nous espérons que la compatibilité avec l'agent de navigateur sera bientôt disponible dans l'interface de ligne de commande Agy.

Remarque pour les utilisateurs de WSL : Il est désormais beaucoup plus facile de faire fonctionner l'agent de navigateur dans Antigravity sous WSL. Au lieu de gérer le routage réseau et le transfert de port complexes, il vous suffit d'activer le mode réseau "en miroir" dans votre configuration WSL. Pour obtenir une procédure pas à pas complète, consultez le guide Résoudre les problèmes liés à WSL avec Google Antigravity : Agy 2.0 et Agy IDE Edition.

10. Autres cas d'utilisation de l'automatisation du navigateur

L'automatisation du navigateur ne consiste pas seulement à s'assurer que votre bouton de connexion fonctionne avant un déploiement le vendredi après-midi. Une fois que vous avez compris que vous pouvez connecter un LLM directement à un navigateur, tout un nouveau monde de projets autonomes et personnalisés s'ouvre à vous.

Si vous créez vos propres agents d'IA, voici quelques façons d'utiliser des outils comme BrowserMCP ou Playwright CLI pour vous faciliter la tâche :

L'assistant de recherche personnel : imaginez que vous demandiez à votre agent de faire des recherches sur un sujet à partir d'une URL spécifique, mais que le site nécessite de se connecter et de parcourir des menus complexes. Au lieu d'écrire un scraper Web personnalisé qui ne fonctionnera plus la semaine prochaine, vous demandez simplement à votre agent de se connecter, d'accéder aux données et de les résumer pour vous.
L'intégrateur "Swivel-Chair" : nous avons tous ces anciens systèmes intranet qui n'ont pas d'API. Vous savez de quoi il s'agit : vous devez copier manuellement des données du système A et les coller dans un formulaire du système B. Un agent doté de l'automatisation du navigateur peut servir de lien universel, en lisant l'écran de l'ancien système et en remplissant le formulaire dans le nouveau.
Tri et correction automatisés : vous avez reçu une alerte P1 de votre système de surveillance à 3h du matin ? Votre agent peut ouvrir automatiquement l'URL du tableau de bord spécifique, lire les graphiques ou les journaux (à l'aide de ses capacités de vision multimodale) et publier un récapitulatif directement dans votre canal Slack, ce qui vous fait gagner de précieuses minutes en cas d'incident.

L'avantage de cette approche est que vous n'êtes plus limité par les API disponibles. Si un humain peut le faire dans un navigateur, votre agent le peut aussi.

11. Conclusion

Félicitations ! Vous venez de créer et d'exécuter des tests d'interface utilisateur automatisés et robustes en indiquant simplement à un agent IA ce que vous vouliez qu'il fasse en langage courant. Pas de sélecteurs CSS fragiles ni de scripts de configuration complexes.

Vous avez appris à :

Les tests d'UI ne doivent pas être douloureux : en se concentrant sur l'intention du test plutôt que sur l'implémentation DOM fragile, nous pouvons réduire considérablement les frais généraux de maintenance.
Le Model Context Protocol (MCP) offre à vos agents un accès universel et plug-and-play aux outils, aux données et aux environnements.
BrowserMCP est un outil incroyable qui permet d'intégrer des capacités agentiques dans vos sessions Chrome locales existantes.
Les compétences et Playwright CLI permettent d'atteindre un nouveau niveau de tests d'automatisation reproductibles et déterministes, le tout grâce à la divulgation progressive.
Le sous-agent de navigateur d'Antigravity va encore plus loin en introduisant la navigation autonome et multimodale, ainsi que l'enregistrement d'artefacts prêts à l'emploi.

À vous de jouer ! Automatisez les tâches ennuyeuses.

12. Liens utiles

Si vous souhaitez approfondir les outils et les concepts que nous avons abordés aujourd'hui, consultez les ressources suivantes :

Code du dépôt

Dépôt GitHub agentic-ui-testing : n'hésitez pas à ajouter une étoile au dépôt si vous avez trouvé cet atelier de programmation utile.

Outils et frameworks de base

Concepts et compétences agentiques

Autre