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 la vista previa de Compose combina la simplicidad y las funciones de las vistas previas de componibilidad con los aumentos de productividad de ejecutar pruebas de capturas de pantalla del host. Las pruebas de capturas de pantalla de la vista previa de Compose 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 un elemento de la IU y, luego, la compara con una imagen de referencia aprobada con anterioridad. 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 una cantidad de vistas previas componibles existentes o nuevas que deseas usar para las pruebas de capturas de pantalla.
• Genera imágenes de referencia a partir de esas vistas previas de elementos componibles.
• Genera un informe HTML que identifique los cambios en esas vistas previas después de hacer 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 capturas 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:

1. Agrega el complemento com.android.compose.screenshot, versión 0.0.1-alpha07, a tu proyecto.
1. Agrega el complemento al archivo de catálogos de versiones:

   [versions]
   agp = "8.5.0-beta01"
   kotlin = "1.9.20"
   ...
   screenshot = "0.0.1-alpha07"
   
   [plugins]
   ...
   screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
   

2. En el archivo build.gradle.kts a nivel del módulo, agrega el complemento en el bloque plugins {}:

   plugins {
       ...
       alias(libs.plugins.screenshot)
   }
   

2. Habilita la propiedad experimental en el archivo gradle.properties de tu proyecto.

   android.experimental.enableScreenshotTest=true
   

3. 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.

   android {
       ...
       composeOptions {
           kotlinCompilerExtensionVersion = "1.5.4"
       }
       experimentalProperties["android.experimental.enableScreenshotTest"] = true
   }
   

4. Asegúrate de haber agregado la dependencia ui-tooling.
   1. Agrega la opción a tus catálogos de versiones:

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

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

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

Designa vistas previas componibles para usar en las pruebas de captura de pantalla

Para designar las vistas previas componibles que quieres usar para las pruebas de capturas de pantalla, colócalas 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!")
        }
    }
}

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 los 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 la 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/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 captura de pantalla nueva 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 errores de la herramienta. Informa cualquier otro comentario y problema a través del seguimiento de problemas.

Actualizaciones de lanzamientos

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

0.0.1-alpha06

Esta versión incluye lo siguiente:

Umbral de diferencia de imágenes: Este nuevo parámetro de configuración de umbral global te permitirá obtener un control más preciso sobre las comparaciones de capturas de pantalla. Para configurarlo, 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.