Elysia Tools
Navegación
Workflow Playbook
Compare versiones de una página con ventanas equivalentes, investigue cambios de diseño y color y entregue capturas, incidencias revisadas y evidencias para decidir su publicación.
Temas
Este procedimiento ayuda a desarrollo y pruebas a revisar un rediseño concreto. Entrega una matriz, capturas, incidencias explicadas y una decisión humana; no ejecuta automáticamente una suite de regresión. Utilice páginas públicas autorizadas para las capturas de servidor. Los estados privados necesitan un método externo aprobado, sin credenciales en la URL.
Conserve la versión anterior o sus evidencias originales. Registre versión, datos, idioma, fuentes, ventana, modo de captura, preferencia de color y espera. Mantenga herramienta y entorno entre tomas. Sin referencia no es posible demostrar ausencia de regresión mediante una sola captura nueva.
Puede empezar con anchos de 375, 768, 1024 y 1440 píxeles y una altura acordada: son ejemplos, no puntos universales. La herramienta de puntos de ruptura captura una URL en dos a seis anchos y compara imágenes escaladas. Use el modo adyacente. No compara versiones históricas ni reconoce componentes equivalentes.
Revise cortes, superposiciones, contenido ausente y desbordamiento horizontal. Cambiar columnas o saltos de línea puede ser intencionado. La captura de ventana no cubre todo el documento; revise lo restante aparte. Conserve ZIP e informe, sin convertir el porcentaje de cambio en un veredicto.
Capture cada versión con Website Screenshot y confirme sus dimensiones con los metadatos. Para tamaños arbitrarios evite el modo móvil, que actualmente usa una ventana fija de 375 por 667. Prefiera PNG sin pérdida, fondo opaco y canales compatibles.
Image Difference estira entradas desiguales a un lienzo común; recapture en vez de justificar equivalencia mediante ese escalado. Tampoco realiza análisis semántico. Ante canales incompatibles, detenga la comparación y normalice externamente o repita la captura. Guarde originales; los recortes deben tener coordenadas y contexto. Un elemento desplazado puede salir de la misma región. Recortar no equivale a una eliminación segura de datos privados.
Compruebe animaciones, fechas, fuentes, imágenes remotas y datos. Aumentar la espera no garantiza estabilidad. Ocultar elementos aplica display none y puede reorganizar el diseño: documente la exclusión y no oculte contenido relevante para aceptar la página.
La paleta extraída es un muestreo, no una identificación fiable del par texto/fondo. Confirme valores renderizados antes de comprobar contraste; degradados, transparencia y suavizado pueden falsear muestras. Un par aprobado no certifica accesibilidad. Distinga cambios deseados, defectos, ruido y casos pendientes.
Registre ubicación, ancho, archivos, coordenadas opcionales, resultado esperado y real, responsable y repetición de cada incidencia. Revise por separado traducciones largas, áreas fuera de pantalla y estados interactivos. Las capturas no prueban menús, formularios, teclado ni tacto.
Entregue copias locales de originales, informes, diferencias, matriz y decisión de aceptar, corregir, aplazar o bloquear. Calcule SHA-256 del paquete final compartible; identifica archivos, no corrección. Continúe en los flujos relacionados para inventario de estilos, accesibilidad completa o preparación tipográfica.
Guía de flujo de trabajo
Registre la matriz y mantenga los mismos ajustes; compruebe las dimensiones reales de cada archivo.
Use el modo de puntos adyacentes, revise capturas y desbordamientos y descargue informe y ZIP.
Verifique dimensiones y canales antes de producir diferencias; conserve contexto completo al recortar regiones.
Use la paleta como pista y confirme colores de texto y fondo para el contraste cuando corresponda. Separe cambios previstos, fallos y casos pendientes.
El informe de puntos de ruptura examina una versión a distintos anchos. Las versiones anterior y candidata requieren capturas separadas con las mismas condiciones.
Conserve originales completos y registre coordenadas para recortes emparejados. No elimine del encuadre un desbordamiento para obtener aprobación.
Compruebe datos, fuentes y contenido dinámico antes de atribuir el cambio al diseño. Investigue paletas y contraste solo si el caso incluye cambios de color.
Guarde capturas de la repetición, decisiones y límites; calcule SHA-256 de los archivos locales finales.