Última actualización 08-14-2026
Categoría:
Reviews:
Join thousands of AI enthusiasts in the World of AI!
VizDiff
VizDiff sube compilaciones de Storybook desde GitLab CI, genera una captura de pantalla para cada historia y bloquea las fusiones cuando cambian los píxeles del componente.
Las herramientas genéricas de captura de pantalla comparan páginas completas. VizDiff está diseñado en torno a las historias de Storybook, por lo que las diferencias a nivel de componente aparecen en las solicitudes de fusión de GitLab con vistas de Antiguo, Nuevo, Diferencia y lado a lado. La primera ejecución en una rama marca cada historia como Nueva; los commits posteriores en la misma solicitud de fusión muestran solo las historias que realmente cambiaron.
Los equipos de frontend que ya usan Storybook en GitLab obtienen el mayor valor de este flujo de trabajo automatizado. Diseñadores e ingenieros comparten líneas base, revisan las capturas pendientes con atajos de teclado y cambian una compilación a aprobada o denegada sin salir de la interfaz de revisión. Las configuraciones de GitHub son compatibles mediante una guía de configuración separada para equipos en esa plataforma.
Carga compilaciones de Storybook mediante npx @vizdiff/cli en pipelines de GitLab CI
Publica estados de commit vizdiff/visual-tests en commits de solicitudes de merge
Las vistas de comparación incluyen Old, New, Diff y diseños 2-Up por historia
La primera ejecución en la rama establece las líneas base; los commits posteriores muestran solo historias modificadas
Inicio de sesión con Microsoft Entra SSO para implementaciones gestionadas por la organización
Guías de configuración para GitHub y GitLab con ejemplos de YAML de CI copiar-pegar
Diseñado específicamente para historias de Storybook en lugar de capturas de página completa que omiten regresiones de componentes.
Los estados de commit de GitLab bloquean fusiones hasta que los cambios visuales sean aprobados explícitamente.
La carga por CLI se integra en trabajos CI existentes de build-storybook con un paso adicional.
Diff, 2-Up y navegación por teclado aceleran la revisión de docenas de capturas de pantalla de historias.
Las implementaciones autohospedadas permiten a los equipos mantener los datos de capturas dentro de su propia infraestructura.
Requiere Storybook en tu repositorio y acceso de Mantenedor para agregar variables de GitLab CI.
No hay página de precios pública, por lo que el costo depende de la implementación de VizDiff de tu organización.
Una autoridad de dominio muy baja sugiere un producto más nuevo o de nicho con cobertura limitada de terceros.
¿Qué prueba VizDiff?
VizDiff captura capturas de pantalla de las historias de componentes de Storybook en cada compilación de CI. Las compara con líneas base aprobadas y resalta diferencias a nivel de píxel para que los equipos puedan detectar regresiones visuales antes de fusionar.
¿Con qué hosts de Git es compatible VizDiff?
VizDiff se integra con solicitudes de fusión de GitLab de forma nativa, incluyendo estados de commits y enlaces de revisión. Una guía separada para GitHub cubre los flujos de trabajo de pull request para equipos en GitHub.
¿Cómo conecto VizDiff a GitLab CI?
Agrega una variable CI/CD VIZDIFF_PROJECT_TOKEN en GitLab, construye Storybook en storybook-static y luego ejecuta npx @vizdiff/cli upload en tu pipeline. VizDiff lee automáticamente las variables CI predefinidas de GitLab.
¿Qué sucede en la primera ejecución de VizDiff?
En la primera ejecución de VizDiff para una rama, cada captura de pantalla de Storybook aparece como Nueva porque aún no existe una línea base. Envía otro commit en la misma solicitud de fusión y VizDiff marcará solo las historias donde la interfaz realmente cambió.
¿Cómo apruebo cambios visuales en VizDiff?
Abre la página de revisión de VizDiff desde el enlace de estado del commit en GitLab, inspecciona cada captura de pantalla y luego aprueba o rechaza la compilación. VizDiff actualiza el estado del commit a éxito o fallido inmediatamente después de tu decisión.
¿VizDiff requiere autorización personal de GitLab?
No. VizDiff usa un token de servicio de despliegue configurado por tu administrador para leer metadatos del proyecto y publicar estados de commits. Los desarrolladores se autentican en VizDiff a través del proveedor SSO de su organización.