Cómo crear una prueba reproducible de captura de página completa
Probar una herramienta de captura de pantalla en un servicio de noticias aleatorio da un resultado ambiguo. La página puede cambiar entre ejecuciones, los anuncios pueden cambiar de tamaño, las imágenes pueden rotar y los módulos personalizados pueden diferir según la cuenta. Una prueba reproducible necesita una página controlada con características conocidas y un punto final esperado explícito.
Screenshot PDF ofrece una página pública de prueba para capturas de página completa. No contiene datos de usuario y está marcada como noindex porque sirve para diagnóstico, no como página de destino en buscadores. Este artículo explica cómo usarla y cómo crear un registro de aceptación que otra persona pueda repetir.
Que contiene el aparato
La página es autónoma y no depende de imágenes o API de terceros. Incluye:
- un encabezado adhesivo que debería aparecer una vez en la captura finalizada;
- un control de esquina fijo que no debe repetirse en cortes posteriores;
- marcadores de sección numerados en una secuencia conocida;
- alternancia de superficies claras y oscuras para la detección de costuras visibles;
- bloqueos visuales retardados que se activan después de ingresar a la ventana gráfica;
- una tabla densa para la alineación y la inspección de los límites de las páginas;
- un patrón de rayas generado por Canvas;
- un último punto final verde que debe estar presente.
Definir el entorno de prueba.
Antes de la captura, registre:
| Campo | Formato de ejemplo |
| --- | --- |
| Navegador | Versión principal de Chrome |
| Ampliación | Captura de pantalla PDF 0.0.13 |
| Ventana gráfica | ancho × alto píxeles CSS |
| Ampliar | porcentaje |
| Relación de píxeles del dispositivo | valor informado por el navegador |
| Modo de captura | página completa o sin división |
| Tema | claro u oscuro |
| Hora de inicio | marca de tiempo local y zona horaria |
No compares dos capturas realizadas con diferentes anchos de ventana gráfica como si fueran la misma prueba. El diseño responsivo puede cambiar la altura de la sección, el ajuste de línea, el ancho de la tabla y el número de sectores.
Ejecute la captura de línea base
Abra el dispositivo en una pestaña nueva y recárguelo. No se desplace manualmente hasta la línea base. Inicie la captura de página completa y espere al editor. Conserve el primer resultado antes de intentar soluciones alternativas.
Luego verifique:
- Los marcadores de sección aparecen en orden ascendente y no falta ninguno.
- El encabezado fijo aparece al principio y no en cada intervalo de la ventana gráfica.
- El control de esquina fijo no oscurece las secciones posteriores.
- Los bloques retrasados contienen su patrón de rayas final en lugar de un marcador de posición vacío.
- Las filas de la tabla permanecen alineadas y no se duplica ninguna fila.
- Los fondos alternos se unen sin que falte o se repita una franja horizontal.
- El último punto final verde es visible.
Si falta el punto final, registre el último marcador visible y mida la altura CSS de la página. El flujo de trabajo actual de página completa está limitado a 15.000 píxeles CSS; un dispositivo o página de usuario intencionalmente más largo debe capturarse en secciones.
Pruebe el comportamiento de carga diferida por separado
Vuelva a cargar el dispositivo, desplácese lentamente de arriba a abajo, espere cada bloque retrasado, regrese a la parte superior y capture nuevamente. Compare este resultado precargado con la línea de base.
Si la línea base tiene bloques vacíos pero el resultado precargado está completo, la canalización de captura está funcionando pero el retraso en la carga de la página excede la espera disponible durante el desplazamiento automático. La solución correcta es precargar o seccionar la página, no etiquetar la imagen que falta como un error de unión.
Identifica costuras sin adivinar
Utilice los fondos de la sección alterna y el patrón de rayas del lienzo. Una franja faltante crea un salto abrupto en la secuencia de franjas. Una superposición repite una raya o marcador. Un cambio de altura dinámico desalinea el contenido a lo largo de un límite.
Inspeccione al tamaño de píxel real, no solo ajustado a la ventana. Registre la coordenada vertical aproximada y los marcadores inmediatamente encima y debajo del problema. Esto le da al desarrollador una ubicación reproducible en lugar de "en algún lugar cerca del medio".
Verificar la restauración de la página de origen.
Después de que la captura tenga éxito o falle, regrese a la pestaña del dispositivo. Confirmar:
- la página está en la parte superior;
- el encabezado adhesivo y el control fijo vuelven a ser visibles;
- no queda ningún elemento de progreso de captura;
- el desplazamiento todavía funciona;
- el contenido retrasado sigue siendo utilizable.
La restauración es parte de la prueba porque la extensión cambia temporalmente la visibilidad de los elementos flotantes. Una salida correcta no excusa una pestaña de origen dejada en un estado modificado.
Crear una reproducción que minimice los fallos
Si una sección falla, reproduzca primero con el dispositivo y luego con una página local reducida que contenga solo el comportamiento relevante. Elimine datos privados, autenticación, publicidad, análisis y marcos no relacionados. Mantenga el CSS o JavaScript más pequeño necesario para desencadenar el problema.
Proporcione versiones del navegador y de la extensión, ventana gráfica, zoom, modo de captura, rango de marcador, resultado esperado, resultado real y si la precarga cambia el resultado. Adjunte evidencia recortada en lugar de una página privada completa.
Registro de aceptación
Utilice una fila por ejecución:
| Ejecutar | Marcadores completos | UI flotante una vez | Bloques perezosos listos | Costuras limpias | Punto final presente | Fuente restaurada | | --- | --- | --- | --- | --- | --- | --- | | Línea de base | pasa/falla | pasa/falla | pasa/falla | pasa/falla | pasa/falla | pasa/falla | | Precargado | pasa/falla | pasa/falla | pasa/falla | pasa/falla | pasa/falla | pasa/falla |
Agregue una nota breve por cada falla y conserve el resultado original. Un dispositivo reproducible no puede cubrir todos los sitios web, pero puede separar las regresiones de toda la extensión del comportamiento dinámico de un sitio.
La prueba de capturas de pantalla de alta calidad no consiste en "probar varias páginas y ver si se ven bien". Define entradas, expone casos extremos conocidos, registra el punto final, verifica la restauración y produce un resultado que otra persona puede repetir sin acceso a información privada.