Probando mi sitio web con Gemini 2.5 Computer Use y Playwright

Google lanzó hoy Gemini 2.5 Computer Use. Es un modelo que puede mirar capturas de pantalla y decirte dónde hacer clic. Es decir, realmente mira una página web y entiende que "el enlace al blog está en la navegación superior".

Tengo 8 idiomas en mi sitio. A veces, cuando cambias de idioma, la página se carga vacía. Sin error, simplemente en blanco. He estado tratando de detectar cuándo sucede esto, pero probarlo manualmente es una molestia.

Así que decidí dejar que la IA lo hiciera. Con la ayuda de Claude Code, conseguí una prueba funcional en menos de 15 minutos. Simplemente le di la documentación de Gemini 2.5 Computer Use y le dije lo que necesitaba. Escribió la prueba.

Cómo funciona

El modelo Gemini 2.5 Computer Use mira capturas de pantalla y genera llamadas a funciones. El código captura una captura de pantalla del navegador, la envía al modelo, el modelo la analiza y devuelve una llamada a función como "click_at" con coordenadas.

El código ejecuta esa llamada a función (usando Playwright). Después de hacer clic, captura una nueva captura de pantalla y la envía de vuelta al modelo como respuesta de la función. El modelo usa esto para decidir la siguiente acción.

Quería probar si mis traducciones realmente funcionan. Así que le dije:

• Ve a la página del blog
• Haz clic en la primera entrada de blog que veas
• Recuerda el título y el primer párrafo
• Cambia el idioma a español, alemán y francés
• Para cada idioma, comprueba si el contenido ha cambiado y no está vacío
• Informa de cualquier problema de traducción encontrado

Configuración

Necesitas tres cosas:

• El paquete @google/genai para comunicarte con Gemini
• Playwright para controlar el navegador
• Una clave de API de Google AI Studio (es gratis)

El código es básicamente un bucle:

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

  // Obtener las coordenadas del clic
  const action = response.candidates[0].functionCall;

  if (!action) {
    done = true; // La IA dice que ha terminado
    break;
  }

  // Hacer clic donde la IA dijo que hiciera clic
  await page.mouse.click(action.args.x, action.args.y);

  // Tomar nueva captura de pantalla
  screenshot = await page.screenshot();
}

El modelo devuelve coordenadas en una cuadrícula normalizada de 1000x1000. Las escalas a tus dimensiones de pantalla reales. Estoy usando 1440x900 (el tamaño recomendado).

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

Observándolo ejecutarse

Lo ejecuté con el navegador visible. Es algo salvaje de ver.

Turno 1: Mira mi página de inicio. "Veo un enlace de Blog arriba". Hace clic en él.

Turno 2: En la página del blog. "La primera entrada es sobre Kindle AI". Hace clic en ella.

Turno 3: Leyendo la entrada. Recuerda el título: "Cómo usar IA directamente en tu Kindle".

Turno 4: Encuentra el selector de idioma (ese pequeño icono de globo). Hace clic en él.

Turno 5: Se abre el menú. Hace clic en "Español".

Turno 6: Se carga la versión en español. "El contenido cambió. Esto está funcionando".

Turno 7: Cambia a alemán. Vuelve a hacer clic en el selector de idioma.

Turno 8: La página se carga en alemán. "Espera, esta página parece casi vacía. Solo muestra un punto. Falta contenido". Se detiene inmediatamente.

Encontró el error (puedes leer más sobre lo que causó las páginas traducidas vacías aquí). Luego generó un informe detallado:

📊 INFORME FINAL
⚠️  Se encontró 1 problema(s):

[ES] - 1 problema(s):
Entrada: Cómo usar IA directamente en tu Kindle
URL: .../traer-ia-a-kindle-como-construi-chatgpt-para-lectores-electronicos
Problema: La página se cargó pero el área de contenido está vacía, solo muestra un punto.
Pasos: Página de inicio → Blog → Clic en la entrada → Contenido faltante

La IA capturó el problema exacto que estaba buscando. Incluso describió lo que vio (página vacía con solo un punto) y enumeró los pasos para reproducirlo.

Problemas que encontré

En la primera ejecución, obtuve un error 503. La API está en vista previa y se sobrecarga. Lo ejecuté de nuevo y funcionó bien.

El modelo admite 13 acciones: 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 y drag_and_drop. Solo implementé 7 para esta prueba. Para un conjunto de pruebas real, querrías todas.

Cada captura de pantalla son 50-100 KB enviados a la API. Mi prueba envió unas 30 capturas de pantalla. Eso se acumula si estás probando mucho.

Por qué es útil

Para las pruebas, las pruebas normales de Playwright se ven así:

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, simplemente dices: "Cambia a español y comprueba si el título ha cambiado".

La prueba de IA es más lenta y cuesta dinero. Pero:

• Mucho más rápido de escribir
• No se rompe cuando cambias las clases CSS
• Funciona como un usuario real
• Bueno para comprobaciones puntuales

Qué más podrías hacer con esto

El modelo no se limita a las pruebas. La documentación menciona casos de uso como la automatización de la introducción de datos repetitivos, la realización de investigaciones en sitios web y el relleno de formularios. Después de ver esto funcionar, pensé en otras aplicaciones:

• "Compara precios de este producto en estos 5 sitios web"
• "Rellena este formulario de solicitud de empleo con los datos de mi currículum"
• "Encuentra todas las entradas de blog sobre el tema X y resúmelas"
• "Supervisa esta página a diario y avísame cuando el contenido cambie"
• "Extrae todos los detalles del producto de este catálogo a una hoja de cálculo"

Cualquier cosa que harías manualmente en un navegador, puedes automatizarla con instrucciones en lenguaje sencillo.

Pruébalo

La API de Gemini tiene un nivel gratuito para pruebas, aunque Computer Use utiliza el mismo precio que Gemini 2.5 Pro ($1.25 por 1M de tokens de entrada). Necesitas:

• Una clave de API de Google AI Studio
• El paquete npm @google/genai
• Playwright

Empieza de forma sencilla: "Ve a example.com y dime el título de la página". Luego construye a partir de ahí.

El nombre del modelo es gemini-2.5-computer-use-preview-10-2025.