00:00:00La forma en que nuestro equipo construye nuestras aplicaciones ha mejorado significativamente.
00:00:03¿La razón?
00:00:03Claude Code lanzó recientemente su extensión de Chrome.
00:00:06Podrías pensar que esto ya era posible con los MCP de Playwright o Puppeteer.
00:00:09Pero esas herramientas tenían problemas graves,
00:00:11como una ventana de contexto innecesariamente inflada,
00:00:13una carpeta de proyecto desordenada llena de capturas de pantalla aleatorias,
00:00:16y la mayoría de las veces ni siquiera podían completar las acciones en la aplicación.
00:00:20Por eso nunca fui un gran defensor de las pruebas automatizadas con IA.
00:00:24Pero también es por eso que estaba realmente emocionado por esta nueva extensión de Claude.
00:00:28Si has estado siguiendo el canal,
00:00:29quizás sepas que en realidad hicimos un vídeo al respecto hace algún tiempo.
00:00:32Lo gracioso es que no fue pensado para Claude Code,
00:00:35pero dijimos claramente que esta extensión tiene mucho más potencial si lo fuera.
00:00:39Y aquí estamos.
00:00:39Ahora finalmente está disponible como un MCP integrado y le proporciona a Claude Code todas las herramientas personalizadas que necesita.
00:00:45Ahora mismo,
00:00:45tiene algunos problemas importantes que deberíamos solucionar.
00:00:48Pero antes de entrar en eso,
00:00:49hagamos una pequeña pausa para hablar sobre Automata.
00:00:52Después de enseñar a millones de personas cómo construir con IA,
00:00:54comenzamos a implementar estos flujos de trabajo nosotros mismos.
00:00:57Descubrimos que podíamos construir mejores productos más rápido que nunca.
00:01:01Ayudamos a dar vida a tus ideas,
00:01:02ya sean aplicaciones o sitios web.
00:01:04Quizás has visto nuestros vídeos pensando: «Tengo una gran idea,
00:01:07pero no tengo un equipo técnico para construirla.» Ese es exactamente el lugar donde entramos nosotros.
00:01:11Piensa en nosotros como tu copiloto técnico.
00:01:13Aplicamos los mismos flujos de trabajo que hemos enseñado a millones directamente a tu proyecto,
00:01:17convirtiendo conceptos en soluciones reales y funcionales sin los dolores de cabeza de contratar o gestionar un equipo de desarrollo.
00:01:23¿Listo para acelerar tu idea hacia la realidad?
00:01:25Ponte en contacto en hello@automata.dev Volviendo a los problemas.
00:01:29El más grande que enfrenté fue que tomaba demasiados pasos secuenciales solo para probar algo realmente simple.
00:01:34Quizás hayas notado que cuando le pides a Claude que pruebe visualmente la página de inicio de un sitio web,
00:01:39realiza una operación de desplazamiento para cada sección y captura una pantalla en cada paso.
00:01:43Luego,
00:01:43junta todas las capturas de pantalla para analizar la interfaz de usuario sección por sección.
00:01:47Podrías pensar que este es un buen enfoque, pero no lo es.
00:01:49En su lugar,
00:01:50podemos hacer que tome una captura de pantalla de página completa y así ahorrar todos esos tokens.
00:01:53Para solucionar esto,
00:01:54utilicé un script que aprovecha diferentes herramientas web para tomar capturas completas.
00:01:57También agregué instrucciones para usar ese script en un comando slash personalizado en mi proyecto.
00:02:02Ahora,
00:02:02cuando uso ese comando para probar la página de inicio,
00:02:05reconoce que se trata de una prueba de página completa basada en las instrucciones que he incluido y usa el script directamente en lugar del método habitual sección por sección.
00:02:13Debido a esto,
00:02:13la prueba ocurre significativamente más rápido y tiene la misma precisión.
00:02:17El segundo problema que encontré fue cuando estas herramientas MCP intentaban cargar una enorme cantidad de contenido de una sola vez para una tarea simple.
00:02:24En lugar de cargar divs específicos,
00:02:26a menudo carga todo el HTML dentro de la etiqueta principal,
00:02:28que contiene una cantidad enorme de tokens incluso cuando no es necesario.
00:02:32Esto termina consumiendo una gran parte de la ventana de contexto,
00:02:34e incluso las tareas más simples pueden inflarlo significativamente.
00:02:37Para solucionar esto,
00:02:38agregué instrucciones en el archivo Claude.md sobre cómo gestionar adecuadamente el contexto al usar la extensión de Chrome de Claude.
00:02:44De esta manera,
00:02:45cualquier extracción está precisamente limitada y no infla el contexto con información innecesaria.
00:02:50Otro problema es que Claude desperdicia mucho tiempo cuando se encuentra con sitios web que contienen pop-ups no deseados como avisos de cookies y prompts similares.
00:02:58Para deshacerse de ellos,
00:02:59utiliza las mismas secuencias de captura de pantalla y desplazamiento.
00:03:01Pero eso está mal.
00:03:02En lugar de dejar que Claude consuma tokens y tiempo innecesarios,
00:03:05podemos usar otras alternativas para manejar estos pop-ups.
00:03:08Como alternativa,
00:03:09creé un script que incluye los selectores de botón
00:03:11"aceptar"
00:03:12más comunes y patrones para descartar paneles de cookies.
00:03:15Encuentra esos selectores en el código y ejecuta funciones para descartar los pop-ups automáticamente.
00:03:19También agregué instrucciones en el archivo Claude.md para que ejecute este script primero antes de continuar con el contenido principal.
00:03:25Ahora,
00:03:26siempre que le pido a Claude que vaya a un sitio web,
00:03:29primero sigue las instrucciones en Claude.md y ejecuta este JavaScript.
00:03:32Esto descarta automáticamente los paneles de cookies,
00:03:35permitiendo que Claude continúe con el contenido principal sin desperdiciar tokens ni realizar pasos innecesarios.
00:03:40Por razones de seguridad,
00:03:42Claude ha sido limitado para realizar capturas o completar la autenticación en tu nombre.
00:03:46Entonces,
00:03:47si te encuentras con un sitio web que las contiene,
00:03:49Claude no puede completar este proceso para ti.
00:03:51Esto es algo que tienes que manejar por tu cuenta.
00:03:53Siempre que trabajes en un sitio web que requiera inicio de sesión o verificación CAPTCHA,
00:03:57asegúrate de ya estar autenticado antes de darle la tarea a Claude.
00:04:00De esta manera, no se bloqueará ni perderá tiempo.
00:04:02Así que estos fueron los principales problemas que pude solucionar.
00:04:05Pero para usarlo correctamente en pruebas,
00:04:06en realidad necesitas un flujo de trabajo adecuado para probar cualquier aplicación.
00:04:10Pero antes de llegar a eso,
00:04:11quiero hablar un poco más sobre por qué prefiero la integración de Chrome de Claude sobre Puppeteer.
00:04:16Esto se debe principalmente a que es una herramienta nativa construida por los propios desarrolladores de Claude Code,
00:04:20y ofrece una integración mucho mejor con control y características mejoradas.
00:04:23Estos MCP se enfocan en hacer pruebas en un entorno separado dedicado que no mantiene sesiones.
00:04:29A menudo son problemáticos de instalar y desorganizan tu carpeta de proyecto con todas las capturas de pantalla.
00:04:33Por otro lado,
00:04:34con esta nueva integración de Chrome,
00:04:35Claude tiene la capacidad de interactuar con tus cuentas autenticadas.
00:04:38Puede interactuar con servicios como Google Docs y Google Sheets.
00:04:42Incluso puede retener toda la información de sesión y usarla para realizar tareas aún mejor.
00:04:46Antes de llegar al flujo de trabajo,
00:04:47quiero mencionar que las integraciones de navegador usan mucho contexto porque son simplemente más intensivas en computación que las llamadas de herramientas normales.
00:04:54Incluso lo mencionaron en uno de sus blogs.
00:04:56Así que necesitas vigilar la compactación automática mientras trabajas con Claude Code.
00:05:00Además,
00:05:01como se trata de la integración de Chrome,
00:05:03solo funciona con Chrome.
00:05:04Esperaba que funcionaría con cualquier navegador basado en Chromium,
00:05:06pero no es así.
00:05:07Y realmente no podemos solucionar eso.
00:05:08Y para quienes usamos múltiples perfiles de Chrome,
00:05:11será un poco más frustrante porque continuamente abre los perfiles incorrectos.
00:05:15Y espero que solucionen este error pronto.
00:05:17Con todas las correcciones que mencioné antes y la integración de Claude con Chrome,
00:05:21mi flujo de trabajo de desarrollo ha mejorado significativamente.
00:05:24Sin embargo,
00:05:24las extensiones de Chrome tienen una limitación en Manifest V3.
00:05:27Pueden ser bloqueadas si se ejecutan durante demasiado tiempo.
00:05:29Muchas personas le están pidiendo a los desarrolladores de Claude Code que solucionen esto en su repositorio también.
00:05:33Si estás haciendo pruebas de extremo a extremo de tu aplicación web de principio a fin,
00:05:37esto puede causar que la sesión sea bloqueada por Chrome y Claude se detendrá inesperadamente.
00:05:41Entonces tendrías que solicitarle nuevamente para reiniciar la ejecución.
00:05:44Esto puede ser particularmente problemático si le asignas una tarea de larga duración a Claude y te alejas de tu computadora,
00:05:50solo para regresar y encontrar la tarea solo parcialmente completada.
00:05:53Por esta exacta razón,
00:05:54en lugar de pruebas de extremo a extremo,
00:05:56creé múltiples archivos de prueba que cubran todos los diferentes aspectos de la aplicación.
00:06:00Cada archivo contiene información detallada sobre niveles de prioridad,
00:06:03precondiciones,
00:06:04pasos de prueba y resultados esperados.
00:06:06También hay una guía de pruebas sobre cómo realizar estas pruebas,
00:06:08junto con un archivo readme para la documentación de pruebas.
00:06:11Como sabes,
00:06:11Claude tiene una ventana de contexto limitada,
00:06:13y cuando se alcanza ese límite,
00:06:14las instrucciones y el progreso pueden perderse.
00:06:16Por esta razón,
00:06:17agregué instrucciones en el archivo Claude.md que le indican a Claude que cree un documento de informe de prueba completo después de probar cada archivo.
00:06:24De esta manera,
00:06:25incluso si tienes que compactar porque las herramientas del navegador consumen mucho contexto,
00:06:28Claude puede mantener la conciencia de qué ha sido probado y qué aún necesita ser probado refiriéndose a estos archivos de progreso.
00:06:34Ahora bien,
00:06:34antes de continuar con cualquier prueba,
00:06:36la mejor práctica es ejecutar una compresión porque probar tu aplicación en Chrome va a consumir mucho de tu ventana de contexto.
00:06:42Para optimizar mi proceso de prueba,
00:06:44creé otro comando slash personalizado.
00:06:46Lo que hace este comando es probar de manera guiada y crear documentación en una estructura adecuada después de las pruebas siguiendo las instrucciones de Claude.md.
00:06:54También añadí instrucciones para monitorear el contexto antes de comenzar cualquier tarea,
00:06:57de modo que cuando empiece la prueba,
00:06:59no pierda contexto a mitad del proceso y haga una compresión mientras está trabajando.
00:07:02De esta manera,
00:07:03cuando inicias el proceso de prueba,
00:07:04simplemente usas el comando slash y proporcionas el archivo con el que deseas comenzar a probar y Claude comienza a probar siguiendo las instrucciones exactas.
00:07:11Identifica problemas por su cuenta y utiliza el navegador y todas las herramientas necesarias para las pruebas.
00:07:16Interactúa con los elementos automáticamente y es capaz de encontrar errores que no suelen ser visibles pero que se pueden detectar leyendo el resultado de la consola.
00:07:23También documenta las pruebas al final según se indica.
00:07:26De esta manera,
00:07:26todo el proceso de prueba mejora significativamente porque Claude tiene acceso a los registros de la consola y puede realizar pruebas automatizadas en el navegador de manera más efectiva que nunca.
00:07:35Esto nos lleva al final de este vídeo.
00:07:37Si deseas apoyar el canal y ayudarnos a seguir haciendo vídeos como este,
00:07:40puedes hacerlo usando el botón de Super Thanks a continuación.
00:07:43Como siempre,
00:07:44gracias por ver y nos vemos en el próximo vídeo.