Documentación de QA Proof

Todo lo que necesitas para instalar QA Proof en tu sitio, ejecutar tu primera prueba y leer los resultados. La vía más rápida es el plugin de WordPress — la mayoría de los usuarios nunca necesitan tocar la API directamente.

¿Qué es QA Proof?

QA Proof es un servicio alojado que utiliza IA para revisar tu sitio web en vivo en busca de problemas visuales, de diseño y de accesibilidad. Puedes ejecutar pruebas bajo demanda o programar un monitor que revisa las páginas de forma recurrente y te envía un correo cuando algo cambia.

El plugin de WordPress te permite gestionar todo desde tu panel de WP: ejecutar pruebas, ver capturas de pantalla en paralelo, programar monitores y descargar informes en PDF.

Inicio rápido

Tres pasos para tu primera prueba:

1. Regístrate y elige un plan

Crea una cuenta en qaproof.io/signup. El plan Gratuito te ofrece 10 generaciones de IA como prueba vitalicia única y 1 monitor — suficiente para evaluar el producto. Una vez que hayas usado las 10, debes mejorar tu plan.

2. Obtén tu clave de API

Abre qaproof.io/app/api-keys y copia la clave que se muestra allí. Tiene un aspecto similar a qap_live_sk_…. Trátala como una contraseña — cualquiera que tenga esta clave puede ejecutar pruebas usando la cuota de tu cuenta.

3. Instala el plugin de WordPress

Descarga el plugin, súbelo a través de Plugins → Añadir nuevo → Subir plugin en tu panel de WP y luego actívalo. Abre QAProof → Ajustes, pega tu clave de API en el campo Configuración de la API y haz clic en Guardar cambios. La tarjeta debajo del campo mostrará el correo de tu cuenta, el plan y el uso de generaciones de IA — esa es la señal de que la conexión funciona.

Desde aquí puedes ejecutar una prueba puntual (más abajo) o configurar un monitor recurrente (más abajo).

Plugin: Instalar y conectar

1. Sube el .zip de QAProof mediante Plugins → Añadir nuevo → Subir plugin y luego haz clic en Activar. Aparecerá un nuevo menú QAProof en la barra lateral de WP.
2. Abre QAProof → Ajustes, pega tu clave de API y haz clic en Guardar cambios.
3. Haz clic en Probar conexión — deberías ver "¡Conectado! Estado de la API: ok".

Plugin: Ejecutar una prueba

Abre QAProof → Pruebas, y luego:

1. Elige un tipo de prueba — Fidelidad de Diseño, Responsive, Regresión Visual, Accesibilidad o Auditoría de Diseño. Consulta Tipos de Prueba para saber qué comprueba cada una.
2. Introduce la URL de la página que quieres comprobar.
3. Para la Fidelidad de Diseño, pega también una URL de Figma o sube una imagen.
4. Haz clic en Ejecutar prueba. Tiempo total de ejecución: 30–90 segundos.

Cuando termine, verás la puntuación, un resumen, todos los problemas detectados con etiquetas de severidad y una vista de capturas de pantalla en paralelo. Cada resultado se guarda automáticamente en el Historial de Pruebas.

Plugin: Configurar un monitor

Un monitor ejecuta una prueba de Regresión Visual contra una baseline guardada según una programación (diaria, semanal o mensual) y te envía un correo si la página diverge.

1. Abre QAProof → Monitores → haz clic en Añadir monitor.
2. Introduce la URL de la página, la programación y el correo de notificación.
3. Haz clic en Crear — el plugin captura la primera captura de pantalla como baseline.
4. A partir de ahora, cada ejecución programada compara la página en vivo con esa baseline. Si la puntuación cae por debajo de tu umbral, recibes un correo con un botón Descargar informe completo.

Plugin: Historial de pruebas e informes en PDF

Cada prueba que ejecutas — manual o programada — se guarda en QAProof → Pruebas → Historial de Pruebas. Desde ahí puedes:

• Reabrir un resultado e inspeccionar las capturas de pantalla, las diferencias y las recomendaciones.
• Descargar un informe en PDF con el desglose completo — el mismo formato del archivo enlazado en los correos de notificación.

Fidelidad de Diseño

Compara tu página en vivo con un diseño de Figma (o una imagen subida) e informa de dónde la implementación se ha desviado del diseño. Devuelve una puntuación de 0 a 100 y desglosa la diferencia en Diseño, Colores, Tipografía, Espaciado y Componentes.

Úsala cuando: un desarrollador acaba de publicar una nueva página y quieres confirmar que coincide con el diseño aprobado antes de anunciar el lanzamiento.

Responsive

Captura la misma página en tres viewports — escritorio (1440×900), tablet (768×1024) y móvil (375×812) — y señala los problemas de diseño específicos de cada uno, como el desplazamiento horizontal en móvil, texto superpuesto o CTA ocultas.

Úsala cuando: has hecho cambios de CSS o de diseño y quieres una lectura rápida de si móvil/tablet siguen funcionando.

Regresión Visual

Compara la página actual con una captura de pantalla previamente aprobada (la baseline) e informa de cualquier diferencia de píxel/texto/estilo. Puntuación 100 = nada cambió; puntuaciones más bajas = diferencias reales detectadas.

Se usa tanto como prueba puntual como motor detrás de los monitores.

Úsala cuando: quieres detectar cambios no intencionados — un despliegue que rompió una sección por accidente, una actualización del CMS que alteró la página de inicio o imágenes faltantes.

Accesibilidad

Audita tu página según las WCAG 2.1 (nivel configurable: A, AA o AAA). Señala barreras del mundo real: contraste de color insuficiente, texto alternativo faltante, jerarquía de encabezados rota, objetivos táctiles demasiado pequeños, etiquetas de formulario faltantes, indicadores de foco que desaparecen al pasar el cursor, etc.

Úsala cuando: necesitas verificar la accesibilidad antes de publicar o informar del cumplimiento a una parte interesada.

Auditoría de Diseño

Inspecciona tu design system a nivel de página: cuántos colores, fuentes, estilos de botón y valores de espaciado distintos se usan realmente. Identifica colores casi duplicados, valores fijos en el código que deberían ser variables CSS y componentes inconsistentes. Genera un Design Debt Score.

Úsala cuando: tu base de código ha crecido de forma orgánica y quieres una lectura cuantificada de la deriva del design system.

Planes y límites

Los planes de pago (Pro / Business / Scale) tienen topes mensuales de generaciones de IA que se restablecen en cada ciclo de facturación. El plan Gratuito es una prueba vitalicia única — 10 generaciones en total, nunca se restablece. Consulta Precios para conocer todos los detalles sobre lo que incluye cada plan.

Solución de problemas: "Falló la captura de la baseline"

Si la creación de la baseline falla, algunas imágenes de tu página no se cargaron durante la captura de pantalla. Esto suele ocurrir cuando el sitio limita temporalmente nuestras solicitudes. Espera 1–2 minutos e inténtalo de nuevo.

Solución de problemas: "La captura parece inestable"

Si ves una puntuación de 100 con el mensaje "La captura parece inestable", significa que la página tiene elementos dinámicos (como carruseles de imágenes o animaciones) que se renderizaron de forma diferente entre las capturas. Simplemente vuelve a ejecutar la prueba — normalmente funciona al segundo intento.

Solución de problemas: "Has alcanzado el límite de tu prueba gratuita"

Los usuarios del plan Gratuito ven esto una vez que han usado sus 10 generaciones de la prueba vitalicia. El plan Gratuito no se restablece mensualmente — mejora tu plan en Facturación para seguir ejecutando pruebas. Los planes de pago no se bloquean — el excedente se factura al final del periodo.

Solución de problemas: el plugin de WP muestra el plan incorrecto

Si el plan que se muestra en el plugin no coincide con el que ves en qaproof.io, es probable que la clave de API del plugin pertenezca a una cuenta distinta de aquella con la que has iniciado sesión en el sitio web. Vuelve a comprobar la dirección de correo que se muestra bajo el campo Clave de API en el plugin — esa es la cuenta a la que pertenece la clave.

¿Necesitas ayuda?

• Explora el Centro de Ayuda para guías paso a paso con capturas de pantalla.
• Envía un correo a support@qaproof.io — los planes de pago reciben respuesta prioritaria.