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 manera eficaz de verificar cómo se ve tu IU para los usuarios. La herramienta de prueba de capturas de pantalla de la vista previa de Compose combina la simplicidad y las funciones de las vistas previas componibles con las ventajas de productividad que se obtienen cuando se ejecutan pruebas de capturas de pantalla del host. La prueba de capturas de pantalla de la vista previa de Compose está diseñada para ser tan fácil de usar como las vistas previas componibles.

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. De lo contrario, la prueba falla y genera un informe HTML que te ayudará a comparar y encontrar las diferencias.

Con la herramienta de prueba de capturas de pantalla de la vista previa de Compose, puedes hacer lo siguiente:

Identifica la cantidad de vistas previas componibles existentes o nuevas que deseas usar para las pruebas de captura de pantalla.
Generar imágenes de referencia a partir de esas vistas previas componibles
Genera un informe HTML que identifique los cambios en esas vistas previas después de realizar cambios en el código.
Usa parámetros @Preview, como uiMode o fontScale, y vistas previas múltiples para escalar tus pruebas.
Modulariza tus pruebas con el nuevo conjunto de orígenes screenshotTest.

Requisitos

Para usar las pruebas de capturas de pantalla de la vista previa de Compose, necesitas lo siguiente:

Android Gradle 8.5.0-beta01 o una versión posterior
Kotlin 1.9.20 o una versión posterior

Configuración

Para habilitar la herramienta, sigue estos pasos:

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

Agrega el complemento a tu archivo de catálogos de versiones:

[versions]
agp = "8.5.0-beta01"
kotlin = "1.9.20"
...
screenshot = "0.0.1-alpha01"

[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 orígenes screenshotTest y asegúrate de que kotlinCompilerExtensionVersion esté configurado en 1.5.4 o una versión posterior.
Nota: Si usas Kotlin 2.0 o una versión posterior, no necesitas configurar la versión del compilador de Compose por separado. Obtén más información sobre el complemento de Gradle para el compilador de Compose.
```
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

Asegúrate de agregar la dependencia ui-tooling.

Agrégala a tus catálogos de versiones:

[libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}

Agrégala al archivo build.gradle.kts a nivel del módulo:

dependencies {
  screenshotTestImplementation(libs.androidx.compose.ui.tooling)
}

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

Para designar las vistas previas componibles que deseas usar para las pruebas de capturas de pantalla, coloca las vistas previas en una clase de prueba. El archivo de la clase de prueba debe estar ubicado en el nuevo conjunto de orígenes screenshotTest, por ejemplo app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

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.google.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.google.yourapp.ui.theme.MyApplicationTheme

class ExamplePreviewsScreenshots {

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

Generar 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 realizar cambios en el código. Si deseas generar imágenes de referencia para tus pruebas de captura de pantalla de vista previa 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/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

Cómo generar un informe de prueba

Una vez que existan las imágenes de referencia, ejecuta la tarea de validación para tomar una captura de pantalla nueva y compárala 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.

Errores conocidos

Si una vista previa en el conjunto de orígenes screenshotTest comparte su nombre de método completamente calificado con una vista previa en main, la de "main" se usa de forma incorrecta para la prueba en lugar de la de captura de pantalla.