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 ven tu IU los usuarios. El La herramienta de prueba de capturas de pantalla de la vista previa de Compose combina la simplicidad y las funciones de vistas previas que admiten composición con el y de productividad si ejecutas pruebas de capturas de pantalla del lado del host. Vista previa de Compose Las pruebas de capturas de pantalla están diseñadas para ser tan fáciles 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, lo compara con una imagen de referencia aprobada previamente. Si las imágenes no coinciden, la prueba falla y se produce un informe HTML para ayudarte a comparar y encontrar las diferencias.

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

Identifica la cantidad de vistas previas existentes o nuevas de elementos componibles que deseas usar. de prueba de capturas de pantalla.
Genera 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 que realizar cambios en el código.
Usa parámetros @Preview, como uiMode o fontScale, y varias vistas previas para ayudarte a escalar tus pruebas.
Modulariza tus pruebas con el nuevo conjunto de orígenes screenshotTest.

Requisitos

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

Android para 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 al 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 de nivel de módulo, agrega el complemento en el Bloque plugins {}:
```
plugins {
    ...
    alias(libs.plugins.screenshot)
}
```

Habilita la propiedad experimental en la biblioteca gradle.properties.
```
android.experimental.enableScreenshotTest=true
```
En el bloque android {} de tu módulo build.gradle.kts, habilita la marca experimental para usar screenshotTest y asegúrate de que kotlinCompilerExtensionVersion se estableció en 1.5.4 o superior.
Nota: Si usas Kotlin 2.0 o una versión posterior, no tienes que configurar el Versión del compilador de Compose por separado. Obtén más información sobre la Complemento de Gradle para Compose.
```
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

Asegúrate de haber agregado ui-tooling dependencia.

Agrégala a tus catálogos de versiones:

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

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

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

Designa vistas previas de elementos componibles para usar en 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 o cualquier otro archivo creado 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!")
        }
    }
}

Genera imágenes de referencia

Luego de configurar una clase de prueba, debes generar imágenes de referencia para cada una vista previa. Estas imágenes de referencia se usan para identificar los cambios más adelante, después de que realices cambios en el código. Genera imágenes de referencia para la vista previa del elemento componible capturas de pantalla, 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 completada la tarea, busca las imágenes de referencia en app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/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 compáralo 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 la guía Componente de la Herramienta de seguimiento de errores. Informa cualquier otro comentario o problema mediante la Herramienta de seguimiento de errores.

Actualizaciones de lanzamientos

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

0.0.1-alpha06

En esta versión, se presenta lo siguiente:

Umbral de diferencia de imagen: Este nuevo parámetro de configuración del umbral global te permitirá y obtener un control más detallado de las comparaciones entre capturas de pantalla. Para configurarlo, actualiza tu build.gradle.kts del módulo:

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

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

Corrección de errores: Algunos errores del procesador 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.