Meine Website mit Gemini 2.5 Computer Use und Playwright testen

Google hat heute Gemini 2.5 Computer Use veröffentlicht. Es ist ein Modell, das sich Screenshots ansehen und Ihnen sagen kann, wohin Sie klicken sollen. Es kann sich tatsächlich eine Webseite ansehen und verstehen: „Der Blog-Link befindet sich in der oberen Navigation.“

Ich habe 8 Sprachen auf meiner Seite. Manchmal, wenn Sie die Sprache wechseln, wird die Seite leer geladen. Keine Fehlermeldung, einfach nur leer. Ich habe versucht herauszufinden, wann das passiert, aber manuelles Testen ist mühsam.

Also habe ich beschlossen, die KI das machen zu lassen. Mit Hilfe von Claude Code hatte ich in weniger als 15 Minuten einen funktionierenden Test. Ich habe ihm einfach die Gemini 2.5 Computer Use Dokumentation gegeben und ihm gesagt, was ich brauche. Er hat den Test geschrieben.

So funktioniert es

Das Gemini 2.5 Computer Use Modell betrachtet Screenshots und generiert Funktionsaufrufe. Der Code nimmt einen Screenshot des Browsers auf, sendet ihn an das Modell, das Modell analysiert ihn und gibt einen Funktionsaufruf wie „click_at“ mit Koordinaten zurück.

Der Code führt diesen Funktionsaufruf aus (mithilfe von Playwright). Nach dem Klicken nimmt er einen neuen Screenshot auf und sendet ihn als Funktionsantwort zurück an das Modell. Das Modell nutzt dies, um die nächste Aktion zu bestimmen.

Ich wollte testen, ob meine Übersetzungen tatsächlich funktionieren. Also habe ich ihm gesagt:

• Gehe zur Blog-Seite
• Klicke auf den ersten Blogbeitrag, den du siehst
• Merke dir den Titel und den ersten Absatz
• Wechsle die Sprache zu Spanisch, Deutsch und Französisch
• Überprüfe bei jeder Sprache, ob sich der Inhalt geändert hat und nicht leer ist
• Melde alle gefundenen Übersetzungsprobleme

Einrichtung

Sie benötigen drei Dinge:

• Das Paket @google/genai, um mit Gemini zu kommunizieren
• Playwright zur Steuerung des Browsers
• Einen API-Schlüssel von Google AI Studio (er ist kostenlos)

Der Code ist im Grunde eine Schleife:

while (!done) {
  // Screenshot an die KI senden
  const response = await client.models.generateContent({
    model: 'gemini-2.5-computer-use-preview-10-2025',
    contents: [screenshot, task],
  });

  // Die Klickkoordinaten abrufen
  const action = response.candidates[0].functionCall;

  if (!action) {
    done = true; // KI meldet Fertigstellung
    break;
  }

  // Klicken, wohin die KI geklickt hat
  await page.mouse.click(action.args.x, action.args.y);

  // Neuen Screenshot aufnehmen
  screenshot = await page.screenshot();
}

Das Modell gibt Koordinaten auf einem normalisierten 1000x1000 Raster zurück. Sie skalieren diese auf Ihre tatsächlichen Bildschirmabmessungen. Ich verwende 1440x900 (die empfohlene Größe).

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

Beobachten der Ausführung

Ich habe es mit sichtbarem Browser ausgeführt. Es ist irgendwie verrückt zuzusehen.

Runde 1: Betrachtet meine Homepage. „Ich sehe oben einen Blog-Link.“ Klickt darauf.

Runde 2: Auf der Blog-Seite. „Der erste Beitrag handelt von Kindle AI.“ Klickt darauf.

Runde 3: Liest den Beitrag. Merkt sich den Titel: „Wie man KI direkt auf seinem Kindle nutzt.“

Runde 4: Findet den Sprachumschalter (dieses kleine Globus-Symbol). Klickt darauf.

Runde 5: Menü öffnet sich. Klickt auf „Español“.

Runde 6: Spanische Version wird geladen. „Inhalt hat sich geändert. Das funktioniert.“

Runde 7: Wechselt zu Deutsch. Klickt erneut auf den Sprachumschalter.

Runde 8: Seite wird auf Deutsch geladen. „Moment, diese Seite sieht fast leer aus. Zeigt nur einen Punkt. Inhalt fehlt.“ Stoppt sofort.

Es hat den Fehler gefunden (mehr darüber, was die leeren übersetzten Seiten verursacht hat, können Sie hier lesen). Dann hat es einen detaillierten Bericht erstellt:

📊 ENDBERICHT
⚠️  1 Problem(e) gefunden:

[ES] - 1 Problem(e):
Beitrag: Cómo usar IA directamente en tu Kindle
URL: .../traer-ia-a-kindle-como-construi-chatgpt-para-lectores-electronicos
Problem: Seite wurde geladen, aber der Inhaltsbereich ist leer und zeigt nur einen Aufzählungspunkt.
Schritte: Homepage → Blog → Beitrag angeklickt → Inhalt fehlt

Die KI hat genau das Problem erkannt, nach dem ich gesucht habe. Sie hat sogar beschrieben, was sie gesehen hat (leere Seite mit nur einem Punkt) und die Schritte zur Reproduktion aufgelistet.

Probleme, auf die ich gestoßen bin

Beim ersten Lauf erhielt ich einen 503-Fehler. Die API befindet sich in der Vorschau und wird überlastet. Beim zweiten Versuch funktionierte es einwandfrei.

Das Modell unterstützt 13 Aktionen: 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 und drag_and_drop. Für diesen Test habe ich nur 7 implementiert. Für eine echte Testsuite würden Sie wahrscheinlich alle benötigen.

Jeder Screenshot wird mit 50-100 KB an die API gesendet. Mein Test hat etwa 30 Screenshots gesendet. Das summiert sich, wenn Sie viel testen.

Warum das nützlich ist

Für Tests sehen normale Playwright-Tests so aus:

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

Mit Computer Use sagen Sie einfach: „Wechsle zu Spanisch und überprüfe, ob sich der Titel geändert hat.“

Der KI-Test ist langsamer und kostet Geld. Aber:

• Viel schneller zu schreiben
• Bricht nicht ab, wenn Sie CSS-Klassen ändern
• Funktioniert wie ein echter Benutzer
• Gut für einmalige Überprüfungen

Was Sie damit noch tun könnten

Das Modell ist nicht auf Tests beschränkt. Die Dokumentation erwähnt Anwendungsfälle wie die Automatisierung repetitiver Dateneingaben, die Durchführung von Recherchen über Websites hinweg und das Ausfüllen von Formularen. Nachdem ich gesehen hatte, wie dies funktioniert, fielen mir andere Anwendungen ein:

• „Vergleiche die Preise für dieses Produkt auf diesen 5 Websites“
• „Fülle dieses Bewerbungsformular mit meinen Lebenslaufdaten aus“
• „Finde alle Blogbeiträge zu Thema X und fasse sie zusammen“
• „Überwache diese Seite täglich und benachrichtige mich, wenn sich der Inhalt ändert“
• „Extrahiere alle Produktdetails aus diesem Katalog in eine Tabelle“

Alles, was Sie manuell in einem Browser tun würden, können Sie mit einfachen Anweisungen in natürlicher Sprache automatisieren.

Probieren Sie es aus

Die Gemini API bietet eine kostenlose Stufe zum Testen, obwohl Computer Use die gleiche Preisgestaltung wie Gemini 2.5 Pro verwendet (1,25 $ pro 1 Mio. Eingabetoken). Sie benötigen:

• Einen API-Schlüssel von Google AI Studio
• Das npm-Paket @google/genai
• Playwright

Beginnen Sie einfach: „Gehe zu example.com und nenne mir den Seitentitel.“ Bauen Sie von dort aus auf.

Der Modellname lautet gemini-2.5-computer-use-preview-10-2025.