bencorde.IMPERIO
AGÉNTICO

Claude Code

Claude Code y Playwright: cómo investigar, extraer datos y revisar una web

Un navegador conectado al agente sirve para investigar y revisar interfaces. El valor está en interpretar bien los datos y comprobar cada resultado.

Por Benjamín Cordero · Publicado:
Video original: · 7 min de lectura
Revisión editorial:

Claude Code puede utilizar Playwright para manejar un navegador, leer una página y comprobar una interfaz. El agente decide qué hacer; Playwright ejecuta acciones sobre el navegador. Esa combinación permite pasar de una instrucción a una investigación con archivos, capturas y resultados que puedes revisar.

En el video del 3 de mayo de 2026 trabajé tres casos: investigar temas en Google Trends, diagnosticar un problema móvil del panel de Imperio y recuperar métricas de una comunidad. Hubo una corrección durante el análisis de Trends que vale tanto como la conexión técnica: automatizar la extracción no basta si comparamos mal los datos.

Video completo y recorrido de la demostración

Puedes seguir la investigación con Google Trends desde el minuto 9, la revisión del dashboard desde el minuto 18 y el trabajo con métricas desde el minuto 22. El video conserva los intentos y las correcciones del proceso.

Qué aporta Playwright al agente

Un navegador automatizado puede abrir una URL, identificar campos, completar una búsqueda y guardar evidencia. El servidor MCP oficial de Playwright expone herramientas para hacerlo desde un cliente compatible. Utiliza información estructurada de accesibilidad para muchas de sus interacciones.

Eso ayuda a referirse a un botón o un campo por su función. No convierte todas las decisiones del modelo en exactas: una página puede cambiar, un nombre puede ser ambiguo o un gráfico requerir una captura. Conviene comprobar el estado antes y después de una acción importante.

También hay que separar tres cosas. Playwright MCP conecta herramientas al agente. Playwright como biblioteca permite escribir automatizaciones. Playwright Test sirve para mantener pruebas repetibles. Puedes explorar un problema con el agente y después convertir una comprobación estable en una prueba del proyecto.

Conexión y primera tarea pequeña

La instalación oficial para Claude Code incluye este comando:

claude mcp add playwright npx @playwright/mcp@latest

Antes de ejecutarlo, revisa los requisitos de instalación publicados por Playwright. Necesitas Node.js compatible y un entorno capaz de ejecutar el navegador. En la grabación la conexión ya estaba preparada; el video se concentra en los casos de uso.

Mi recomendación para empezar es pedir una tarea acotada: abrir una página pública, identificar su título y guardar una captura. Así compruebas que el navegador funciona antes de añadir sesiones privadas, descargas o varias fuentes.

Pedí revisar distintos términos de IA durante un mismo período. El primer recorrido consultó búsquedas por separado. Ese método podía producir resultados engañosos: cada gráfico normaliza su propio máximo.

Le pedí al agente agrupar los términos en una misma comparación. La corrección cambió la calidad del análisis sin cambiar la herramienta. Si la pregunta es cuál de varios términos tiene más interés relativo, esos términos necesitan una base de comparación común.

Corrección del análisis para comparar términos juntos en Google Trends
En el minuto 13:40 corregí la consulta para comparar términos dentro de un mismo gráfico.

Google explica que Trends normaliza los datos en una escala de 0 a 100. No son cantidades absolutas de búsquedas. Debes mantener región, período y tipo de búsqueda coherentes; además, un término ambiguo puede mezclar intenciones diferentes. Un tema y un término de búsqueda tampoco son exactamente lo mismo.

Comparación de tres términos en Google Trends durante la demostración con Playwright
Comparación registrada en el minuto 15:40. Es una captura del análisis de la grabación, no un ranking actualizado de herramientas.

Qué debería contener el informe

El resultado útil combina la pregunta, los filtros, las fuentes y la interpretación. En el video el agente guardó un reporte y archivos de datos. Para repetirlo, pediría además una columna que explique cualquier ambigüedad: por ejemplo, si una marca comparte nombre con un concepto ajeno a la IA.

Una propuesta de instrucción, adaptada para esta guía, sería:

Compara estos términos en Google Trends usando el mismo período, región y tipo de búsqueda. Explica cuáles tienen nombres ambiguos. Guarda la consulta, los datos disponibles y una captura. Describe interés relativo; no lo presentes como volumen absoluto ni como una predicción de visitas.

La decisión editorial viene después. Un aumento de interés puede justificar investigar un tema, pero no demuestra que un video determinado vaya a funcionar. Para cruzar la investigación con tu contenido anterior, puedes usar una wiki de videos con Claude Code y Obsidian.

Caso 2: detectar un problema en la versión móvil de una web

El segundo caso fue el panel de Imperio. El agente abrió una sesión de navegador y necesitó que yo iniciara sesión. Después revisó la interfaz en un tamaño móvil y encontró elementos que no estaban apareciendo correctamente, como accesos del perfil y otras secciones.

Diagnóstico de la interfaz móvil del panel de Imperio mostrado por Claude Code
El minuto 21:05 muestra evidencia del diagnóstico móvil. La grabación no demuestra un arreglo desplegado de ese problema.

La entrega de una revisión debería decir qué pantalla falla, cómo reproducirlo y qué se esperaba ver. Un comentario como “la web está rota” no permite trabajar; una captura, el ancho del navegador y una secuencia de pasos sí.

Para aplicarlo a una landing creada con IA, revisa la guía de Claude Design y el método FRAME. El diseño y la comprobación móvil son etapas distintas: una vista bonita en el editor todavía necesita revisión en su versión publicada.

Caso 3: recuperar métricas y conservar su significado

En la tercera demostración utilicé el navegador para recorrer datos de conversión de una comunidad y organizarlos en un archivo. Este tipo de trabajo resulta útil cuando una interfaz presenta información que necesitas analizar y no tienes una exportación cómoda.

El objetivo no es copiar números sueltos. Hay que conservar fecha, nombre de la métrica, unidad y período. Si una cifra aparece al pasar el cursor sobre un gráfico, verifica que corresponde al día correcto antes de guardarla. Las métricas de una cuenta privada deben quedarse en el espacio de trabajo autorizado.

Como criterio de análisis, evita promediar porcentajes diarios para obtener una tasa mensual cuando cada día tiene un número distinto de visitas. Si cuentas con los totales compatibles, calcula conversiones totales divididas por visitas totales. Si faltan denominadores, declara esa limitación.

De una ejecución a un procedimiento reutilizable

Al final del video planteé convertir el proceso en una skill o instrucción repetible. Conviene guardar el objetivo, los filtros, el formato de salida y las verificaciones. Una buena instrucción también especifica cuándo detenerse: sesión expirada, gráfico que no carga o datos que no coinciden.

Una tarea local depende de ese entorno y de su sesión. Pasarla a una Routine de Claude Code exige comprobar nuevamente navegador, acceso y credenciales en el entorno remoto. Las cookies del computador no se trasladan automáticamente porque el texto del prompt sea el mismo.

El avance real es terminar con evidencia que permita decidir: un reporte comparable, un error reproducible o una tabla correctamente interpretada. Puedes ver los tres recorridos en YouTube, suscribirte al canal y encontrar los recursos de implementación que compartimos en Imperio Agéntico.

Preguntas frecuentes

¿Para qué sirve conectar Playwright con Claude Code?

Permite que el agente utilice un navegador para consultar páginas, interactuar con elementos y guardar evidencia. En el video se aplica a Google Trends, una revisión móvil y extracción de métricas.

¿Playwright MCP es lo mismo que Playwright Test?

No. MCP expone herramientas de navegador al agente. Playwright Test permite mantener pruebas automatizadas en un proyecto. Una exploración con el agente puede ayudar a identificar una comprobación que después conviene convertir en prueba.

No. Es el máximo de interés relativo dentro de la comparación seleccionada. Para comparar términos hay que mantener filtros coherentes y no mezclar máximos de consultas independientes como si fueran volúmenes absolutos.

¿Claude Code arregló el error móvil del panel de Imperio?

En esta grabación identificó problemas de la interfaz y presentó un diagnóstico. El video no demuestra un arreglo desplegado de ese panel.

¿Puedo trasladar una tarea de navegador local a una rutina en la nube?

Puedes adaptar el procedimiento, pero necesitas comprobar navegador, acceso y autenticación en el entorno remoto. La sesión local no se copia automáticamente al reutilizar el prompt.

¿Qué debe entregar una investigación hecha con Playwright?

La pregunta, los filtros aplicados, las URLs consultadas, los datos recuperados y evidencia del resultado. El informe debe separar observaciones de interpretaciones y explicar cualquier dato faltante.