Testare il mio sito web con Gemini 2.5 Computer Use e Playwright

Google ha rilasciato oggi Gemini 2.5 Computer Use. È un modello che può guardare gli screenshot e dirti dove cliccare. Cioè, può effettivamente guardare una pagina web e capire che "il link al blog è nella navigazione in alto".

Ho 8 lingue sul mio sito. A volte, quando si cambia lingua, la pagina si carica vuota. Nessun errore, solo schermo bianco. Stavo cercando di capire quando succede, ma testare manualmente è una seccatura.

Così ho deciso di lasciare che lo facesse l'IA. Con l'aiuto di Claude Code, ho ottenuto un test funzionante in meno di 15 minuti. Gli ho dato la documentazione di Gemini 2.5 Computer Use e gli ho detto cosa mi serviva. Ha scritto il test.

Come funziona

Il modello Gemini 2.5 Computer Use guarda gli screenshot e genera chiamate di funzione. Il codice cattura uno screenshot del browser, lo invia al modello, il modello lo analizza e restituisce una chiamata di funzione come "click_at" con le coordinate.

Il codice esegue quella chiamata di funzione (usando Playwright). Dopo aver cliccato, cattura un nuovo screenshot e lo invia nuovamente al modello come risposta alla funzione. Il modello lo usa per decidere l'azione successiva.

Volevo verificare se le mie traduzioni funzionassero davvero. Quindi gli ho detto:

• Vai alla pagina del blog
• Clicca sul primo articolo del blog che vedi
• Ricorda il titolo e il primo paragrafo
• Cambia lingua in spagnolo, tedesco e francese
• Per ogni lingua, verifica che il contenuto sia cambiato e non sia vuoto
• Segnala eventuali problemi di traduzione riscontrati

Configurazione

Hai bisogno di tre cose:

• Il pacchetto @google/genai per comunicare con Gemini
• Playwright per controllare il browser
• Una chiave API da Google AI Studio (è gratuita)

Il codice è fondamentalmente un ciclo:

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

  // Ottieni le coordinate del clic
  const action = response.candidates[0].functionCall;

  if (!action) {
    done = true; // L'IA dice che ha finito
    break;
  }

  // Clicca dove l'IA ha indicato
  await page.mouse.click(action.args.x, action.args.y);

  // Cattura nuovo screenshot
  screenshot = await page.screenshot();
}

Il modello restituisce le coordinate su una griglia normalizzata di 1000x1000. Le ridimensioni in base alle dimensioni effettive del tuo schermo. Io sto usando 1440x900 (la dimensione consigliata).

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

Guardarlo in azione

L'ho eseguito con il browser visibile. È piuttosto impressionante da vedere.

Turno 1: Guarda la mia homepage. "Vedo un link Blog in alto." Ci clicca.

Turno 2: Sulla pagina del blog. "Il primo articolo parla di Kindle AI." Ci clicca.

Turno 3: Legge l'articolo. Ricorda il titolo: "Come usare l'IA direttamente sul tuo Kindle".

Turno 4: Trova il selettore della lingua (quella piccola icona a forma di globo). Ci clicca.

Turno 5: Si apre il menu. Clicca su "Español".

Turno 6: Carica la versione spagnola. "Il contenuto è cambiato. Funziona".

Turno 7: Passa al tedesco. Clicca di nuovo sul selettore della lingua.

Turno 8: La pagina si carica in tedesco. "Aspetta, questa pagina sembra quasi vuota. Mostra solo un punto. Il contenuto manca". Si ferma immediatamente.

Ha trovato il bug (puoi leggere di più su cosa ha causato le pagine tradotte vuote qui). Poi ha generato un rapporto dettagliato:

📊 RAPPORTO FINALE
⚠️ Trovato 1 problema/i:

[ES] - 1 problema/i:
Articolo: Cómo usar IA directamente en tu Kindle
URL: .../traer-ia-a-kindle-como-construi-chatgpt-para-lectores-electronicos
Problema: La pagina è stata caricata ma l'area del contenuto è vuota, mostra solo un punto elenco.
Passaggi: Homepage → Blog → Articolo cliccato → Contenuto mancante

L'IA ha individuato l'esatto problema che stavo cercando. Ha persino descritto ciò che ha visto (pagina vuota con solo un punto) ed elencato i passaggi per riprodurlo.

Problemi riscontrati

Al primo tentativo, ho ricevuto un errore 503. L'API è in anteprima e si sovraccarica. L'ho eseguito di nuovo, ha funzionato bene.

Il modello supporta 13 azioni: 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 e drag_and_drop. Ho implementato solo 7 per questo test. Per una suite di test reale ne vorresti tutte.

Ogni screenshot è di 50-100 KB inviato all'API. Il mio test ha inviato circa 30 screenshot. Questo si somma se stai testando molto.

Perché è utile

Per i test, i normali test Playwright sono così:

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

Con Computer Use dici semplicemente: "Passa allo spagnolo e controlla che il titolo sia cambiato".

Il test IA è più lento e costa denaro. Ma:

• Molto più veloce da scrivere
• Non si rompe quando cambi le classi CSS
• Funziona come un utente reale
• Ottimo per controlli una tantum

Cos'altro si potrebbe fare con questo

Il modello non è limitato ai test. La documentazione menziona casi d'uso come l'automazione dell'inserimento dati ripetitivo, la ricerca su siti web e la compilazione di moduli. Dopo aver visto questo funzionare, mi sono venute in mente altre applicazioni:

• "Confronta i prezzi di questo prodotto su questi 5 siti web"
• "Compila questo modulo di domanda di lavoro con i dati del mio curriculum"
• "Trova tutti gli articoli del blog su un certo argomento e riassumili"
• "Monitora questa pagina quotidianamente e avvisami quando il contenuto cambia"
• "Estrai tutti i dettagli del prodotto da questo catalogo in un foglio di calcolo"

Qualsiasi cosa faresti manualmente in un browser, puoi automatizzarla con istruzioni in linguaggio naturale.

Provalo

L'API Gemini ha un livello gratuito per i test, anche se Computer Use utilizza la stessa tariffazione di Gemini 2.5 Pro ($1,25 per 1M di token di input). Hai bisogno di:

• Una chiave API da Google AI Studio
• Il pacchetto npm @google/genai
• Playwright

Inizia in modo semplice: "Vai su example.com e dimmi il titolo della pagina". Poi costruisci da lì.

Il nome del modello è gemini-2.5-computer-use-preview-10-2025.