Funcionamiento del Test Double Scroll
Este test detecta cuando una página genera doble scroll (scrollbar horizontal y vertical simultáneamente) al aplicar un zoom del 400%.
Objetivo del Test
Verificar que el contenido de una página web NO requiera desplazamiento horizontal cuando:
- El viewport tiene un ancho efectivo de 320px
- Se aplica un zoom del 400% en el navegador
Funcionamiento Paso a Paso
El test ejecuta una secuencia de 3 pasos automatizados:
Paso 1: Establecer Viewport Base
- Se configura el navegador con un tamaño de ventana estándar de 1280x720 píxeles
- Este es el punto de partida antes de aplicar el zoom
Paso 2: Aplicar Zoom del 400%
- Se aplica un zoom del 400% en el navegador reduciendo 4 veces el tamaño del viewport
- Cálculo importante: 1280px ÷ 4 = 320px de ancho efectivo
Paso 3: Verificación Programática
- Este es el paso crítico de validación
- Verifica programáticamente si existe un scrollbar horizontal en el
<body>de la página - Detecta si
scrollWidth > clientWidth(el contenido scrolleable (ancho) es mayor que el viewport (ancho))
Criterios de Éxito
Test PASA cuando:
- NO aparece scrollbar horizontal a nivel de página al aplicar zoom del 400%
- El contenido se reorganiza automáticamente (reflow) para ajustarse al ancho de 320px
- Todos los elementos son accesibles sin desplazamiento horizontal a nivel de página
Test FALLA cuando:
- Aparece un scrollbar horizontal a nivel de página
- El usuario necesita desplazarse horizontalmente para ver el contenido completo
- Elementos están cortados o fuera del viewport creando el scroll horizontal a nivel de página
Excepciones
Este criterio NO aplica a:
- Imágenes que requieren diseño bidimensional (mapas, diagramas)
- Tablas de datos complejas
- Videos o juegos embebidos
¿Cómo Ejecutar el Test Manualmente?
Para reproducir el test manualmente en el navegador:
- Abrir la página a probar en 2 ventanas de Chrome diferentes
- En la primera ventana ajustar el tamaño del viewport hasta lograr 1280px de ancho. Puede apoyarse en https://whatismyviewport.com/
- En la segunda ventana ajustar el viewport hasta lograr 320px de ancho. Puede apoyarse en las DevTools quitando el modo responsive y ajustando el viewport
- Observar si aparece scrollbar horizontal a nivel de página
Limitaciones conocidas
En la screenshot que devuelve la extensión no se aprecian las barras de scroll.