validate-site

name: validate-site description: "Auditoría QA rigurosa del sitio Grupo Prosperemos. Navega cada página con Playwright MCP, verifica contenido exacto, interactividad, imágenes, consola y estructura — como si fueras el dueño del sitio inspeccionando cada detalle antes de un lanzamiento." argument-hint: "[all | home | credito-nomina | credito-grupal | bolsa | nosotros | regulacion | contacto] [--prod]" user-invocable: true allowed-tools: - Bash - mcpplaywrightbrowser_navigate - mcpplaywrightbrowser_take_screenshot - mcpplaywrightbrowser_click - mcpplaywrightbrowser_evaluate - mcpplaywrightbrowser_snapshot - mcpplaywrightbrowser_resize - mcpplaywrightbrowser_wait_for

Auditoría QA de producción para prosperemos.vercel.app / localhost:3000. Actúa como el dueño del sitio + experto web: conoces cada pixel, cada texto, cada interacción esperada. Un fallo no es un warning — es un bloqueo.

Entorno

Local (default): http://localhost:3000
Prod (--prod): https://prosperemos.vercel.app

Si no hay argumento de página, ejecuta all (todas las páginas en orden).

Protocolo de ejecución

Para cada página:

Navega a la URL.
Espera a que la página cargue completamente (evalúa document.readyState === 'complete').
Captura screenshot del viewport inicial.
Ejecuta todos los checks definidos para esa página.
Desplázate a secciones clave y toma screenshots adicionales.
Al final de cada página, imprime el resultado como tabla (ver formato).

Viewport desktop: 1280×800 (default al iniciar). Viewport móvil: 390×844 (iPhone 14) — úsalo en los checks de responsividad.

Checks globales (ejecutar en TODAS las páginas)

G1 — Sin errores de consola JS

// Captura errores antes de navegar:
page.on('console', msg => if msg.type() === 'error' → registrar)

PASS: 0 errores de consola
WARN: warnings (no bloquean)
FAIL: cualquier console.error o excepción no manejada

G2 — Header correcto

Verificar en el DOM:

✅ Logo Prosperemos visible (img[alt="Grupo Prosperemos"])
✅ Links de nav presentes exactamente: INICIO · NOSOTROS · CRÉDITO GRUPAL · CRÉDITO DE NÓMINA · BOLSA DE TRABAJO · REGULACIÓN · CONTACTO (7 links, este orden)
❌ NO debe existir ningún elemento con texto "SOLICITA TU CRÉDITO" ni "SOLICITA TU CREDITO"
✅ Barra superior con "¡LLAMANOS AHORA!" y número de teléfono

// Verificar ausencia del botón CTA:
const cta = document.querySelector('a[href="/contacto#formulario"]')
// FAIL si cta existe y es visible

G3 — Footer presente

✅ Texto "GRUPO PROSPEREMOS SA DE CV SOFOM ENR"
✅ Logos de CONDUSEF y Buró de Entidades Financieras visibles
✅ Sección REGULACIÓN con links: "UNE Unidad de Atención a Usuarios", "Aviso de Privacidad", "Despachos de Cobranza"
✅ Teléfonos de ciudades: PROSPEREMOS, SAN LUIS POTOSÍ, GUADALAJARA, TORREÓN

G4 — Botón WhatsApp

✅ Botón flotante de WhatsApp visible en esquina inferior derecha

G5 — Imágenes sin broken

const imgs = Array.from(document.images)
const broken = imgs.filter(img => !img.complete || img.naturalWidth === 0)
// FAIL si broken.length > 0 — reportar src de cada imagen rota

G6 — Responsividad básica

Cambiar viewport a 390×844:

✅ No hay overflow horizontal (scroll x no debe aparecer)
✅ Menú hamburguesa visible, botones de nav desktop ocultos
✅ Contenido legible sin zoom Restaurar a 1280×800 después.

Página: HOME (`/`)

H1 — Hero section

✅ Slider/hero visible con imagen de fondo o imagen principal
✅ Texto principal sobre crédito grupal para mujeres microempresarias
✅ Botón CTA en hero lleva a /creditos/ o /contacto/

H2 — Sección de beneficios / stats

✅ Números de impacto visibles (años de experiencia, clientes, etc.)
✅ Sin overflow ni recorte de texto

H3 — Sección productos

✅ Card o bloque de Crédito Grupal con link /creditos/
✅ Card o bloque de Crédito de Nómina con link /credito-nomina/

H4 — Screenshot scroll completo

Tomar screenshot en: y=0, y=600, y=1200

Página: CRÉDITO DE NÓMINA (`/credito-nomina/`)

Esta es la página con los cambios más recientes. Cada check es CRÍTICO.

N1 — Sin banner azul PageTitle

// Debe NO existir un div con clase bg-page-title ni texto "Crédito de Nómina" en un h1 azul de fondo
const h1 = document.querySelector('h1')
// FAIL si h1 existe y su contenedor tiene background azul (#00529B o similar)

❌ NO debe existir <PageTitle title="Crédito de Nómina" /> renderizado

N2 — Barra blanca: texto izquierda, logo derecha

const bar = document.querySelector('.bg-white.border-b')
// Verificar que:
// - Primer hijo visible es un <p> o texto con "CRÉDITO DE NÓMINA"
// - Último hijo es un <img> (logo-nomina.jpeg)

✅ Texto "CRÉDITO DE NÓMINA" visible a la izquierda, prominente (font-bold, tamaño mayor a 16px)
✅ Logo logo-nomina.jpeg visible a la derecha
❌ NO debe tener el separador vertical | entre logo y texto

N3 — Dos botones centrados (no tabs con underline)

const btns = Array.from(document.querySelectorAll('button')).filter(b =>
  b.textContent.includes('EMPRESAS') || b.textContent.includes('COLABORADORES')
)
// PASS: btns.length === 2
// Verificar que están en un flex justify-center
// Verificar que tienen clase rounded-full (pill shape)
// Verificar que NO tienen border-b-2 (era el estilo de tab anterior)

✅ Exactamente 2 botones: "EMPRESAS" y "COLABORADORES"
✅ Orden: EMPRESAS primero (izquierda), COLABORADORES segundo (derecha)
✅ Estilo pill/rounded, centrados en la página
✅ EMPRESAS activo por default (fondo azul sólido #00529B, texto blanco)
✅ COLABORADORES inactivo (borde azul, fondo blanco)

N4 — Tab EMPRESAS: contenido hero

Con EMPRESAS activo (default):

✅ Badge "SOLUCIÓN EMPRESARIAL" visible
✅ Título "Programa de Bienestar Financiero para tu Empresa"
✅ Imagen de equipo empresarial cargada

N5 — Tab EMPRESAS: Cómo funciona — Paso 2

Scroll hasta sección "Cómo funciona":

const paso2 = Array.from(document.querySelectorAll('p')).find(p =>
  p.textContent.includes('solicita el apoyo')
)
// PASS: paso2.textContent === "El trabajador solicita el apoyo y recibe su préstamo"
// FAIL: si dice solo "El trabajador solicita el apoyo" (sin "y recibe su préstamo")

N6 — Tab EMPRESAS: Cumplimiento y respaldo

const exp = Array.from(document.querySelectorAll('h4')).find(h =>
  h.textContent.includes('Años de Experiencia')
)
// PASS: exp.textContent === "+20 Años de Experiencia"
// FAIL: si dice "20+ Años de Experiencia"

const sub = Array.from(document.querySelectorAll('p')).find(p =>
  p.textContent.includes('otorgando créditos')
)
// PASS: sub.textContent === "Más de 20 años otorgando créditos a nivel nacional"
// FAIL: si dice "20 años de experiencia otorgando créditos a nivel nacional"

N7 — Tab COLABORADORES: badge hero

Hacer click en botón "COLABORADORES":

// Después del click, verificar:
const badge = document.querySelector('span')
// Buscar span que contenga el texto del badge

✅ Badge muestra "PROGRAMA DE APOYO FINANCIERO PARA TUS COLABORADORES"
❌ NO debe decir "PROGRAMA DE APOYO FINANCIERO AL TRABAJADOR"
✅ Botón COLABORADORES ahora tiene fondo sólido azul (activo)
✅ Botón EMPRESAS ahora tiene borde (inactivo)

N8 — Tab COLABORADORES: botón CTA al final

Scroll a sección CTA final (fondo azul degradado):

const ctaBtn = Array.from(document.querySelectorAll('button')).find(b =>
  b.textContent.trim().toUpperCase().includes('SOLICITAR INFORMACIÓN') ||
  b.textContent.trim().toUpperCase().includes('SOLICITAR INFORMACION')
)
// PASS: ctaBtn existe
// FAIL: si existe botón con texto "AGENDA UNA PRESENTACIÓN"

✅ Botón "SOLICITAR INFORMACIÓN" visible
❌ NO debe decir "AGENDA UNA PRESENTACIÓN"

N9 — Formulario al abrir CTA Colaboradores

Hacer click en "SOLICITAR INFORMACIÓN":

// Esperar que aparezca el formulario
// Verificar:
const labels = Array.from(document.querySelectorAll('label'))
  .map(l => l.textContent.trim())

// PASS: labels incluye "Empresa en la que trabajan *"
// PASS: labels incluye "Puesto *"
// FAIL: si dice "Empresa *" o "Puesto que desempeña *"

const formTitle = document.querySelector('h3')
// PASS: formTitle.textContent incluye "Solicitar información"
// FAIL: si dice "Agenda una presentación"

✅ Título del form: "Solicitar información"
✅ Campo "Empresa en la que trabajan"
✅ Campo "Puesto"
✅ Campos estándar: Nombre completo, Teléfono, Correo electrónico
✅ Checkbox Aviso de Privacidad con link /aviso-de-privacidad/
✅ Botón "ENVIAR SOLICITUD"
✅ Botón "Cancelar"

N10 — Tab EMPRESAS: botón CTA mantiene "Agenda una presentación"

Volver a EMPRESAS, scroll a su CTA final:

✅ Botón dice "AGENDA UNA PRESENTACIÓN" (no cambió con el refactor)
❌ NO debe decir "SOLICITAR INFORMACIÓN" en el tab Empresas

N11 — Screenshot completo

Screenshots en: top, tab-buttons-visible, colaboradores-hero, empresas-paso2, cumplimiento

Página: CRÉDITO GRUPAL (`/creditos/`)

CG1 — Carga y contenido

✅ Página carga sin error 404/500
✅ Título visible (h1 o PageTitle con "Crédito Grupal" o similar)
✅ Información del producto de microcrédito grupal para mujeres
✅ No hay imágenes rotas

CG2 — Sección de requisitos o proceso

✅ Pasos o requisitos del crédito visibles
✅ Sin errores de consola

Página: BOLSA DE TRABAJO (`/bolsa-de-trabajo/`)

BT1 — Carga

✅ Página carga sin error
✅ Título de la sección visible

BT2 — Vacantes o estado vacío

✅ Si hay vacantes: cards de trabajos con título, descripción, área
✅ Si no hay vacantes: estado vacío elegante (no una página en blanco o error)

Página: NOSOTROS (`/quienes-somos/`)

NS1 — Contenido

✅ Página carga sin error
✅ Historia o misión de Grupo Prosperemos visible
✅ Sección de valores o equipo
✅ Sin imágenes rotas

Página: REGULACIÓN (`/regulacion/`)

RE1 — Contenido legal obligatorio (SOFOM ENR)

✅ Logos de CONDUSEF y Buró de Entidades Financieras visibles y cargados
✅ Link o sección de UNE (Unidad Especializada de Atención a Usuarios)
✅ Información de tasas y comisiones o link a PDF

Página: CONTACTO (`/contacto/`)

CO1 — Formulario

✅ Formulario de contacto visible con campos: Nombre, Email, Teléfono, Mensaje
✅ Botón de envío presente
✅ Formulario tiene id formulario (para el anchor #formulario que usaban otros links)

CO2 — Información de contacto

✅ Teléfono 800 909 3333 visible
✅ Dirección o ciudades de presencia visibles

Formato de reporte

Al finalizar cada página, imprime una tabla como esta:

═══════════════════════════════════════════════════════
  CRÉDITO DE NÓMINA — /credito-nomina/
═══════════════════════════════════════════════════════
  G1  Sin errores JS                    ✅ PASS
  G2  Header correcto                   ✅ PASS  (7 nav links, sin CTA button)
  G3  Footer presente                   ✅ PASS
  G4  Botón WhatsApp                    ✅ PASS
  G5  Imágenes sin broken               ✅ PASS  (12 imágenes OK)
  G6  Responsividad 390px               ✅ PASS
  N1  Sin banner azul PageTitle         ✅ PASS
  N2  Barra blanca — layout correcto    ✅ PASS
  N3  2 botones pill centrados          ✅ PASS  (EMPRESAS | COLABORADORES)
  N4  Hero EMPRESAS                     ✅ PASS
  N5  Paso 2 — texto correcto           ✅ PASS
  N6  Cumplimiento — +20 años           ✅ PASS
  N7  Badge COLABORADORES               ✅ PASS
  N8  CTA "Solicitar información"       ✅ PASS
  N9  Campos del formulario             ✅ PASS
  N10 EMPRESAS mantiene "Agenda"        ✅ PASS
───────────────────────────────────────────────────────
  RESULTADO: 16/16 PASS  ·  0 FAIL  ·  0 WARN
═══════════════════════════════════════════════════════

Si hay FAILs, después de la tabla imprimir un bloque:

⛔ BLOQUEOS ENCONTRADOS:
  [N5] Paso 2 texto incorrecto
       Esperado: "El trabajador solicita el apoyo y recibe su préstamo"
       Encontrado: "El trabajador solicita el apoyo"
       Archivo: components/credito-nomina/CreditoNominaTabs.tsx línea ~650

Resumen final (modo `all`)

Al terminar todas las páginas:

╔═══════════════════════════════════════════════════════╗
║         GRUPO PROSPEREMOS — REPORTE QA COMPLETO       ║
╠══════════════╦══════════╦══════════╦═══════════════════╣
║ Página       ║ Checks   ║ Pass     ║ Fail / Warn       ║
╠══════════════╬══════════╬══════════╬═══════════════════╣
║ Home         ║    10    ║   10     ║   0 / 0           ║
║ Crédito Nom. ║    16    ║   16     ║   0 / 0           ║
║ Crédito Gru. ║     8    ║    8     ║   0 / 0           ║
║ Bolsa Trab.  ║     6    ║    6     ║   0 / 0           ║
║ Nosotros     ║     6    ║    6     ║   0 / 0           ║
║ Regulación   ║     5    ║    5     ║   0 / 0           ║
║ Contacto     ║     6    ║    6     ║   0 / 0           ║
╠══════════════╬══════════╬══════════╬═══════════════════╣
║ TOTAL        ║    57    ║   57     ║   0 / 0           ║
╚══════════════╩══════════╩══════════╩═══════════════════╝
  Estado: ✅ SITIO LISTO PARA PRODUCCIÓN

Si hay cualquier FAIL: ⛔ SITIO BLOQUEADO — resolver antes de hacer deploy

Notas de implementación

Usa mcp__playwright__browser_evaluate para todos los checks de DOM (más rápido y confiable que snapshots para verificaciones de texto exacto).
Usa mcp__playwright__browser_take_screenshot para evidencia visual de cada sección clave.
Usa mcp__playwright__browser_snapshot solo cuando necesites encontrar un elemento para hacer click.
Si el dev server no está corriendo en localhost:3000, avisar al usuario antes de continuar: npm run dev en el directorio del proyecto.
En modo --prod, algunos checks de interactividad (formularios) no deben enviarse de verdad — detener antes de submit.
Los checks de texto son exactos y case-sensitive donde se indica. No aceptar aproximaciones.

validate-site

validate-site

Entorno

Protocolo de ejecución

Checks globales (ejecutar en TODAS las páginas)

G1 — Sin errores de consola JS

G2 — Header correcto

G3 — Footer presente

G4 — Botón WhatsApp

G5 — Imágenes sin broken

G6 — Responsividad básica

Página: HOME (/)

H1 — Hero section

H2 — Sección de beneficios / stats

H3 — Sección productos

H4 — Screenshot scroll completo

Página: CRÉDITO DE NÓMINA (/credito-nomina/)

N1 — Sin banner azul PageTitle

N2 — Barra blanca: texto izquierda, logo derecha

N3 — Dos botones centrados (no tabs con underline)

N4 — Tab EMPRESAS: contenido hero

N5 — Tab EMPRESAS: Cómo funciona — Paso 2

N6 — Tab EMPRESAS: Cumplimiento y respaldo

N7 — Tab COLABORADORES: badge hero

N8 — Tab COLABORADORES: botón CTA al final

N9 — Formulario al abrir CTA Colaboradores

N10 — Tab EMPRESAS: botón CTA mantiene "Agenda una presentación"

N11 — Screenshot completo

Página: CRÉDITO GRUPAL (/creditos/)

CG1 — Carga y contenido

CG2 — Sección de requisitos o proceso

Página: BOLSA DE TRABAJO (/bolsa-de-trabajo/)

BT1 — Carga

BT2 — Vacantes o estado vacío

Página: NOSOTROS (/quienes-somos/)

NS1 — Contenido

Página: REGULACIÓN (/regulacion/)

RE1 — Contenido legal obligatorio (SOFOM ENR)

Página: CONTACTO (/contacto/)

CO1 — Formulario

CO2 — Información de contacto

Formato de reporte

Resumen final (modo all)

Notas de implementación

Página: HOME (`/`)

Página: CRÉDITO DE NÓMINA (`/credito-nomina/`)

Página: CRÉDITO GRUPAL (`/creditos/`)

Página: BOLSA DE TRABAJO (`/bolsa-de-trabajo/`)

Página: NOSOTROS (`/quienes-somos/`)

Página: REGULACIÓN (`/regulacion/`)

Página: CONTACTO (`/contacto/`)

Resumen final (modo `all`)