QA visual

La QA visual es el paso que separa una migración "hecha" de una migración "correcta". BricksShift facilita la comparación pero no sustituye a la revisión humana.

Informe de cobertura

Tras cada conversión, el plugin genera un informe por página con:

  • Número de widgets detectados / convertidos / marcados como no soportados.
  • Lista de widgets sin soporte con referencia al lugar exacto del árbol.
  • Advertencias (secciones vacías, anidaciones inusuales, widgets con datos incompletos).

El informe se consulta desde Herramientas → Elementor2Bricks → Informe.

Revisión manual en Bricks

Abre la página en el editor de Bricks. Revisa en este orden:

  1. Layout general: jerarquía section/div correcta.
  2. Elementos marcados como div.e2b-unsupported: decide si reconstruyes en Bricks o reemplazas con un plugin equivalente.
  3. Estilos: aplica clases Bricks o Tailwind (según tu stack) para dar forma visual. Los estilos de Elementor no se traspasan. Ver Convertir CSS.
  4. Imágenes: confirma que los adjuntos se resuelven correctamente (el plugin conserva IDs de media).

Comparación antes/después

Abre dos pestañas del navegador:

  • Una con la URL original (Elementor aún cargando).
  • Otra con la URL tras cambiar el builder a Bricks (o en un sitio de staging clonado).

Recorre la página en mobile, tablet y desktop. Anota diferencias reales (no cosméticas: lo cosmético se rehace).

Checklist mínimo

  • [ ] Todas las secciones aparecen en el mismo orden.
  • [ ] Imágenes se cargan correctamente.
  • [ ] Enlaces apuntan al mismo destino.
  • [ ] Formularios reconstruidos funcionan (envío + recepción).
  • [ ] Elementos responsive críticos (menú móvil, CTAs) visibles en cada breakpoint.
  • [ ] SEO (title, meta description, H1) se conserva.

No asumas que algo funciona

Los elementos dinámicos (forms, popups, integraciones con ACF o JetEngine) siempre hay que probarlos end-to-end. El plugin no los migra. Ver Limitaciones.

QA con Playwright u otra herramienta

Si gestionas muchos sitios, considera automatizar capturas antes/después con Playwright o Percy. No es parte de BricksShift pero encaja bien con el flujo:

# Antes de migrar
npx playwright test --grep "visual-baseline"

# Tras migrar
npx playwright test --grep "visual-after"

Si el resultado no convence

  • Revisa los widgets marcados y decide si reescribir manualmente.
  • Haz rollback de la página y vuelve a lanzar con otros ajustes.
  • Reporta el caso al soporte con ID de post y captura del informe de cobertura.