Screenshots

Screenshots de página completa

La captura de pantalla completa en Selenium WebDriver permite obtener una imagen de toda la página web que está siendo probada, incluyendo contenido que no es visible en la ventana actual del navegador. Esta funcionalidad es fundamental para la documentación de errores, generación de reportes visuales y verificación del estado visual de las aplicaciones web durante la ejecución de pruebas automatizadas.

Selenium WebDriver proporciona la interfaz TakesScreenshot que debe ser implementada por los drivers específicos de cada navegador. Esta interfaz ofrece el método getScreenshotAs() que permite capturar la pantalla en diferentes formatos, siendo los más comunes OutputType.FILE para guardar directamente en disco y OutputType.BYTES para manipulación en memoria.

Implementación básica con TakesScreenshot

La implementación más directa utiliza el casting del WebDriver a la interfaz TakesScreenshot:

@Test
void capturarPaginaCompleta() {
    driver.get("https://example.com");
    
    TakesScreenshot screenshot = (TakesScreenshot) driver;
    File archivoTemporal = screenshot.getScreenshotAs(OutputType.FILE);
    
    Path destino = Paths.get("screenshots", "pagina-completa.png");
    Files.createDirectories(destino.getParent());
    Files.copy(archivoTemporal.toPath(), destino, StandardCopyOption.REPLACE_EXISTING);
}

Esta aproximación funciona correctamente con todos los navegadores modernos y garantiza que se capture el contenido completo de la página, incluso aquellas secciones que requieren scroll para ser visibles.

Gestión de rutas y directorios

Para un manejo profesional de las capturas, es recomendable crear una estructura de directorios organizada que permita clasificar las imágenes por fecha, test o funcionalidad:

@Test
void capturarConEstructuraOrganizada() {
    driver.get("https://example.com/productos");
    
    LocalDateTime ahora = LocalDateTime.now();
    String timestamp = ahora.format(DateTimeFormatter.ofPattern("yyyy-MM-dd_HH-mm-ss"));
    
    Path directorioScreenshots = Paths.get("target", "screenshots", 
                                          ahora.format(DateTimeFormatter.ofPattern("yyyy-MM-dd")));
    Files.createDirectories(directorioScreenshots);
    
    TakesScreenshot screenshot = (TakesScreenshot) driver;
    File captura = screenshot.getScreenshotAs(OutputType.FILE);
    
    Path archivoDestino = directorioScreenshots.resolve(
        String.format("productos_%s.png", timestamp)
    );
    
    Files.move(captura.toPath(), archivoDestino, StandardCopyOption.REPLACE_EXISTING);
}

Captura con manejo de excepciones robusto

En entornos de producción y CI/CD, es crucial implementar un manejo de excepciones que no interrumpa la ejecución de las pruebas:

@Test
void capturarConManejoDeExcepciones() {
    driver.get("https://example.com/dashboard");
    
    try {
        TakesScreenshot screenshot = (TakesScreenshot) driver;
        byte[] imagenBytes = screenshot.getScreenshotAs(OutputType.BYTES);
        
        Path archivo = Paths.get("screenshots", "dashboard-" + 
                                System.currentTimeMillis() + ".png");
        Files.createDirectories(archivo.getParent());
        Files.write(archivo, imagenBytes);
        
        System.out.println("Screenshot guardado en: " + archivo.toAbsolutePath());
        
    } catch (WebDriverException e) {
        System.err.println("Error al capturar screenshot: " + e.getMessage());
    } catch (IOException e) {
        System.err.println("Error al guardar archivo: " + e.getMessage());
    }
}

Integración con assertion para debugging

Una práctica común es combinar las capturas con assertions fallidas para facilitar el debugging posterior:

@Test
void verificarTituloConCaptura() {
    driver.get("https://example.com");
    
    String tituloEsperado = "Página Principal";
    String tituloActual = driver.getTitle();
    
    if (!tituloEsperado.equals(tituloActual)) {
        capturarPantallaDeError("titulo-incorrecto");
    }
    
    assertEquals(tituloEsperado, tituloActual);
}

private void capturarPantallaDeError(String contexto) {
    try {
        TakesScreenshot screenshot = (TakesScreenshot) driver;
        File captura = screenshot.getScreenshotAs(OutputType.FILE);
        
        Path destino = Paths.get("screenshots", "errores", 
                                contexto + "-" + System.currentTimeMillis() + ".png");
        Files.createDirectories(destino.getParent());
        Files.copy(captura.toPath(), destino, StandardCopyOption.REPLACE_EXISTING);
        
    } catch (Exception e) {
        // Log del error sin interrumpir el test
        System.err.println("No se pudo capturar screenshot de error: " + e.getMessage());
    }
}

Optimización para diferentes resoluciones

Los navegadores modernos pueden requerir ajustes específicos para garantizar capturas consistentes independientemente de la resolución de pantalla:

@Test
void capturarConResolucionOptimizada() {
    // Configurar tamaño de ventana para capturas consistentes
    driver.manage().window().setSize(new Dimension(1920, 1080));
    
    driver.get("https://example.com/responsive-page");
    
    // Esperar a que se complete el renderizado
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
    wait.until(webDriver -> 
        ((JavascriptExecutor) webDriver)
            .executeScript("return document.readyState")
            .equals("complete")
    );
    
    TakesScreenshot screenshot = (TakesScreenshot) driver;
    File captura = screenshot.getScreenshotAs(OutputType.FILE);
    
    Path destino = Paths.get("screenshots", "responsive-1920x1080.png");
    Files.createDirectories(destino.getParent());
    Files.copy(captura.toPath(), destino, StandardCopyOption.REPLACE_EXISTING);
}

La captura de página completa es especialmente útil cuando se necesita documentar el comportamiento visual de aplicaciones web complejas, ya que incluye automáticamente todo el contenido de la página sin requerir scroll manual o capturas múltiples.

Screenshots de elementos específicos

La captura de elementos específicos en Selenium WebDriver permite obtener imágenes de componentes individuales de la página web, como botones, formularios, tablas o secciones particulares. Esta funcionalidad es especialmente valiosa para pruebas de regresión visual, documentación de componentes UI específicos y validación del aspecto de elementos críticos sin necesidad de capturar toda la página.

A partir de Selenium WebDriver 4.0, los WebElement individuales implementan directamente la interfaz TakesScreenshot, lo que simplifica significativamente el proceso de captura de elementos específicos. Esta mejora elimina la necesidad de bibliotecas externas o manipulación compleja de coordenadas.

Captura directa de WebElement

La forma más directa de capturar un elemento específico es utilizando el método getScreenshotAs() directamente sobre el WebElement:

@Test
void capturarBotonEspecifico() {
    driver.get("https://example.com/login");
    
    WebElement botonLogin = driver.findElement(By.id("login-button"));
    File captura = botonLogin.getScreenshotAs(OutputType.FILE);
    
    Path destino = Paths.get("screenshots", "elementos", "boton-login.png");
    Files.createDirectories(destino.getParent());
    Files.copy(captura.toPath(), destino, StandardCopyOption.REPLACE_EXISTING);
}

Esta aproximación captura únicamente el área rectangular que ocupa el elemento, incluyendo su padding y border, pero excluyendo el margin y el resto del contenido de la página.

Captura de elementos complejos

Para elementos más complejos como formularios completos o secciones que contienen múltiples componentes, la captura de elemento específico resulta más eficiente que recortar una captura de página completa:

@Test
void capturarFormularioCompleto() {
    driver.get("https://example.com/registro");
    
    WebElement formularioRegistro = driver.findElement(By.className("registration-form"));
    
    // Asegurar que el elemento está completamente visible
    ((JavascriptExecutor) driver).executeScript(
        "arguments[0].scrollIntoView({block: 'center'});", 
        formularioRegistro
    );
    
    byte[] captura = formularioRegistro.getScreenshotAs(OutputType.BYTES);
    
    Path archivo = Paths.get("screenshots", "formularios", 
                            "registro-" + System.currentTimeMillis() + ".png");
    Files.createDirectories(archivo.getParent());
    Files.write(archivo, captura);
}

Captura múltiple de elementos relacionados

En ocasiones es útil capturar varios elementos relacionados en una misma prueba, especialmente para documentar el estado de diferentes componentes de una interfaz:

@Test
void capturarElementosNavegacion() {
    driver.get("https://example.com");
    
    List<WebElement> elementosNav = driver.findElements(By.cssSelector(".navbar .nav-item"));
    
    for (int i = 0; i < elementosNav.size(); i++) {
        WebElement elemento = elementosNav.get(i);
        String textoElemento = elemento.getText().replaceAll("[^a-zA-Z0-9]", "-").toLowerCase();
        
        File captura = elemento.getScreenshotAs(OutputType.FILE);
        Path destino = Paths.get("screenshots", "navegacion", 
                                String.format("nav-item-%d-%s.png", i, textoElemento));
        
        Files.createDirectories(destino.getParent());
        Files.copy(captura.toPath(), destino, StandardCopyOption.REPLACE_EXISTING);
    }
}

Validación visual con elementos específicos

La captura de elementos específicos se integra perfectamente con validaciones visuales para detectar cambios no deseados en componentes críticos:

@Test
void validarEstadoBotonSegunContexto() {
    driver.get("https://example.com/checkout");
    
    WebElement botonPagar = driver.findElement(By.id("pay-button"));
    
    // Capturar estado inicial (deshabilitado)
    capturarElementoConContexto(botonPagar, "pagar-deshabilitado");
    
    // Llenar formulario para habilitar el botón
    driver.findElement(By.id("card-number")).sendKeys("4111111111111111");
    driver.findElement(By.id("expiry-date")).sendKeys("12/25");
    
    // Esperar a que el botón se habilite
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
    wait.until(ExpectedConditions.elementToBeClickable(botonPagar));
    
    // Capturar estado habilitado
    capturarElementoConContexto(botonPagar, "pagar-habilitado");
}

private void capturarElementoConContexto(WebElement elemento, String contexto) {
    try {
        File captura = elemento.getScreenshotAs(OutputType.FILE);
        Path destino = Paths.get("screenshots", "estados", contexto + ".png");
        Files.createDirectories(destino.getParent());
        Files.copy(captura.toPath(), destino, StandardCopyOption.REPLACE_EXISTING);
    } catch (Exception e) {
        System.err.println("Error capturando elemento: " + contexto + " - " + e.getMessage());
    }
}

Captura de elementos dinámicos

Los elementos dinámicos como dropdowns, tooltips o modales requieren técnicas específicas para garantizar que se capturen en el momento adecuado:

@Test
void capturarDropdownDesplegado() {
    driver.get("https://example.com/productos");
    
    WebElement dropdown = driver.findElement(By.id("category-dropdown"));
    dropdown.click();
    
    // Esperar a que el dropdown se despliegue completamente
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(3));
    WebElement opcionesDropdown = wait.until(
        ExpectedConditions.visibilityOfElementLocated(By.className("dropdown-options"))
    );
    
    // Capturar el dropdown completo con sus opciones
    byte[] captura = opcionesDropdown.getScreenshotAs(OutputType.BYTES);
    
    Path archivo = Paths.get("screenshots", "componentes", "dropdown-categorias.png");
    Files.createDirectories(archivo.getParent());
    Files.write(archivo, captura);
}

Comparación de elementos en diferentes estados

Una aplicación avanzada es la comparación visual de elementos antes y después de interacciones específicas:

@Test
void compararEstadosElemento() {
    driver.get("https://example.com/producto/123");
    
    WebElement botonFavorito = driver.findElement(By.className("favorite-button"));
    
    // Capturar estado no favorito
    File estadoInicial = botonFavorito.getScreenshotAs(OutputType.FILE);
    Path rutaInicial = Paths.get("screenshots", "comparacion", "favorito-inicial.png");
    Files.createDirectories(rutaInicial.getParent());
    Files.copy(estadoInicial.toPath(), rutaInicial, StandardCopyOption.REPLACE_EXISTING);
    
    // Hacer clic para marcar como favorito
    botonFavorito.click();
    
    // Esperar a que cambie visualmente
    WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(2));
    wait.until(driver -> 
        botonFavorito.getAttribute("class").contains("active")
    );
    
    // Capturar estado favorito
    File estadoFinal = botonFavorito.getScreenshotAs(OutputType.FILE);
    Path rutaFinal = Paths.get("screenshots", "comparacion", "favorito-final.png");
    Files.copy(estadoFinal.toPath(), rutaFinal, StandardCopyOption.REPLACE_EXISTING);
}

La captura de elementos específicos proporciona mayor precisión y eficiencia en las pruebas visuales, especialmente cuando se necesita documentar o validar componentes individuales sin el ruido visual del resto de la página. Esta técnica es fundamental para mantener suites de pruebas visuales ágiles y enfocadas en los aspectos críticos de la interfaz de usuario.