Cap 7: Skills de Testing y QA

Testing en navegador real

El diferenciador de gstack en testing es que usa Chromium real vía Playwright — no simulaciones ni mocks de DOM. Lo que ves en el test es lo que ve el usuario.

graph TD
    BROWSE[/browse/ — Playwright daemon] --> QA[/qa/]
    BROWSE --> CSO[/cso/]
    BROWSE --> BENCH[/benchmark/]
    BROWSE --> CANARY[/canary/]

El daemon de Playwright se inicia una vez y procesa ~100-200ms por comando.

/qa

QA lead metodológico que testea la app en el navegador real y genera tests de regresión para cada bug que encuentra.

4 modos de ejecución:

Modo	Descripción
Diff-aware (default)	Solo testea páginas afectadas por los cambios del branch
Full exploration	Recorre toda la app sistemáticamente
Quick smoke test	Flujos críticos únicamente
Regression baseline	Compara contra baseline guardado

Ciclo por cada bug:

flowchart LR
    NAV[Navegar página] --> BUG{¿Bug?}
    BUG -->|No| NEXT[Siguiente página]
    BUG -->|Sí| REP[Documentar reproducción]
    REP --> FIX[Fix mínimo]
    FIX --> COMMIT[Commit atómico]
    COMMIT --> TEST[Auto-generar test de regresión]
    TEST --> NAV

Output en PR:

QA Report:
  Pages tested: 12
  Bugs found: 3
  Bugs fixed: 3
  Regression tests added: 3
  Coverage: 42 → 47 tests (+5 nuevos)

/qa-only

Igual que /qa pero solo reporta — no modifica código ni crea commits.

Cuándo usarlo:

• Cuando quieres un reporte sin cambios automáticos
• En auditorías de código ajeno
• Cuando el fix requiere decisión de arquitectura previa

/browse

Control directo del navegador Chromium desde Claude Code.

Comandos básicos:

# Capturar screenshot
$B screenshot

# Navegar a URL
$B navigate https://localhost:3000/dashboard

# Click en elemento
$B click "button[data-testid='submit']"

# Llenar formulario
$B fill "input[name='email']" "[email protected]"

# Esperar elemento
$B wait "#loading-spinner" hidden

# Ejecutar JS
$B eval "document.querySelector('.modal').classList.remove('hidden')"

Modo headed (ver navegador en vivo):

# Lanzar Chrome visible
/connect-chrome

# Verde en el borde superior = controlado por gstack
# Continúas viendo cada acción del agente en tiempo real

# Volver a headless
$B disconnect

Handoff para autenticación:

# El agente llega a un CAPTCHA o MFA
$B handoff    # Le pasa el control al humano

# Resolvemos el CAPTCHA manualmente

$B resume     # El agente retoma el control

/cso

Chief Security Officer mode: auditoría OWASP Top 10 + STRIDE threat modeling.

OWASP Top 10 cubiertos:

mindmap
  root[OWASP Top 10]
    A01 Broken Access Control
    A02 Cryptographic Failures
    A03 Injection
    A04 Insecure Design
    A05 Security Misconfiguration
    A06 Vulnerable Components
    A07 Auth Failures
    A08 Software Integrity Failures
    A09 Logging Failures
    A10 SSRF

STRIDE threat modeling:

Amenaza	Descripción
Spoofing	¿Puede un atacante impersonar a otro usuario?
Tampering	¿Puede modificar datos en tránsito o en reposo?
Repudiation	¿Puede negar haber hecho algo?
Info Disclosure	¿Puede acceder a datos no autorizados?
Denial of Service	¿Puede tumbar el sistema?
Elevation of Privilege	¿Puede escalar permisos?

17 exclusiones de falsos positivos: El skill tiene codificadas 17 categorías comunes de falsos positivos para no reportar issues que en realidad son seguros en contexto.

Output: Reporte priorizado (Crítico / Alto / Medio / Bajo) con pasos de reproducción para cada finding.

/benchmark

Baseline de performance antes y después de cambios.

Métricas capturadas:

• Core Web Vitals: LCP, FID, CLS, TTFB
• Tiempos de carga: DOMContentLoaded, Load complete
• Recursos: Tamaño de JS, CSS, imágenes
• Requests: Número total, waterfalls

Flujo típico:

# Antes del cambio
/benchmark --save baseline

# Después del cambio
/benchmark --compare baseline

Output de comparación:

Performance comparison:
  LCP:    2.1s → 1.4s  (-33%) ✅
  CLS:    0.05 → 0.02  (-60%) ✅
  JS:    342KB → 289KB  (-15%) ✅
  TTFB:  120ms → 115ms   (-4%) ✅

/setup-browser-cookies

Importa sesiones reales de browser para testear páginas autenticadas sin logins manuales.

Browsers soportados (macOS Keychain):

• Chrome
• Arc
• Brave
• Edge

/setup-browser-cookies
# → Selecciona el browser fuente
# → Importa cookies para el dominio indicado
# → /qa y /browse usarán esas cookies automáticamente

Elimina el loop de “login manual → test → logout → repetir” en cada ciclo de QA.

Stack de testing completo

flowchart TD
    QA[/qa/ — funcional] --> CSO
    CSO[/cso/ — seguridad] --> BENCH
    BENCH[/benchmark/ — performance] --> READY[Listo para ship]

    BROWSE[/browse/] -.->|infraestructura| QA
    BROWSE -.->|infraestructura| CSO
    BROWSE -.->|infraestructura| BENCH