Selenium ya suele controlar flujos valiosos de extremo a extremo y entre navegadores. Una captura en el punto adecuado conserva evidencia visual sin sustituir esas aserciones. La dificultad no está en llamar al método de captura. Hay que reproducir el mismo estado en equipos locales, nodos de una granja y CI, y después ofrecer pruebas suficientes para aceptar o rechazar la diferencia.
Esta guía utiliza como ejemplo el resumen de un pedido. Cubre esperas explícitas, capacidades del navegador, nombres de referencias, límites de comparación y artefactos. También marca la frontera entre las capturas que pertenecen a Selenium y las páginas de producción que se revisan mejor de forma programada y compartida en RenderLog.
Añade la aserción visual después de conocer el estado funcional
Lleva el checkout a un estado con nombre y comprueba los datos que le dan sentido: producto, cantidad, total y botón de compra activo. La captura debe documentar un estado que la prueba funcional ya reconoció. Si falla la navegación o no aparece el resumen, informa esa causa directamente. Comparar una página a medio cargar genera un diff llamativo, pero oculta el fallo más útil.
Elige el alcance según el riesgo. La captura de un elemento suele ser mejor para un resumen estable porque excluye navegación y widgets ajenos. Captura la ventana cuando importe la relación entre formulario, resumen y llamada a la acción. El cosido de una página completa puede introducir su propia variación, así que úsalo solo si la composición bajo el primer viewport forma parte de la decisión.
- Comprueba el estado de negocio antes de capturarlo.
- Usa capturas de elementos cuando otras zonas añadan ruido.
- Usa la ventana cuando la composición sea lo que revisas.
- Informa los fallos de navegación y disponibilidad separados de las diferencias visuales.
Sustituye pausas fijas por esperas explícitas y significativas
La documentación de Selenium señala las carreras de tiempo como una fuente principal de inestabilidad. Espera a que el resumen sea visible, desaparezca el indicador de carga y llegue el texto o estado esperado. Una pausa de dos segundos es más lenta de lo necesario en una ejecución rápida e insuficiente en una granja ocupada. Una espera explícita falla con una condición que el equipo puede interpretar.
No mezcles grandes esperas implícitas con explícitas. Su combinación puede producir tiempos impredecibles y dificultar el diagnóstico. Mantén la condición cerca del objeto de página o flujo que entiende el estado. El ayudante visual debe recibir un elemento o driver ya preparado, en vez de dormir, desplazarse y adivinar por su cuenta si la aplicación ha terminado.
- Espera visibilidad, texto, estado de un control o desaparición del indicador.
- Coloca las condiciones junto al comportamiento que describen.
- Evita combinar esperas implícitas y explícitas.
- Detén la ejecución antes de comparar si el estado no está listo.
Fija capacidades del navegador y entradas de renderizado
Registra nombre y versión del navegador, tamaño de ventana, escala del dispositivo si está disponible, imagen del sistema, idioma, zona horaria, tema y fuentes instaladas. Una granja remota puede dirigir ejecuciones consecutivas a nodos con fuentes o pantallas diferentes. Son entornos de renderizado distintos aunque compartan nombre de prueba y no deberían usar una única referencia sin calificar.
Construye la ruta de la referencia con el estado visual y el entorno, no con un número arbitrario. Incluye resumen-pedido, Chrome, viewport de escritorio e idioma. Fija los datos cuando no sean el objeto de revisión y desactiva animaciones mediante opciones del producto o navegador. Para cobertura real entre navegadores, aprueba una referencia por navegador en vez de obligar a Firefox a coincidir con los píxeles de Chrome.
- Versiona referencias por navegador y viewport relevante.
- Utiliza las mismas fuentes e imágenes de runner en ejecuciones comparables.
- Configura idioma, zona horaria y tema de forma explícita.
- No compartas una referencia entre navegadores que renderizan de manera diferente.
Separa captura, comparación y aprobación
WebDriver devuelve bytes de una imagen. Una biblioteca puede compararlos con un archivo guardado y un servicio alojado puede añadir gestión y revisión. Mantén estas capas visibles en la implementación. Un pequeño ayudante de captura no debe decidir también que un estado modificado es aceptable. Esa decisión corresponde a una persona, una solicitud de cambios o una regla de aprobación definida.
Elige el método de comparación según el defecto que necesitas detectar. La comparación por píxeles es sensible y transparente, pero muestra ruido de renderizado. Un enfoque perceptual puede tolerar diferencias pequeñas, aunque también necesita ejemplos revisados y límites documentados. Conserva siempre las imágenes originales y un diff. Una puntuación sin evidencia visible no basta para tomar una decisión de lanzamiento.
- Deja que Selenium cree el estado controlado y lo capture.
- Deja que una capa de comparación produzca evidencia medible.
- Deja que una persona o regla identificada apruebe nuevas referencias.
- Conserva imágenes originales aunque un servicio entregue una puntuación.
Diseña artefactos para una granja distribuida
Un trabajo fallido debe subir referencia, captura actual, diff, capacidades del navegador, URL, registro de la prueba y cualquier evidencia relevante de consola o red. Usa rutas sin colisiones porque varios navegadores y procesos pueden capturar el mismo estado a la vez. El resultado debe sobrevivir al cierre de la sesión remota; una imagen que queda solo en el nodo de la granja está perdida en la práctica.
Separa el fallo de infraestructura de una comparación completada. Un nodo desconectado, un elemento obsoleto o un timeout no son regresiones visuales. Una captura completa con un resumen cambiado sí puede serlo. Registra las categorías por separado para saber si hace falta mejorar fiabilidad o investigar el producto. Repetir sin clasificar puede borrar evidencia intermitente y hacer que la suite parezca más sana de lo que está.
- Sube los artefactos antes de destruir la sesión remota.
- Añade capacidades del navegador y estado a los metadatos.
- Usa rutas únicas para procesos paralelos.
- No conviertas fallos de la granja o disponibilidad en actualizaciones de referencia.
Usa RenderLog cuando el activo sea la página
Selenium sigue siendo el responsable correcto de un checkout privado que necesita autenticación, datos preparados y aserciones funcionales. Una página pública de socios, precios o documentación puede necesitar solo capturas repetidas, historial y una persona fuera del equipo de pruebas. RenderLog guarda la URL, ejecuta por calendario o API y muestra referencia, resultado actual y diff juntos.
Divide el trabajo por resultado, no por preferencia de herramienta. Conserva en Selenium los recorridos que bloquean una versión. Lleva la vigilancia de producción a una superficie compartida cuando deba continuar al margen de los cambios del repositorio. Puedes iniciar una ejecución guardada de RenderLog tras desplegar sin abandonar la cobertura previa. Cada comprobación necesita una persona responsable y una reacción definida ante el cambio.
- Mantén en Selenium los flujos autenticados y con datos de lanzamiento.
- Programa páginas públicas que cambian fuera de los lanzamientos.
- Inicia una ejecución guardada de RenderLog después del despliegue cuando aporte valor.
- Evita comprobaciones duplicadas con el mismo responsable y acción.
¿Biblioteca de Selenium, API de capturas o RenderLog?
La frontera útil está en quién controla el estado y quién revisa. Selenium destaca cuando la captura pertenece a un recorrido; una superficie compartida cuando la propia página necesita vigilancia continua.
| Decisión | Comparación en Selenium | API de capturas | RenderLog |
|---|---|---|---|
| Mejor encaje | Recorrido existente o suite en granja | Captura programática sin revisión | Comprobaciones guardadas de producción e historial |
| Control del estado | WebDriver, fixtures y objetos de página | Opciones y orquestación del cliente | Escenarios, calendario y ejecuciones por API |
| Comparación | Biblioteca o servicio visual externo | La implementa el cliente | Referencia, captura actual y diff en un resultado |
| Responsable habitual | Automatización de calidad e ingeniería | Aplicación cliente | Calidad, producto, operaciones, agencia o cliente |
Proceso mínimo de evidencia visual con Selenium
Los ejemplos mantienen separados la espera explícita, la captura, la comparación y la vigilancia compartida opcional. Elige biblioteca de imagen y almacenamiento según tu lenguaje y entorno de CI.
tests/pricing-visual.mjs
import { writeFile } from "node:fs/promises";
import { Builder, By, until } from "selenium-webdriver";
const driver = await new Builder().forBrowser("chrome").build();
try {
await driver.manage().window().setRect({ width: 1366, height: 900 });
await driver.get("https://example.com/pricing");
const heading = await driver.findElement(By.css("h1"));
await driver.wait(until.elementTextIs(heading, "Pricing"), 10_000);
const image = await driver.takeScreenshot();
await writeFile("artifacts/pricing-current.png", image, "base64");
} finally {
await driver.quit();
}Comparison boundary
const result = await comparePngFiles({
baseline: "baselines/pricing-chrome-1366.png",
current: "artifacts/pricing-current.png",
diff: "artifacts/pricing-diff.png"
});
if (result.changedPixelRatio > 0.001) {
throw new Error("Visual difference needs review");
}Saved-page handoff
curl -X POST https://renderlog.com/api/check-suites/suite_01J/runs \
-H "Authorization: Bearer rl_live_xxx" \
-H "Content-Type: application/json" \
-d '{"format":"png","labels":{"source":"selenium","commit":"8f4a7f2"}}'Fuentes primarias de esta guía
Consulta la documentación de Selenium para el comportamiento actual de WebDriver y las opciones de navegador. Aquí nos centramos en estado reproducible, artefactos diagnosticables y responsabilidad de revisión.
Continúa con un proceso visual concreto
Guía de regresión visual
Elige estados reproducibles, tolerancias útiles y responsable de referencias.
Pruebas visuales con Cypress
Revisa las mismas decisiones en un proceso basado en Cypress.
Pruebas visuales con Playwright
Usa aserciones integradas y artefactos estables de CI.
API de capturas de sitios web
Crea ejecuciones inmediatas o guardadas y descarga sus artefactos.
Comparar herramientas de regresión visual
Relaciona soluciones de repositorio, componentes y revisión compartida.
Asigna una página de producción a una persona concreta
Deja que Selenium controle los recorridos y guarda una página pública en RenderLog cuando otra persona necesite capturas programadas, diferencias visibles y un historial de referencias comprensible.
Crear un espacio de RenderLog