Este artículo detalla los pasos para configurar un entorno de pruebas de UI utilizando Claude Code y Playwright, aprovechando un modelo local de Ollama (Qwen 2.5 7b).

Preparación del Entorno de Ejecución Base

Para ejecutar Claude Code en Windows, se requiere un entorno proporcionado por Git Bash. Asegúrate de tener instalados Git y Node.js.

1. Instalar Git for Windows: Descarga e instala Git desde su sitio web oficial. Utiliza la configuración predeterminada. Git Bash es esencial para la ejecución de Claude Code.
2. Instalar Node.js: Descarga e instala la versión LTS (Soporte a Largo Plazo) desde el sitio oficial de Node.js. Verifica la instalación ejecutando node --version y npm --version en la terminal de Git Bash.

Nota: Aunque existen alternativas con WSL, Git Bash es la opción más directa y no requiere la activación de WSL.

Instalación de Claude Code y Configuración de Conexión a Ollama

A continuación, se instala Claude Code y se configura para que se comunique con tu servicio Ollama local mediante variables de entorno.

1. Instalar Claude Code: Ejecuta el siguiente comando en Git Bash para la instalación global y verifica la versión: ```bash

   npm install -g @anthropic-ai/claude-code claude --version

2. Configurar Variables de Entorno para Ollama: Este paso es crucial para dirigir las solicitudes de Claude Code a tu instancia local de Ollama.

   • Configuración Temporal (para pruebas): En Git Bash, ejecuta: ```bash

     export ANTHROPIC_AUTH_TOKEN=ollama export ANTHROPIC_BASE_URL=http://localhost:11434

     
      `ANTHROPIC_AUTH_TOKEN` puede ser cualquier valor no vacío; `ANTHROPIC_BASE_URL` apunta a la dirección predeterminada de Ollama.
     

   • Configuración Permanente: Para que estas configuraciones se apliquen automáticamente al iniciar Git Bash, añade las dos líneas anteriores a tu archivo ~/.bashrc.

3. Iniciar Claude Code con el Modelo Específico: Una vez configuradas las variables de entorno, navega al directorio de tu proyecto en la terminal y ejecuta Claude Code, especificando tu modelo Qwen 2.5: ```bash

   cd tu-directorio-proyecto claude --model qwen2.5:7b

   
    La primera vez, puede que necesites seguir indicaciones para la configuración del modelo local.
   

4. Alternativa: Si prefieres una gestión simplificada de la configuración, considera herramientas como CC Switch, que ofrecen una interfaz gráfica para alternar entre diferentes proveedores de modelos.

Instalación de Playwright

Instala el framework de pruebas Playwright en tu proyecto usando npm:

npm init playwright@latest
 

Este comando, al preguntar si se deben instalar los navegadores de Playwright, equivale a ejecutar npx playwright install. Si seleccionas "sí" durante la instalación, no necesitarás ejecutar el comando de instalación de navegadores por separado.

Tras compleatr la instalación, ejecuta el siguiente comando para descargar los navegadores necesarios (como Chromium):

npx playwright install
 

Creación de tu Primer Script de Prueba

Con el entorno configurado, puedes empezar a escribir tus pruebas. Puedes hacerlo manualmente o utilizar la función de grabación de Playwright para generar un código inicial que luego Claude Code puede refinar.

1. Grabación de Acciones (Opcional): Ejecuta npx playwright codegen https://example.com en Git Bash. Esto abrirá un navegador donde tus interacciones se registrarán, generando el código de prueba correspondiente. Utiliza este código como referencia o punto de partida.
2. Asistencia de IA para Escritura y Optimización:
   • En la terminal donde se ejecuta Claude Code, describe claramente el escenario de prueba que deseas automatizar.
   • Proporciona el código generado por la grabación o tu código inicial a Claude Code. Pídele que lo revise y optimice según las convenciones de tu proyecto (por ejemplo, aplicando el patrón Page Object Model o priorizando selectores data-testid). Esto mejorará significativamente la calidad y mantenibilidad del código.

Solución de Problemas Comunes

• Problemas de Instalación: Si encuentras errores relacionados con la detección del sistema operativo durante npm install, intenta forzar la configuración del sistema operativo para npm: ```bash

  npm config set os linux npm install -g @anthropic-ai/claude-code --force --no-os-check

• Fallo al Iniciar Navegadores: Asegúrate de haber ejecutado npx playwright install. Si la descarga es lenta, puedes configurar un espejo de descarga en China: ```bash

  set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright npx playwright install

Configuración Permanente de Variables de Entorno en .bashrc

Para que las variables de entorno de Ollama sean permanentes, edita tu archivo ~/.bashrc:

1. Encontrar o Crear .bashrc:

   • Abre Git Bash.
   • Verifica si el archivo existe con ls -la ~/.bashrc.
   • Si no existe, créalo con touch ~/.bashrc o usando notepad ~/.bashrc (aceptando la creación si se solicita).

2. Editar .bashrc: Puedes usar:

   • Bloc de Notas: Ejecuta notepad ~/.bashrc, añade las siguientes líneas, guarda y cierra: ```bash

     export ANTHROPIC_AUTH_TOKEN=ollama export ANTHROPIC_BASE_URL=http://localhost:11434

   • VS Code: Ejecuta code ~/.bashrc, añade las líneas, guarda.

   • Editores de Línea de Comandos: Usa nano ~/.bashrc o vim ~/.bashrc, añade las líneas, guarda y sal.

3. Aplicar Cambios: Para que las configuraciones surtan efecto inmediatamente, ejecuta source ~/.bashrc o simplemente cierra y vuelve a abrir Git Bash.

4. Verificar la Configuración: Confirma que las variables se han cargado correctamente ejecutando: ```bash

   echo $ANTHROPIC_AUTH_TOKEN echo $ANTHROPIC_BASE_URL

   
    Deberías ver `ollama` y `http://localhost:11434` respectivamente.
   
   

Ubicación del Archivo en Windows: El símbolo ~ representa tu directorio de usuario (C:\Users\TuNombreDeUsuario\). Por lo tanto, ~/.bashrc se encuentra en C:\Users\TuNombreDeUsuario\.bashrc.

Consejos Adicionales:

• Si .bashrc no se carga, verifica si tu Git Bash utiliza .bash_profile o .profile y añade la línea source ~/.bashrc en uno de esos archivos.
• Utiliza barras inclinadas (/) para las rutas en los archivos de configuración de Bash, incluso en Windows.

Siguiendo estos pasos, tu entorno de desarrollo estará listo para usar Claude Code y Playwright para la automatización de pruebas de UI.