Se usó la API de Cloud Translation para traducir esta página.

Prueba de captura de pantalla de la vista previa de Compose

Las pruebas de capturas de pantalla son una forma eficaz de verificar cómo se ve tu IU para los usuarios. La herramienta de pruebas de capturas de pantalla de Compose Preview combina la simplicidad y las funciones de las vistas previas componibles con las ganancias de productividad de ejecutar pruebas de capturas de pantalla del host. Las pruebas de capturas de pantalla de Compose Preview están diseñadas para ser tan fáciles de usar como las vistas previas de componibilidad.

Una prueba de captura de pantalla es una prueba automatizada que toma una captura de pantalla de una parte de la IU y, luego, la compara con una imagen de referencia aprobada previamente. Si las imágenes no coinciden, la prueba falla y se genera un informe en HTML para ayudarte a comparar y encontrar las diferencias.

Con la herramienta Compose Preview Screenshot Testing, puedes hacer lo siguiente:

Usa @PreviewTest para crear pruebas de capturas de pantalla para vistas previas componibles existentes o nuevas.
Generar imágenes de referencia a partir de esas vistas previas componibles
Genera un informe en HTML que identifique los cambios en esas vistas previas después de que realices cambios en el código.
Usa parámetros de @Preview, como uiMode o fontScale, y vistas previas múltiples para ayudarte a ampliar tus pruebas.
Modulariza tus pruebas con el nuevo conjunto de fuentes screenshotTest.

Requisitos

Para usar las pruebas de capturas de pantalla de Compose Preview, necesitas lo siguiente:

Complemento de Android para Gradle 8.5.0-beta01 o una versión posterior
Kotlin 1.9.20 o una versión posterior Te recomendamos que uses Kotlin 2.0 o versiones posteriores para que puedas usar el complemento de Gradle de Compose Compiler.
JDK 23 o versiones anteriores Esta herramienta no es compatible con JDK 24 ni versiones posteriores debido a una dependencia del administrador de seguridad de Java, que se quitó en versiones más recientes del JDK.
Compose está habilitado para tu proyecto. Te recomendamos que habilites Compose con el complemento de Gradle de Compose Compiler.

Nota: Si no puedes usar el complemento de Gradle de Compose Compiler, puedes habilitar Compose declarando una dependencia en Compose Compiler directamente. Asegúrate de usar la versión 1.5.4 o posterior de kotlinCompilerExtensionVersion.

Configuración

Para habilitar la herramienta, sigue estos pasos:

Agrega el complemento com.android.compose.screenshot, versión 0.0.1-alpha10, a tu proyecto.

Agrega el complemento al archivo de catálogos de versiones:

[versions]
agp = "8.11.0-alpha06"
kotlin = "2.1.20"
screenshot = "0.0.1-alpha10"

[plugins]
screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}

En el archivo build.gradle.kts a nivel del módulo, agrega el complemento en el bloque plugins {}:
```
plugins {
    alias(libs.plugins.screenshot)
}
```

Habilita la propiedad experimental en el archivo gradle.properties de tu proyecto.
```
android.experimental.enableScreenshotTest=true
```
En el bloque android {} de tu archivo build.gradle.kts a nivel del módulo, habilita la marca experimental para usar el conjunto de fuentes screenshotTest.
```
android {
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

Agrega las dependencias screenshot-validation-api y ui-tooling.

Agrégalas a tus catálogos de versiones:

[libraries]
screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"}
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}

Agrégalas a tu archivo build.gradle.kts a nivel del módulo:

dependencies {
  screenshotTestImplementation(libs.screenshot.validation.api)
  screenshotTestImplementation(libs.androidx.ui.tooling)
}

Cómo designar vistas previas de elementos componibles para usarlas en pruebas de capturas de pantalla

Para designar las vistas previas componibles que deseas usar para las pruebas de capturas de pantalla, marca las vistas previas con la anotación @PreviewTest. Las vistas previas deben ubicarse en el nuevo conjunto de fuentes screenshotTest, por ejemplo, app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt.

Puedes agregar más elementos componibles o vistas previas, incluidas las vistas previas múltiples, en este archivo o en otros archivos creados en el mismo conjunto de orígenes.

package com.example.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme

@PreviewTest
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        Greeting("Android!")
    }
}

Genera imágenes de referencia

Después de configurar una clase de prueba, debes generar imágenes de referencia para cada vista previa. Estas imágenes de referencia se usan para identificar cambios más adelante, después de que realices cambios en el código. Para generar imágenes de referencia para las pruebas de capturas de pantalla de vista previa de elementos componibles, ejecuta la siguiente tarea de Gradle:

Linux y macOS: ./gradlew updateDebugScreenshotTest (./gradlew :{module}:update{Variant}ScreenshotTest)
Windows: gradlew updateDebugScreenshotTest (gradlew :{module}:update{Variant}ScreenshotTest)

Una vez que se complete la tarea, busca las imágenes de referencia en app/src/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/reference).

Genera un informe de prueba

Una vez que existan las imágenes de referencia, ejecuta la tarea de validación para tomar una nueva captura de pantalla y compararla con la imagen de referencia:

Linux y macOS: ./gradlew validateDebugScreenshotTest (./gradlew :{module}:validate{Variant}ScreenshotTest)
Windows: gradlew validateDebugScreenshotTest (gradlew :{module}:validate{Variant}ScreenshotTest)

La tarea de verificación crea un informe HTML en {module}/build/reports/screenshotTest/preview/{variant}/index.html.

Problemas conocidos

Puedes encontrar la lista actual de problemas conocidos en el componente de seguimiento de problemas de la herramienta. Envía cualquier otro comentario o problema a través del registro de problemas.

Actualizaciones de lanzamientos

Notas de la versión y cambios para las versiones en curso

0.0.1-alpha10

En esta versión, se incluyen las siguientes novedades:

A partir de esta versión, debes marcar todas tus funciones de vista previa con la anotación @PreviewTest. No se ejecutarán las vistas previas sin la anotación.
Se cambió el directorio de imágenes de referencia de {module}/src/{variant}/screenshotTest/reference a {module}/src/screenshotTest{Variant}/reference. Esto es para asegurarnos de que esas imágenes de referencia generadas no formen parte del código de producción y para alinearnos con la estructura de directorios de otros tipos de pruebas.
Se quitó la tarea {variant}PreviewScreenshotRender. El procesamiento de imágenes se migró al motor de pruebas de JUnit.
La tarea update{Variant}ScreenshotTest comparará las imágenes de renderización nuevas con las imágenes de referencia antes de la actualización. Solo actualizará las imágenes que tengan diferencias mayores que un umbral especificado. Se quitó la marca de línea de comandos --updateFilter.

0.0.1-alpha06

En esta versión, se incluyen las siguientes novedades:

Umbral de diferencia de imágenes: Este nuevo parámetro de configuración global del umbral te permitirá tener un mayor control sobre las comparaciones de capturas de pantalla. Para configurar, actualiza el archivo build.gradle.kts de tu módulo:

android {
    testOptions {
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

Este umbral se aplicará a todas las pruebas de capturas de pantalla definidas en el módulo.

Correcciones de errores: Se corrigieron algunos errores del renderizador de Compose y se agregó compatibilidad con Compose vacío.
Mejoras de rendimiento: Se actualizó el algoritmo de comparación de imágenes para que sea más rápido