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

Automatisierte UI-Tests mit der Antigravity (AGY) CLI, BrowserMCP, Playwright und dem Browser-Agent

1. Einführung

Die agentische KI-Revolution verändert die Art und Weise, wie wir Software entwickeln. Der gesamte Prozess fühlt sich unglaublich cool, spannend und zugänglich an. Aufgaben und Projekte, für die Entwickler früher Monate gebraucht hätten, können jetzt in einer einzigen Sitzung mit agentischen Tools erledigt werden.

Ein Bereich, der sich für diese agentische Transformation anbietet, ist das Testen von Webanwendungen. Das Testen von Web-Apps war bisher mühsam und ein ständiger Kampf gegen die Fragilität. Was wäre aber, wenn Sie diese Komplexität komplett umgehen könnten? Stellen Sie sich vor, Sie könnten einem Agenten einfach in natürlicher Sprache sagen, was er testen soll, und er würde selbst entscheiden, wie er das umsetzt.

In diesem Codelab erfahren Sie, wie Sie die Antigravity CLI zusammen mit Agent-Skills und multimodalen MCP-Tools wie BrowserMCP verwenden. Sie erfahren, wie Sie automatisierte UI-Tests mit natürlicher Sprache erstellen und ausführen. Außerdem wird gezeigt, wie agentgestützte Tools komplexe Aufgaben bewältigen und Ihnen als Entwickler zusätzliche Möglichkeiten bieten können.

In diesem Codelab geht es zwar um die spezifischen Anwendungsfälle der UI-Automatisierung und der Browser-Fernsteuerung, aber die zugrunde liegenden Prinzipien und die damit verbundenen Möglichkeiten sind wirklich wichtig. Indem wir Agents beibringen, lokale CLIs und MCP-Server zu verwenden, können wir komplexe Workflows delegieren, für die wir sonst keine Zeit oder kein Fachwissen hätten.

Lerninhalte

Was die Antigravity CLI ist und wie sie in das Antigravity-Ökosystem passt.
Was das Model Context Protocol (MCP) ist und warum es ein Gamechanger ist.
Wie KI-Agenten mit BrowserMCP Webbrowser steuern können.
Automatisierte UI-Tests über die Antigravity CLI ausführen
Agent Skills und ihre Vorteile verstehen.
Einem Agent beibringen, Playwright mit einem Skill zu verwenden
Informationen zum integrierten Browser-Agent von Antigravity
Weitere Anwendungsfälle für die Browsersteuerung.

Aufgaben

In diesem Codelab werden die Antigravity CLI, MCP-Tools, Agenten-Skills und eine React-Demoanwendung verwendet.

Sie werden Folgendes tun:

Richten Sie Ihre Entwicklungsumgebung ein.
Eine Demoanwendung ansehen, die getestet werden muss.
Mit der Antigravity CLI über BrowserMCP mit der Anwendung interagieren
Sie können Ihrem Agent beibringen, wie er Playwright mit einem Agent-Skill verwendet.

2. Das Antigravity-Ökosystem

Im Mai 2026 hat Google die neue Antigravity-Suite eingestellt. Das war eine grundlegende Überarbeitung von Antigravity und eine Aufteilung in die folgenden vier Produkte:

Antigravity 2.0 ist jetzt die spezielle „Builder“-Umgebung für KI-Agenten auf Ihrem Computer. Sie enthält keine IDE. Stattdessen interagieren wir jetzt nur noch mit dem KI-Agenten-Manager. Diese Oberfläche soll das Zeitalter von „Idee zum Produkt“ mit Agenten einleiten, ohne dass wir uns um den Code kümmern müssen. Viele Entwickler ohne Programmierkenntnisse werden sich darüber freuen.
Antigravity IDE, die uns eine vertrautere VS Code-ähnliche Entwicklungsumgebung bietet, die vom Antigravity-Agent-Harness unterstützt wird. Hier können wir die Entwicklung mit Agentenunterstützung durchführen und sehen immer den Code. Hier fühlen sich Programmierer wohl.
Das Antigravity SDK bietet Ihnen die Harness und Tools, die Antigravity zugrunde liegen, aber als Python Agent SDK verfügbar sind. Durch den Import von „google.antigravity“ können wir die Funktionen von Antigravity programmatisch nutzen.
Die Antigravity CLI ist die Weiterentwicklung der Gemini CLI. Sie ist weiterhin eine Terminalumgebung für die Interaktion mit Gemini-Modellen. Die neue Antigravity CLI ist jedoch in Go geschrieben und fühlt sich sowohl beim Start als auch bei der allgemeinen Verwendung viel schneller an als die Gemini CLI. Sie nutzt dieselbe Agent-„Harness“ wie Antigravity 2.0 und die IDE. Dadurch sind gemeinsame Einstellungen und Konfigurationen in der gesamten Antigravity-Suite möglich.

In diesem Lab wird die Antigravity CLI verwendet. Alle Schritte können aber auch mit Agy IDE oder Agy 2.0 ausgeführt werden.

3. Vorbereitung

Bevor wir uns die coolen Funktionen ansehen, sollten wir sicherstellen, dass du alles hast, was du brauchst.

Tools

In diesem Lab wird Folgendes vorausgesetzt:

Chrome-Browser
Node.js
Antigravity CLI
Git

Wenn Sie die Antigravity CLI verwenden möchten, müssen Sie sich bei Google authentifizieren. Wenn Sie agy zum ersten Mal starten, werden Sie automatisch aufgefordert, sich über Ihren Standardwebbrowser mit Google Log-in anzumelden. Diese Option bietet ein großzügiges kostenloses Kontingent für die Gemini-Nutzung und erfordert kein Google Cloud-Projekt. Wenn Sie einen Gemini API-Schlüssel oder ein Google Cloud-Projekt haben, können Sie dies auch konfigurieren.

In der Anleitung wird davon ausgegangen, dass Sie in einer Linux- (oder WSL-) oder macOS-Umgebung arbeiten. Wenn Sie Windows verwenden (wie ich), können Sie WSL verwenden.

BrowserMCP funktioniert nicht in Google Cloud Shell, da es nur eine Verbindung zu einem lokalen Browser herstellt, der auf demselben Computer ausgeführt wird.

Entwicklungsumgebung einrichten

Ich habe ein Demo-Repository auf GitHub erstellt. Sie enthält eine Beispielanwendung, die wir für unsere UI-Tests verwenden können. Klonen Sie es mit dem folgenden Befehl in Ihrem lokalen Terminal:

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

Es gibt ein Makefile, mit dem Sie die Umgebung zum Starten der Demo-App ganz einfach einrichten können. Führen Sie es aus, um die Umgebung zu initialisieren:

make install

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

4. Unsere Demoanwendung

Die App, die wir heute testen, ist The Dazbo Omni-Dash – ein futuristisches, dunkles Dashboard zur Verwaltung von Sicherheitstelemetriedaten. (Ja, es wurde Vibe Coding verwendet!)

Warum diese App?

Es wurde entwickelt, um eine realistische Testumgebung zu bieten, mit:

Mock-Authentifizierung: Ein Anmeldevorgang, für den bestimmte Anmeldedaten erforderlich sind.
Dynamischer Content: Telemetriekarten und Sicherheitsprotokolle, die Echtzeitdaten simulieren.
Interaktive Status: Navigationsmenüs und Formulareingaben, die sich je nach Nutzeraktion ändern.
Moderne Technologie: Die App wurde mit React und Vite entwickelt und bietet eine schnelle, reaktionsschnelle Benutzeroberfläche.

App starten

Führen Sie zum Starten der Anwendung einfach Folgendes aus:

make dev

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

Der Entwicklungsserver sollte sehr schnell starten und die App ist unter http://localhost:5173 verfügbar.

Wir können einfach auf den Link klicken, um die Anwendung in unserem Browser zu öffnen. Lassen Sie diesen Prozess einfach in Ihrem Terminal laufen. Wir führen die nachfolgenden Terminalbefehle in einer separaten Terminalsitzung aus.

5. Herausforderungen beim UI-Testen

Herkömmliche UI-Tests sind bekanntermaßen schwierig durchzuführen und noch schwieriger zu warten. Häufige Probleme:

Hohe Lernkurve: Entwickler müssen viel Zeit investieren, um komplexe domänenspezifische Sprachen und frameworkspezifische Besonderheiten (z. B. Selenium oder Playwright) zu beherrschen, nur um eine grundlegende Interaktion zu automatisieren.
Anfällige Selektoren und Automatisierung: Herkömmliche Skripts basieren auf starren DOM-Strukturen (z. B. div > div > button) oder bestimmten Textlabels. Was passiert, wenn Sie die Schaltfläche „Abmelden“ in „Abmelden“ umbenennen? Oder einen Button in ein ganz anderes Menü verschieben? Oder haben Sie die Struktur Ihres HTML-Codes geändert? Bei herkömmlichen Testtools treten in diesen Fällen Fehler auf, was zu einer ständigen Wartung der Skripts führt.
Test auf „Flakiness“: Tests, die in einer Minute bestanden werden und in der nächsten aufgrund von Timing-Problemen, Race Conditions oder langsam ladenden Assets fehlschlagen.
Umgebungsparität: Schwierigkeiten beim Replizieren von Anwendungsstatus und der Aufwand beim Bereinigen von Testdaten.

Absicht im Vergleich zur Implementierung

Um diese Probleme zu beheben, benötigen wir eine Möglichkeit, die sich auf die Intention und nicht auf die Implementierung konzentriert.

Durch den Einsatz von agentischer KI können wir wiederholbare Automatisierungen erstellen, die vollständig von kleineren Änderungen an der Benutzeroberfläche und strukturellen Änderungen isoliert sind. Anstatt Namen, Labels oder die genaue Hierarchie von Objekten fest zu codieren, führt der Agent Aktionen basierend auf der Intention des Nutzers in natürlicher Sprache aus. Wenn sich ein Button verschiebt oder sich sein Label leicht ändert, kann der Agent das Element mithilfe seiner multimodalen Funktionen finden und die Aufgabe erfolgreich ausführen.

6. MCP als Retter in der Not

Das Model Context Protocol (MCP) ist ein offener Standard, der es KI-Modellen und ‑Agents ermöglicht, mit externen Tools, APIs und Daten zu interagieren. Stellen Sie sich vor, es ist der universelle Adapter, mit dem Modelle und Agenten die Tools finden und ausführen können, auf die sie Zugriff haben.

Bisher mussten Entwickler zum Einbinden von Large Language Models (LLMs) in externe Daten und Tools für jede neue Datenquelle benutzerdefinierte, fest codierte API-Verbindungen schreiben. Dadurch entstand ein nicht nachhaltiges „M × N“-Integrationsproblem, bei dem jedes neue Modell und Tool den Wartungsaufwand vervielfacht. Das Model Context Protocol (MCP) löst dieses Problem, da kein spezifischer Code mehr erforderlich ist, um diese Funktionen zu orchestrieren. Anstatt komplexe Ausführungsabläufe explizit zu codieren, können sich Entwickler darauf verlassen, dass das LLM die Anfragen von Nutzern in natürlicher Sprache interpretiert und dynamisch entscheidet, welche Tools verwendet werden sollen.

Wenn ein Nutzer einen Befehl in natürlicher Sprache eingibt (z. B. „Rufe localhost:5173 auf, melde dich als ‚admin‘ an und klicke auf die Schaltfläche ‚Senden‘“), ermittelt das LLM die verfügbaren Funktionen und generiert eine strukturierte Anfrage zum Aufrufen eines bestimmten Tools. Der MCP-Client fungiert als Übersetzer und leitet diese Anfrage an den entsprechenden MCP-Server weiter, der die Aktion ausführt oder die Daten abruft und den Kontext an das Modell zurückgibt. So kann die KI autonom agieren, ohne dass der Entwickler den spezifischen Ausführungspfad fest codieren muss.

Da MCP einen universellen Standard schafft, der oft als „USB-C für KI-Anwendungen“ bezeichnet wird, ermöglicht es eine enorme Standardwiederverwendbarkeit. Entwickler können einen MCP-Server einmal erstellen. Jeder MCP-kompatible KI-Host kann sofort eine Verbindung zu ihm herstellen. So wird das M × N-Integrationsproblem vermieden. Sie müssen nicht mehr für jede Plattform benutzerdefinierte API-Bridges erstellen. Stattdessen können Sie das Ökosystem der vorgefertigten Open-Source-MCP-Server für gängige Dienste wie GitHub, Slack und Datenbanken nutzen und sie direkt in Ihre Agent-Workflows einbinden. Diese modulare Plug-and-Play-Architektur sorgt dafür, dass Ihre Kernintegrationsinfrastruktur völlig unverändert bleibt, wenn Sie später den LLM-Anbieter wechseln oder Ihre Tools aktualisieren.

7. Automatisierung mit BrowserMCP

Was ist BrowserMCP?

Das ist das erste Tool, mit dem wir uns heute beschäftigen. BrowserMCP ist ein MCP-Server, der KI-Agents die „Augen“ und „Hände“ gibt, die sie für die Interaktion mit einem Webbrowser benötigen. Kurz gesagt, er ahmt die menschliche Interaktion mit einem Browser nach. Er ist Open Source und das GitHub-Repository finden Sie hier. Die Hauptdokumentation zu BrowserMCP finden Sie hier.

Hier einige Funktionen:

Es kann zu URLs navigieren.
Es kann das DOM untersuchen.
Es kann auf Schaltflächen klicken und Text in Formulare eingeben.
Sie können Elemente per Drag-and-drop verschieben.
Sie kann Browserkonsolen-Logs lesen.
Schnell: Die Automatisierung erfolgt lokal auf Ihrem Computer.

Browser-MCP installieren

Für die Verwendung von BrowserMCP sind zwei Schritte erforderlich:

Installieren Sie die BrowserMCP-Erweiterung in Chrome oder einem anderen Chromium-basierten Browser.
Konfigurieren Sie den MCP-Server manuell in Ihrer Antigravity-Konfiguration.

Folgen Sie einfach dieser Anleitung, um die Erweiterung zu installieren. Das dauert nur wenige Sekunden. Klicken Sie nach der Installation in der Erweiterung auf „Verbinden“, damit Ihr aktueller Tab von Ihrem Agent gesteuert werden kann. Der aktuelle Tab sollte natürlich der Tab sein, auf dem die Demoanwendung ausgeführt wird.

Als Nächstes konfigurieren wir den eigentlichen MCP-Server in Antigravity. Dazu fügen wir die Serverdefinition browsermcp in unsere globale Datei mcp_config.json ein.

Erstellen oder bearbeiten Sie die Datei ~/.gemini/config/mcp_config.json und fügen Sie die folgende Konfiguration hinzu:

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

Eine detaillierte Anleitung zum Einrichten von MCP-Servern und Skills im Antigravity-Ökosystem finden Sie in den folgenden Ressourcen:

Mit BrowserMCP testen

Jetzt kommt der magische Teil. Starten wir zuerst die Antigravity CLI (mit dem Befehl „agy“) in einer neuen Terminalsitzung. Die Demoanwendung wird in der ursprünglichen Terminalsitzung ausgeführt. Geben Sie in der interaktiven TUI „/mcp“ ein, um die Liste der aktiven Tools aufzurufen und zu prüfen, ob browsermcp verfügbar ist.

Wenn Sie die Demoanwendung noch nicht gestartet haben, starten Sie sie jetzt:

make dev

Falls noch nicht geschehen, müssen Sie die App in Ihrem Chrome-Browser öffnen und die BrowserMCP-Erweiterung auf diesem Tab verbinden. Folgen Sie dem Link aus dem run-Befehl. Klicken Sie dann auf das Symbol der BrowserMCP-Erweiterung und auf „Verbinden“.

Jetzt können wir mit der Agy-CLI einen Test ausführen. Kopieren Sie diesen Prompt und fügen Sie ihn in die CLI ein:

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.

Die CLI prüft möglicherweise zuerst, ob die Demoanwendung auf dem angegebenen Port ausgeführt wird. Anschließend werden Sie aufgefordert, die geplanten Tool-Aktionen zu bestätigen.

Ermöglichen Sie der CLI, alle BrowserMCP-Tools für diese Sitzung auszuführen. Kehren Sie dann zum Browser zurück und sehen Sie sich die automatisierten Interaktionen an.

Einige Hinweise zum obigen Prompt:

Zuerst weisen wir den Agenten an, sich abzumelden, falls die Anwendung bereits angemeldet ist. Wir müssen dem Agenten nicht sagen, dass er auf bestimmten Text wie „Exit Gateway“ klicken soll. Er ist intelligent genug, um herauszufinden, worauf er klicken muss.
Nachdem sich der Agent angemeldet und die Hauptseite gerendert hat, erfasst er die Telemetrieinformationen. Auch hier müssen wir dem Agent nicht sagen, dass er in bestimmten Kacheln suchen oder bestimmte Wörter abgleichen soll. Wenn wir die auf dieser Seite angezeigten Informationen später erweitern oder ändern, funktioniert dieser Prompt weiterhin und die Ausgabe wird weiterhin in unserer Markdown-Tabelle erfasst.

Cool, oder?

Wir sind mit BrowserMCP fertig. Trennen Sie die Verbindung in Ihrem Browser.

8. Automatisierung mit Skills und Playwright

Einschränkungen von BrowserMCP

BrowserMCP ist zwar ein tolles Tool, hat aber einige Einschränkungen. Beispiel:

Es ist eine vorhandene Browsersitzung erforderlich, in der die BrowserMCP-Erweiterung verbunden ist. (Es werden keine neuen Sitzungen gestartet.)
Nicht-Chromium-Browser werden nicht unterstützt.
Dazu muss ein separater Browserprozess auf demselben Computer ausgeführt werden, auf dem auch der MCP-Server ausgeführt wird.
Sie kann nicht mit dem lokalen Dateisystem arbeiten. Sie kann beispielsweise keine lokalen Dateien für Screenshots erstellen oder Dateien aus der Webanwendung herunterladen und speichern, z. B. herunterladbare PDFs.
Sie ist nicht deterministisch. Es wird versucht, die von Ihnen angegebenen Aktionen auszuführen. Der lokale Status, z. B. ein unerwartetes Pop-up, kann die Interaktion jedoch unterbrechen.
Es unterstützt keinen „Headless“-Betrieb, d. h., es kann nicht in einer CI/CD-Pipeline ohne ein echtes Browserfenster ausgeführt werden.

Playwright

Playwright ist ein viel komplexeres Tool. Es ist ein etabliertes Open-Source-Framework für die Browserautomatisierung und ‑tests. Es kann vieles, was BrowserMCP nicht kann, einschließlich aller oben genannten Punkte.

Es eignet sich viel besser für komplexe, zuverlässige und wiederholbare Testszenarien. Sie eignet sich besonders gut für die Arbeit mit lang andauernden Sitzungen oder für die parallele Ausführung mehrerer unabhängiger Sitzungen.

Diese zusätzliche Funktion ist jedoch mit einer viel steileren Lernkurve verbunden.

Kompetenzen

Glücklicherweise müssen wir nicht lernen, wie man Playwright direkt verwendet, sondern können stattdessen einen Agent-Skill nutzen.

Was genau ist also eine Agent-Kompetenz? Stellen Sie sich das als ein eng gepacktes Bündel von Fachwissen vor, das Sie Ihrem KI‑Agenten übergeben können, wenn er etwas Bestimmtes tun soll. Sie enthalten Anleitungen, Best Practices und manchmal sogar Hilfsskripts, die auf eine bestimmte Aufgabe zugeschnitten sind.

Und hier kommt der Clou: Progressive Offenlegung. Anstatt jede erdenkliche API-Dokumentation und jede Regel für das Testframework in den ursprünglichen Systemprompt des LLM zu packen – was das Kontextfenster beansprucht und Token verbraucht – liest der Agent den Skill nur, wenn er ihn tatsächlich benötigt. Er hält den Baseline-Kontext schlank und ruft die detaillierte Anleitung just-in-time ab. Und ja, ein Skill kann durchaus Anweisungen enthalten, wie bestimmte MCP-Server genutzt werden können, um die Aufgabe zu erledigen.

Stellen Sie sich das wie die Szene in „The Matrix“ vor: Der Agent sieht sich ein Problem an, erkennt, dass er Playwright benötigt, lädt die Skill herunter und plötzlich: „Ich kann Kung-Fu.“ Zack! Sofort Experte werden.

Weitere Informationen zu Skills:

Warum sind Skills perfekt für Playwright?

Die Verwendung eines Skills ist hier eine gute Wahl. Playwright ist ein sehr leistungsstarkes Tool, aber die Syntax kann schwierig sein. Wenn wir dem Agenten eine Playwright-Fähigkeit geben, müssen wir uns keine Sorgen machen, dass unser LLM veraltete Syntax halluziniert oder instabile Selektoren schreibt. Wir stellen ein kuratiertes, maßgebliches Playbook zur Verfügung, in dem genau beschrieben wird, wie Playwright richtig verwendet wird.

Ich werde die Playwright-CLI und den zugehörigen Skill verwenden.

Bei diesem Ansatz installieren wir die Playwright CLI lokal und geben unserem Agenten dann das Wissen, das er für die Verwendung benötigt. Zur Vermeidung von Missverständnissen: Ich installiere keinen Playwright-MCP-Server.

Installation läuft

Installieren wir zuerst die Open-Source-Microsoft Playwright CLI. Falls noch nicht geschehen, beenden Sie die interaktive CLI mit dem Befehl /quit``. Führen Sie dann in Ihrem Terminal folgende Schritte aus:

# 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

Jetzt fügen wir die Kompetenz hinzu. Mit diesem Befehl wird der Unterordner für den Skill direkt von GitHub in unseren Gemini-Skills-Ordner heruntergeladen:

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

Jetzt können wir es testen.

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

Dadurch sollte eine Browsersitzung mit der angegebenen URL geöffnet werden.

Außerdem soll Gemini Playwright im „headed“-Modus verwenden können, also mit einer sichtbaren Benutzeroberfläche. Der Skill sagt Gemini aber nicht, wie das geht. Ich habe diese Zeilen also in ~/.gemini/skills/playwright-cli/SKILL.md im Abschnitt Core hinzugefügt:

# 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

Mit Playwright testen

Wie zuvor müssen wir die Anwendung starten, falls sie noch nicht ausgeführt wird. Führen Sie die folgenden Schritte in der ursprünglichen Terminalsitzung aus:

make dev

Deaktivieren wir dann in der anderen Terminalsitzung BrowserMCP vorübergehend, damit der Agent nicht verwirrt ist, welche Tools er verwenden soll. Starten Sie die Antigravity CLI (agy) neu. Wir können den browsermcp-Server vorübergehend direkt über die TUI deaktivieren:

Geben Sie /mcp in das Prompt-Feld ein, um das MCP-Verwaltungsfeld zu öffnen.
Wählen Sie mit den Aufwärts- und Abwärtspfeilen browsermcp aus und drücken Sie die Eingabetaste oder die Return-Taste.
Wähle „Deaktivieren“ aus und drücke die Eingabetaste, um die Funktion zu deaktivieren.

Jetzt bitten wir den Agenten, mit Playwright zu unserer Anwendung zu navigieren. Anders als bei BrowserMCP müssen wir den Browser jedoch nicht zuerst starten. Playwright erledigt das für uns mit einem lokalen Prozess.

Geben Sie diesen Prompt in die Agy CLI ein:

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.

Wie immer werden Sie von der CLI um Erlaubnis gefragt, bevor Tools ausgeführt werden.

Was ist hier anders?

Wir mussten den Browser nicht erst starten.
Wir mussten keine Browsererweiterung starten und verbinden.
Wir müssen den Agenten nicht zuerst auffordern, sich abzumelden. Der Test wird in einer „sauberen“ Sitzung ausgeführt.
Wir können Screenshots erstellen und als lokale Dateien speichern.

Kurz darauf sollte im Ausgabeverzeichnis die Datei „dashboard.png“ angezeigt werden.

Die Tool-Aufrufe werden in der Agy-Befehlszeile ausgeführt, die Browser-Benutzeroberfläche wird jedoch nicht angezeigt. Das liegt daran, dass Playwright standardmäßig im „Headless-Modus“ ausgeführt wird.

Wenn Sie den Vorgang mit diesem geänderten Prompt noch einmal ausführen, sehen Sie auch die Benutzeroberfläche:

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.

Die Agy CLI-Ausgabe sollte in etwa so aussehen:

War das nicht großartig?

9. Integrierter Browser-Agent von Antigravity

Google Antigravity ist mit einem eigenen integrierten Browser-Agenten ( Browser-Unteragent) ausgestattet, der eine sofort einsatzbereite Browserautomatisierung bietet, ohne dass Sie ein separates Tool wie die Playwright-Befehlszeilenschnittstelle installieren müssen.

Funktionsweise

Der integrierte Browser-Agent steuert Ihren Browser direkt über das Chrome DevTools-Protokoll (CDP). Dadurch sind keine Browsererweiterungen oder Zwischen-Plug-ins in Antigravity 2.0 und der IDE erforderlich.

Beim Starten stellt Antigravity über eine WebSocket-Verbindung eine Verbindung zu Ihrer Chrome-Instanz über einen lokalen Debugging-Port her. Die Anweisungen auf hoher Ebene des Agents werden direkt in CDP-Befehle auf niedriger Ebene übersetzt, die:

Das DOM der Seite manipulieren, z. B. durch Klicken auf Elemente oder Eingeben von Text.
Browserstatus steuern und Navigation auslösen
Echtzeit-Frames und visuelle Daten erfassen

Durch die Kombination der direkten CDP-Steuerung mit visueller, multimodaler Analyse kann der untergeordnete Agent Ihr übergeordnetes Ziel (z. B. „Prüfen, ob im Dashboard die richtigen Telemetriewerte angezeigt werden“) erreichen. Er analysiert die Seite visuell, um herauszufinden, welche Aktionen erforderlich sind, und führt sie selbst aus. Außerdem werden automatisch Videos aufgezeichnet und Screenshots von den Aktionen erstellt und direkt in Ihrem Arbeitsbereich als Artefakte gespeichert, um als visueller Nachweis für die Testausführung zu dienen.

Verfügbarkeit von Tools

Der integrierte Browser-Agent wird in der terminalbasierten Antigravity CLI (Agy CLI) noch nicht unterstützt. Sie können sie jedoch bereits jetzt in Antigravity IDE und Antigravity 2.0 verwenden. Hoffentlich wird der Browser-Agent in einer zukünftigen Version der Agy-Befehlszeile unterstützt.

Hinweis für WSL-Nutzer: Es ist jetzt viel einfacher, den Browser-Agent in Antigravity unter WSL zum Laufen zu bringen. Anstatt sich mit komplexem Netzwerkrouting und Portweiterleitung zu befassen, müssen Sie in Ihrer WSL-Konfiguration einfach den „gespiegelten“ Netzwerkmodus aktivieren. Eine vollständige Schritt-für-Schritt-Anleitung finden Sie im Leitfaden Resolving WSL Friction with Google Antigravity: The Agy 2.0 and Agy IDE Edition.

10. Weitere Anwendungsfälle für die Browserautomatisierung

Bei der Browserautomatisierung geht es nicht nur darum, sicherzustellen, dass die Anmeldeschaltfläche vor einer Bereitstellung am Freitagnachmittag funktioniert. Sobald Sie feststellen, dass Sie ein LLM direkt mit einem Browser verbinden können, eröffnet sich eine ganz neue Welt von selbst entwickelten, agentenbasierten Projekten.

Wenn Sie eigene KI-Agenten entwickeln, können Sie Tools wie BrowserMCP oder die Playwright-CLI auf folgende Weise nutzen, um die Hauptarbeit zu erledigen:

Der persönliche Rechercheassistent:Stellen Sie sich vor, Sie weisen Ihren Agenten auf eine bestimmte URL hin und bitten ihn, ein Thema zu recherchieren. Für die Website ist jedoch eine Anmeldung erforderlich und es müssen komplexe Menüs durchlaufen werden. Anstatt einen benutzerdefinierten Web-Scraper zu schreiben, der nächste Woche nicht mehr funktioniert, weisen Sie Ihren Agenten einfach an, sich anzumelden, zu den Daten zu navigieren und sie für Sie zusammenzufassen.
Der „Drehstuhl“-Integrator:Wir alle haben diese alten Intranetsysteme, die keine APIs haben. Sie kennen das sicher: Sie müssen Daten manuell aus System A kopieren und in ein Formular in System B einfügen. Ein Agent mit Browserautomatisierung kann als universeller Klebstoff fungieren, indem er den Bildschirm des alten Systems liest und das Formular im neuen System ausfüllt.
Automatisierte Triage und Fehlerbehebung:Sie haben um 3 Uhr morgens eine P1-Benachrichtigung von Ihrem Überwachungssystem erhalten? Ihr Agent könnte automatisch die entsprechende Dashboard-URL öffnen, die Grafiken oder Logs lesen (mithilfe seiner multimodalen Vision-Funktionen) und eine Zusammenfassung direkt in Ihrem Slack-Channel posten. So sparen Sie wertvolle Zeit während eines Vorfalls.

Der Vorteil dieses Ansatzes ist, dass Sie nicht mehr durch die verfügbaren APIs eingeschränkt werden. Wenn ein Mensch es in einem Browser tun kann, kann es auch Ihr Agent.

11. Fazit

Glückwunsch! Sie haben gerade automatisierte, robuste UI-Tests erstellt und ausgeführt, indem Sie einem KI-Agenten in natürlicher Sprache mitgeteilt haben, was er tun soll. Keine anfälligen CSS-Selektoren, keine komplexen Einrichtungs-Scripts.

Sie haben Folgendes gelernt:

UI-Tests müssen nicht mühsam sein: Wenn wir uns auf die Absicht des Tests konzentrieren, anstatt auf die anfällige DOM-Implementierung, können wir den Wartungsaufwand erheblich reduzieren.
Das Model Context Protocol (MCP) bietet Ihren Agenten universellen Plug-and-Play-Zugriff auf Tools, Daten und Umgebungen.
BrowserMCP ist ein leistungsstarkes Tool, mit dem Sie agentische Funktionen in Ihre lokalen, vorhandenen Chrome-Sitzungen einbinden können.
Skills und die Playwright-CLI ermöglichen eine neue Stufe wiederholbarer, deterministischer Automatisierungstests – alles basierend auf Progressive Disclosure.
Antigravitys Browser Subagent geht noch einen Schritt weiter und bietet von Anfang an autonome, multimodale Navigation und Artefaktaufzeichnung.

Jetzt können Sie loslegen und die langweiligen Aufgaben automatisieren.

12. Nützliche Links

Wenn Sie sich genauer mit den Tools und Konzepten befassen möchten, die wir heute behandelt haben, finden Sie hier weitere Informationen:

Repo-Code

GitHub-Repository „agentic-ui-testing“ – Bitte geben Sie dem Repository einen Stern, wenn Sie dieses Codelab hilfreich fanden.

Core-Tools und ‑Frameworks

Agentische Konzepte und Fähigkeiten

Sonstiges