Teste de captura de tela da visualização do Compose

O teste de captura de tela é uma maneira eficaz de verificar como a interface é exibida para os usuários. A A ferramenta de teste de captura de tela da visualização do Compose combina a simplicidade e os recursos do visualizações de composição com o ganhos de produtividade por executar testes de captura de tela no lado do host. Visualização do Compose O Teste de captura de tela foi projetado para ser tão fácil de usar quanto as visualizações combináveis.

Um teste de captura de tela é um teste automatizado que faz uma captura de tela de uma parte da interface e compara com uma imagem de referência já aprovada. Se o não corresponderem, o teste vai falhar e produzir um relatório HTML para ajudar você comparar e encontrar as diferenças.

Com a ferramenta de teste de captura de tela da visualização do Compose, é possível:

  • Identificar várias visualizações de composição atuais ou novas que você quer usar testes de captura de tela.
  • Gere imagens de referência com base nessas visualizações combináveis.
  • Gere um relatório HTML que identifique as alterações nessas visualizações após fazer alterações no código.
  • Use parâmetros @Preview, como uiMode ou fontScale, e várias visualizações. para ajudar você a escalonar os testes.
  • Modularize seus testes com o novo conjunto de origem screenshotTest.
.
Figura 1. Exemplo de relatório HTML.

Requisitos

Para usar o teste de captura de tela da visualização do Compose, você precisa do seguinte:

  • Android para Gradle 8.5.0-beta01 ou mais recente.
  • Kotlin 1.9.20 ou mais recente

Configurar

Para ativar a ferramenta, siga estas etapas:

  1. Adicionar o plug-in com.android.compose.screenshot, versão 0.0.1-alpha01 ao projeto.
    1. Adicione o plug-in ao arquivo de catálogos de versões: 
      [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"}
    2. No arquivo build.gradle.kts do módulo, adicione o plug-in na Bloco plugins {}: 
      plugins {
    ...
    alias(libs.plugins.screenshot)
}
  2. Ative a propriedade experimental no arquivo gradle.properties. 
    android.experimental.enableScreenshotTest=true
  3. No bloco android {} do nível do módulo, build.gradle.kts, ative a sinalização experimental para usar o screenshotTest conjunto de origem e garantir que kotlinCompilerExtensionVersion está definido como 1.5.4 ou mais recente. 
    android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
  4. Certifique-se de que você adicionou o ui-tooling .
    1. Adicione-o aos seus catálogos de versões: 
      [libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. Adicione-o ao arquivo build.gradle.kts do módulo: 
      dependencies {
  screenshotTestImplementation(libs.androidx.compose.ui.tooling)
}

Designar visualizações combináveis para usar em testes de captura de tela

Para designar as visualizações combináveis que você quer usar em testes de captura de tela, coloque as visualizações em uma classe de teste. O arquivo da classe de teste precisa estar localizado no novo Conjunto de origem screenshotTest, por exemplo app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Você pode adicionar mais elementos combináveis e/ou visualizações, incluindo várias visualizações, em desse arquivo ou de outros arquivos criados no mesmo conjunto de origem.

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!")
        }
    }
}

Gerar imagens de referência

Depois de configurar uma classe de teste, é preciso gerar imagens de referência para cada prévia. Essas imagens de referência são usadas para identificar alterações posteriormente, após você fazer alterações no código. Gerar imagens de referência para a visualização da função combinável testes de captura de tela, execute a seguinte tarefa do Gradle:

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

Depois que a tarefa for concluída, localize as imagens de referência no app/src/debug/screenshotTest/reference {module}/src/{variant}/screenshotTest/reference).

Gerar um relatório de teste

Depois que as imagens de referência existirem, execute a tarefa de validação para fazer uma nova captura de tela e compare com a imagem de referência:

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

A tarefa de verificação cria um relatório HTML {module}/build/reports/screenshotTest/preview/{variant}/index.html:

Problemas conhecidos

A lista atual de problemas conhecidos está disponível na Componente Issue Tracker. Informe outros feedbacks e problemas pelo Issue Tracker.