Blog

Cómo usar las habilidades de código de Claude para pruebas

Herve Kom

22 January 2026

Cómo usar las habilidades de código de Claude para pruebas

Si estás cansado de suites de pruebas frágiles que se rompen cada vez que refactorizas la UI, o de pruebas E2E inestables que pasan localmente pero fallan en CI, Claude Code Skills ofrece una mejor manera. Estos flujos de trabajo impulsados por IA no solo escriben pruebas, sino que las ejecutan, depuran fallos, actualizan selectores rotos y se adaptan continuamente a medida que tu aplicación evoluciona.

💡
¿Las pruebas te ralentizan? Combina Claude Code con Apidog para una automatización full-stack: pruebas frontend impulsadas por IA + depuración visual de API. Prueba ambos gratis: claude.ai y apidog.com. Desarrolla más rápido con IA.

Probar aplicaciones web implica hacer malabarismos con pruebas unitarias, pruebas de integración, pruebas de componentes, flujos E2E y contratos de API. Claude Code Skills automatiza todo esto. Tú describes lo que hacen los usuarios, y Claude genera suites de pruebas completas, las ejecuta, corrige fallos e informa de los resultados. Sin scripts frágiles. Sin mantenimiento manual. Solo pruebas que funcionan.

Lo que hace que Claude Code Skills sea potente para las pruebas:

Exploremos cómo aprovechar Claude Code Skills para realizar pruebas a escala.

Comprendiendo Claude Code Skills para Pruebas

¿Qué son las Habilidades de Pruebas?

Las Claude Code Skills son flujos de trabajo de IA personalizados y reutilizables que amplían las capacidades de prueba de Claude Code. Piensa en ellas como ejecutores de pruebas inteligentes que pueden:

A diferencia de los scripts de prueba tradicionales que siguen una lógica rígida, las habilidades aprovechan el razonamiento de Claude para manejar casos extremos, sugerir mejoras y adaptarse a condiciones cambiantes.

Cómo Funcionan las Habilidades

Las habilidades operan a través de varios mecanismos clave:

1. Comandos Invocables por el Usuario

# Ejecuta una habilidad con un comando de barra
/run-unit-tests --coverage
/run-e2e-tests --env production
/fix-flaky-tests --retry 3

2. Herramientas Permitidas

Las habilidades especifican qué herramientas pueden usar:

3. Ganchos de Ciclo de Vida

Las habilidades pueden activar acciones en puntos específicos:

4. Archivos de Planificación

Las habilidades mantienen el estado utilizando archivos markdown para seguir el progreso de las pruebas, los fallos y las mejoras.

Por Qué las Habilidades Sobresalen en las Pruebas Web

Los scripts de prueba tradicionales se rompen fácilmente cuando se enfrentan a condiciones inesperadas. Las habilidades aportan inteligencia a las pruebas:

Capacidades Centrales de Pruebas

1. Generación Dinámica de Pruebas

Indicación: "Escribe pruebas E2E para un flujo de compra de usuario: añadir artículos, aplicar descuento, pagar, confirmar pedido."

Claude genera:

// Especificación completa de Playwright con aserciones realistas
// Configuración de pruebas cross-browser
// Captura de pantalla en caso de fallos
// Aserciones de rendimiento

No es un andamiaje de código listo para producción.

2. Ejecución e Iteración

# En la sesión de Claude Code
> Ejecutar las pruebas de compra y corregir cualquier fallo

# Claude hace:
npm test -- checkout.spec.js
# Las pruebas fallan en el paso de pago
# Claude analiza el fallo
# Actualiza los endpoints de mock
# Añade esperas explícitas
# Vuelve a ejecutar las pruebas
# Todo en verde ✓

3. Inteligencia del Framework

React + Jest? Claude genera pruebas de React Testing Library con fireEvent, waitFor y consultas de pantalla.

Vue + Vitest? Utiliza mount, ganchos de ciclo de vida y patrones específicos de Vue.

Playwright? Genera especificaciones cross-browser con selectores resilientes.

Claude se adapta a cualquier framework que utilice tu proyecto.

4. Resistencia de Selectores

Cuando refactorizas HTML, Claude sabe:

// ❌ Frágil
getByXPath("//button[2]/span[1]")

// ✓ Resiliente
getByRole('button', { name: /checkout/i })
getByTestId('checkout-button')

Sugiere y aplica patrones resilientes automáticamente.

5. Integración de Mocks y API

Claude combina a la perfección:

Una sola indicación: "Prueba el flujo de inicio de sesión. Mockea la API de autenticación. Verifica que la respuesta coincida con el esquema OpenAPI."

Anatomía de una Habilidad de Prueba

Estructura de Directorios

Las habilidades de prueba residen en .claude/skills/ con esta disposición:

.claude/
├── skills/
│   ├── unit-tests/
│   │   ├── SKILL.md              # Manifiesto de la habilidad
│   │   ├── planning.md           # Seguimiento del progreso de la prueba
│   │   └── patterns/             # Patrones de prueba
│   ├── e2e-tests/
│   │   ├── SKILL.md
│   │   └── scenarios/            # Escenarios E2E
│   └── api-tests/
│       └── SKILL.md
└── skills.md                     # Índice de todas las habilidades

El Manifiesto SKILL.md

Cada habilidad comienza con un frontmatter YAML seguido de instrucciones en markdown:

---
name: e2e-testing
version: "1.0.0"
description: Pruebas E2E para aplicaciones web
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - Grep
  - Glob
hooks:
  SessionStart:
    - matcher: command
      command: "echo '[E2E Tests] Iniciando pruebas de automatización del navegador...'"
  Stop:
    - matcher: command
      command: "echo '[E2E Tests] Suite de pruebas completa. Revisa los resultados anteriores.'"
---

# Habilidad de Pruebas E2E

Pruebas end-to-end completas para aplicaciones web usando Playwright.

## Uso

```bash
/e2e-tests                    # Ejecutar todas las pruebas E2E
/e2e-tests --headed          # Ejecutar con navegador visible
/e2e-tests --project chrome  # Ejecutar navegador específico
/e2e-tests --grep login      # Ejecutar prueba específica

Lo que hace esta Habilidad

Ejecución de Pruebas

Análisis de Fallos

Generación de Informes

Instrucciones para Claude

Cuando se invoca:

  1. Comprueba si existen playwright.config.js y especificaciones de prueba.
  2. Analiza los argumentos de la línea de comandos para filtros.
  3. Ejecuta Playwright con las opciones apropiadas.
  4. Monitoriza la ejecución de las pruebas en tiempo real.
  5. Analiza los fallos a medida que ocurren.
  6. Sugiere correcciones (por ejemplo, actualizar selectores, añadir esperas).
  7. Vuelve a ejecutar las pruebas fallidas con las correcciones.
  8. Genera un informe completo.
  9. Sale con un código de estado (0 = pasa, 1 = fallos).

---

## Construyendo Tu Primera Habilidad de Prueba

Construyamos una habilidad práctica: un ejecutor de pruebas E2E que maneje escenarios comunes de automatización del navegador.

### Paso 1: Crear el Directorio de la Habilidad

```bash
mkdir -p .claude/skills/e2e-testing

Paso 2: Escribir el Manifiesto de la Habilidad

Crea .claude/skills/e2e-testing/SKILL.md:

---
name: e2e-testing
version: "1.0.0"
description: Pruebas E2E de automatización del navegador
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - Grep
  - Glob
hooks:
  SessionStart:
    - matcher: command
      command: "echo '[E2E] Inicializando pruebas de Playwright...'"
  Stop:
    - matcher: command
      command: "echo '[E2E] Ejecución de pruebas completa'"
---

# Habilidad de Pruebas E2E

Pruebas de automatización del navegador para aplicaciones web.

## Patrones de Prueba

Esta habilidad soporta estos patrones de prueba:

**Pruebas de Navegación**
* Cargar páginas y verificar redirecciones
* Comprobar títulos y URLs de páginas
* Validar rutas de navegación (breadcrumbs)

**Pruebas de Interacción con Formularios**
* Rellenar campos de entrada
* Enviar formularios
* Validar mensajes de error
* Comprobar la validación de campos

**Pruebas de Flujo de Usuario**
* Recorridos completos de usuario (inicio de sesión → panel de control → cierre de sesión)
* Flujos de trabajo de múltiples pasos
* Persistencia de estado

**Pruebas Cross-Browser**
* Chrome, Firefox, Safari
* Diseños responsivos
* Viewports móviles

## Reglas de Manejo de Errores

En caso de fallo de la prueba:

1. Comprobar si es un problema de selector → Actualizar selector
2. Comprobar si es un problema de temporización → Añadir espera explícita
3. Comprobar si es un problema de mock → Verificar manejadores de MSW
4. Comprobar si es un problema de entorno → Comprobar variables de entorno
5. Si no se resuelve → Registrar error detallado y detenerse

## Instrucciones

Cuando se invoca:

1. **Detectar configuración**
   * Comprobar `playwright.config.js`
   * Identificar la estructura del directorio de pruebas
   * Analizar argumentos de línea de comandos

2. **Preparar entorno**
   * Instalar binarios del navegador si es necesario
   * Cargar variables de entorno
   * Inicializar MSW si se usan mocks

3. **Ejecutar pruebas**
   * Ejecutar el comando de prueba de Playwright
   * Transmitir la salida al terminal
   * Monitorizar los fallos en tiempo real

4. **Analizar fallos**
   * Leer la salida de la prueba y los registros de errores
   * Identificar el tipo de fallo (selector, tiempo de espera, aserción)
   * Sugerir correcciones específicas

5. **Aplicar correcciones**
   * Actualizar selectores rotos
   * Añadir esperas implícitas donde sea necesario
   * Modificar respuestas de mock
   * Volver a ejecutar las pruebas fallidas

6. **Generar informe**
   * Resumir el total de pruebas, pasadas, fallidas
   * Listar todos los fallos con remediación
   * Crear informe HTML
   * Mostrar en terminal

7. **Salir con el estado apropiado**
   * Salir con 0 si todas pasan
   * Salir con 1 si alguna falla

Paso 3: Registrar la Habilidad

Añadir a .claude/skills.md:

# Habilidades de Prueba Disponibles

## Pruebas E2E

### /e2e-tests
Automatización de pruebas de navegador para aplicaciones web.
- **Versión**: 1.0.0
- **Uso**: `/e2e-tests [--headed] [--project navegador]`
- **Cuándo usar**: Antes de la implementación, después de cambios en la UI
- **Tiempo de ejecución**: 5-15 minutos dependiendo del número de pruebas

Paso 4: Probar la Habilidad

# En Claude Code
/e2e-tests --headed

Claude ejecutará ahora las pruebas E2E, gestionando los navegadores y analizando los fallos.

Patrones de Pruebas Avanzados

Patrón 1: Pruebas Multi-Framework

Claude Code adapta la generación de pruebas según tu framework:

## Detección Automática y Pruebas Específicas del Framework

Si `package.json` contiene:
- **React + Jest** → React Testing Library con `fireEvent`, `waitFor`, consultas de pantalla
- **Vue + Vitest** → Vue Test Utils con `mount`, ganchos de ciclo de vida, suscripciones a la store
- **Playwright** → E2E cross-browser con selectores resilientes
- **Cypress** → Automatización basada en comandos con API `cy.*`

Claude detecta automáticamente el framework y genera las pruebas apropiadas.

Ejemplo: Misma indicación, diferentes resultados:

# Indicación: "Probar el formulario de inicio de sesión"

# Salida de React:
# Usa: fireEvent.change(), screen.getByLabelText(), waitFor()

# Salida de Vue:
# Usa: mount(), wrapper.vm, store.commit()

# Salida de Playwright:
# Usa: page.getByLabel(), page.getByRole(), page.waitForURL()

Patrón 2: Lógica de Reintento Inteligente para Pruebas Inestables

Claude Code diagnostica y corrige inteligentemente las pruebas inestables:

## Manejo Inteligente de la Inestabilidad

Cuando una prueba falla intermitentemente:

1. **Analizar el fallo** → Leer registros de errores
2. **Diagnosticar la causa raíz**:
   - Si es basado en selector → Actualizar a selector resiliente
   - Si es basado en tiempo → Añadir espera explícita
   - Si es basado en asincronía → Aumentar tiempo de espera
   - Si es basado en mock → Verificar respuesta del mock
3. **Aplicar corrección** → Modificar el código de la prueba
4. **Volver a ejecutar** → Ejecutar la prueba 3 veces
5. **Verificar** → Confirmar que la corrección resuelve la inestabilidad
6. **Reportar** → Documentar el patrón para futuras referencias

Ejemplo de salida:

❌ Prueba fallida: "elemento no encontrado: #payment-button"
📊 Análisis: El selector es demasiado específico (el ID cambió en la refactorización)
🔧 Corrección: Cambiado de #payment-button → button[name="pay-now"]
✅ Re-ejecución: Pasó 3/3 veces
✓ Inestabilidad resuelta

Automatizando con CI/CD

Pipeline de Pruebas E2E

Configura pruebas E2E completas en GitHub Actions:

# .github/workflows/e2e-tests.yml
name: E2E Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 2 * * *'  # Pruebas nocturnas

jobs:
  e2e:
    name: Pruebas E2E - ${{ matrix.browser }}
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Instalar dependencias
        run: npm ci
      
      - name: Instalar navegadores de Playwright
        run: npx playwright install --with-deps ${{ matrix.browser }}
      
      - name: Construir aplicación
        run: npm run build
      
      - name: Ejecutar pruebas E2E
        run: npx playwright test --project=${{ matrix.browser }}
      
      - name: Subir informe de pruebas
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/
          retention-days: 30
      
      - name: Publicar resultados de pruebas
        if: always()
        uses: EnricoMi/publish-unit-test-result-action@v2
        with:
          files: 'test-results/*.xml'
          check_name: Pruebas E2E (${{ matrix.browser }})

Ganchos de Pruebas Pre-Commit

Evita que las pruebas rotas entren en tu repositorio:

# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "Ejecutando pruebas unitarias pre-commit..."
npm test -- --bail --findRelatedTests

if [ $? -ne 0 ]; then
  echo "❌ Pruebas fallidas. Commit bloqueado."
  exit 1
fi

echo "✓ Todas las pruebas pasaron"

Validación Pre-Push

Valida antes de subir al remoto:

# .git/hooks/pre-push
#!/bin/bash

BRANCH=$(git rev-parse --abbrev-ref HEAD)

if [ "$BRANCH" = "main" ]; then
  echo "Ejecutando suite de pruebas completa antes de subir a main..."
  npm test -- --coverage
  npx playwright test
elif [ "$BRANCH" = "develop" ]; then
  echo "Ejecutando pruebas E2E antes de subir a develop..."
  npx playwright test
fi

if [ $? -ne 0 ]; then
  echo "❌ Validación fallida. Push bloqueado."
  exit 1
fi

echo "✓ Todas las validaciones pasaron"

Combinando con Apidog

💡 Consejo Profesional: Mientras Claude Code maneja las pruebas frontend, Apidog gestiona las pruebas de API. Juntos, aseguran una fiabilidad de extremo a extremo.

Indicación a Claude: "Antes de ejecutar las pruebas E2E, valida que todas las API pasen en Apidog. Si las pruebas de API fallan, omite las E2E e informa qué endpoints están rotos."

// e2e/pre-test-checks.js
import { execSync } from 'child_process';

async function runPreTestChecks() {
  console.log('🔍 Validando APIs...');
  
  try {
    // Ejecutar primero las pruebas CLI de Apidog
    execSync('apidog run --collection ./tests/api-collection.json --env ci', {
      stdio: 'inherit'
    });
    console.log('✓ Pruebas de API pasaron - continuando con E2E');
  } catch (error) {
    console.error('✗ Pruebas de API fallaron - omitiendo E2E');
    process.exit(1);
  }

  console.log('🎭 Ejecutando pruebas E2E...');
  execSync('npx playwright test', { stdio: 'inherit' });
}

runPreTestChecks();

Esto crea un mecanismo de seguridad: si las API están rotas, las pruebas E2E se omiten automáticamente.

Mejores Prácticas y Resolución de Problemas

Resistencia de Selectores

Problema: Las pruebas pasan localmente, fallan en CI porque el DOM cambia ligeramente.

Solución: Usar selectores resilientes.

// ❌ Frágil
const button = page.locator('button:nth-child(3)');

// ✓ Resiliente
const button = page.getByRole('button', { name: /submit/i });
const button = page.getByTestId('submit-button');

Condiciones de Carrera Asincrónicas

Problema: La prueba hace clic en el botón pero la página aún no ha cargado.

Solución: Usar esperas explícitas.

// ❌ Inestable
await page.click('#submit');
await expect(page).toHaveURL(/dashboard/);

// ✓ Seguro
await page.click('#submit');
await page.waitForURL(/dashboard/);

Variables de Entorno

Problema: Las pruebas fallan porque las claves de API no están disponibles.

Solución: Usar .env.test.

// tests/setup.js
import dotenv from 'dotenv';
dotenv.config({ path: '.env.test' });

Conclusión

Claude Code Skills transforma las pruebas de una tarea pesada en un superpoder. Tú describes los recorridos de usuario, y Claude genera suites de pruebas completas, las ejecuta, depura fallos y corrige problemas de forma autónoma.

Combinado con Apidog para pruebas de API, logras una cobertura full-stack:

Capa Herramienta Cobertura
Frontend Claude Code Interacciones de usuario, componentes, UI
APIs Apidog Validación de esquemas, contratos, respuestas
Integración Ambas Alineación Frontend-API, sincronización de mocks

Empieza hoy mismo:

  1. Instala Claude Code: npm install -g @anthropic-ai/claude-code
  2. Navega a tu proyecto: cd your-app
  3. Lanza: claude

4.  Describe lo que quieres probar: "Crea pruebas E2E para el flujo de compra"

5.  Observa cómo Claude genera, ejecuta e itera

La combinación de generación de pruebas impulsada por IA y depuración inteligente significa menos pruebas inestables, pipelines de CI más rápidos y más confianza en cada implementación. Deja de mantener scripts de prueba frágiles, deja que Claude Code Skills haga el trabajo pesado mientras tú te concentras en construir funcionalidades.

¿Listo para eliminar las pruebas inestables? Instala Claude Code y prueba Apidog gratis para pruebas de API. Codifica de forma más inteligente. Prueba más rápido. Implementa con confianza.

button

Practica el diseño de API en Apidog

Descubre una forma más fácil de construir y usar APIs

Registrarse gratisDescargar