Mijn website testen met Gemini 2.5 Computer Use en Playwright

Google heeft vandaag Gemini 2.5 Computer Use uitgebracht. Het is een model dat naar schermafbeeldingen kan kijken en je kan vertellen waar je moet klikken. Het kan echt naar een webpagina kijken en begrijpen: "de bloglink staat in de bovenste navigatie."

Ik heb 8 talen op mijn site. Soms, wanneer je van taal wisselt, wordt de pagina leeg geladen. Geen foutmelding, gewoon leeg. Ik probeerde te vangen wanneer dit gebeurt, maar handmatig testen is een gedoe.

Dus besloot ik de AI het te laten doen. Met de hulp van Claude Code had ik binnen 15 minuten een werkende test. Ik gaf het gewoon de Gemini 2.5 Computer Use documentatie en vertelde het wat ik nodig had. Het schreef de test.

Hoe het werkt

Het Gemini 2.5 Computer Use model kijkt naar schermafbeeldingen en genereert functieaanroepen. De code maakt een schermafbeelding van de browser, stuurt deze naar het model, het model analyseert deze en retourneert een functieaanroep zoals "click_at" met coördinaten.

De code voert die functieaanroep uit (met behulp van Playwright). Na het klikken maakt het een nieuwe schermafbeelding en stuurt deze terug naar het model als een functieantwoord. Het model gebruikt dit om de volgende actie te bepalen.

Ik wilde testen of mijn vertalingen daadwerkelijk werkten. Dus zei ik tegen het:

• Ga naar de blogpagina
• Klik op het eerste blogbericht dat je ziet
• Onthoud de titel en de eerste paragraaf
• Schakel de taal naar Spaans, Duits en Frans
• Controleer voor elke taal of de inhoud is gewijzigd en niet leeg is
• Meld eventuele gevonden vertaalproblemen

De installatie

Je hebt drie dingen nodig:

• Het pakket @google/genai om met Gemini te praten
• Playwright om de browser te besturen
• Een API-sleutel van Google AI Studio (het is gratis)

De code is in wezen een lus:

while (!done) {
  // Stuur schermafbeelding naar AI
  const response = await client.models.generateContent({
    model: 'gemini-2.5-computer-use-preview-10-2025',
    contents: [screenshot, task],
  });

  // Haal de klikcoördinaten op
  const action = response.candidates[0].functionCall;

  if (!action) {
    done = true; // AI geeft aan dat het klaar is
    break;
  }

  // Klik waar de AI zei te klikken
  await page.mouse.click(action.args.x, action.args.y);

  // Maak nieuwe schermafbeelding
  screenshot = await page.screenshot();
}

Het model retourneert coördinaten op een genormaliseerd raster van 1000x1000. Je schaalt deze naar je werkelijke schermafmetingen. Ik gebruik 1440x900 (de aanbevolen grootte).

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

Kijken hoe het draait

Ik liet het draaien met de browser zichtbaar. Het is nogal wild om naar te kijken.

Beurt 1: Kijkt naar mijn startpagina. "Ik zie een Blog-link bovenaan." Klikt erop.

Beurt 2: Op de blogpagina. "Eerste bericht gaat over Kindle AI." Klikt erop.

Beurt 3: Leest het bericht. Onthoudt de titel: "Hoe je AI rechtstreeks op je Kindle gebruikt."

Beurt 4: Vindt de taalschakelaar (dat kleine wereldbolicoontje). Klikt erop.

Beurt 5: Menu opent. Klikt op "Español."

Beurt 6: Spaanse versie wordt geladen. "Inhoud gewijzigd. Dit werkt."

Beurt 7: Schakelt over naar Duits. Klikt opnieuw op de taalschakelaar.

Beurt 8: Pagina wordt in het Duits geladen. "Wacht, deze pagina ziet er bijna leeg uit. Toont alleen een punt. Inhoud ontbreekt." Stopt onmiddellijk.

Het vond de bug (je kunt meer lezen over wat de lege vertaalde pagina's veroorzaakte hier). Vervolgens genereerde het een gedetailleerd rapport:

📊 EINDVERSLAG
⚠️  1 probleem(en) gevonden:

[ES] - 1 probleem(en):
Bericht: Cómo usar IA directamente en tu Kindle
URL: .../traer-ia-a-kindle-como-construi-chatgpt-para-lectores-electronicos
Probleem: Pagina geladen maar inhoudsgebied is leeg, toont alleen een opsommingsteken.
Stappen: Startpagina → Blog → Bericht aangeklikt → Inhoud ontbreekt

De AI ving precies het probleem dat ik zocht. Het beschreef zelfs wat het zag (lege pagina met alleen een punt) en somde de stappen op om het te reproduceren.

Problemen die ik tegenkwam

Eerste keer dat ik het uitvoerde, kreeg ik een 503-fout. De API is in preview en raakt overbelast. Nogmaals uitgevoerd, werkte prima.

Het model ondersteunt 13 acties: 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, en drag_and_drop. Ik heb er slechts 7 geïmplementeerd voor deze test. Voor een echte testsuite zou je ze allemaal willen hebben.

Elke schermafbeelding is 50-100 KB die naar de API wordt verzonden. Mijn test stuurde ongeveer 30 schermafbeeldingen. Dat telt op als je veel test.

Waarom dit nuttig is

Voor testen zien normale Playwright-tests er als volgt uit:

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

Met Computer Use zeg je gewoon: "Schakel over naar Spaans en controleer of de titel is veranderd."

De AI-test is langzamer en kost geld. Maar:

• Veel sneller om te schrijven
• Breekt niet wanneer je CSS-klassen wijzigt
• Werkt als een echte gebruiker
• Goed voor eenmalige controles

Wat je er nog meer mee zou kunnen doen

Het model is niet beperkt tot testen. De documentatie vermeldt gebruiksscenario's zoals het automatiseren van repetitieve gegevensinvoer, het uitvoeren van onderzoek op websites en het invullen van formulieren. Nadat ik dit zag werken, bedacht ik andere toepassingen:

• "Vergelijk prijzen voor dit product op deze 5 websites"
• "Vul dit sollicitatieformulier in met mijn cv-gegevens"
• "Vind alle blogberichten over X-onderwerp en vat ze samen"
• "Monitor deze pagina dagelijks en waarschuw me wanneer de inhoud verandert"
• "Extraheer alle productdetails uit deze catalogus naar een spreadsheet"

Alles wat je handmatig in een browser zou doen, kun je automatiseren met instructies in gewone taal.

Probeer het

De Gemini API heeft een gratis niveau voor testen, hoewel Computer Use dezelfde prijzen hanteert als Gemini 2.5 Pro ($1,25 per 1M invoertokens). Je hebt nodig:

• Een API-sleutel van Google AI Studio
• Het npm-pakket @google/genai
• Playwright

Begin eenvoudig: "Ga naar example.com en vertel me de paginatitel." Bouw het van daaruit op.

Modelnaam is gemini-2.5-computer-use-preview-10-2025.