Esta página foi traduzida pela API Cloud Translation.

Teste de captura de tela da visualização do Compose
Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

O teste de captura de tela é uma maneira eficaz de verificar como a interface aparece para os usuários. A ferramenta de teste de captura de tela de visualização do Compose combina a simplicidade e os recursos de visualizações combináveis com os ganhos de produtividade da execução de testes de captura de tela no host. O teste de captura de tela da Visualização do Compose 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 a compara com uma imagem de referência aprovada anteriormente. Se as imagens não corresponderem, o teste falhará e produzirá um relatório HTML para ajudar você a comparar e encontrar as diferenças.

Com a ferramenta de teste de captura de tela da prévia do Compose, é possível:

Use @PreviewTest para criar testes de captura de tela para visualizações combináveis atuais ou novas.
Gerar imagens de referência com base nessas visualizações combináveis.
Gere um relatório em HTML que identifique as mudanças nessas visualizações depois que você fizer mudanças no código.
Use parâmetros @Preview, como uiMode ou fontScale, e várias visualizações para ajudar a dimensionar seus 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:

Plug-in do Android para Gradle 8.5.0-beta01 ou mais recente.
Kotlin 1.9.20 ou mais recente. Recomendamos o uso do Kotlin 2.0 ou mais recente para que você possa usar o plug-in do Gradle do Compose Compiler.
O Compose foi ativado para o projeto. Recomendamos ativar o Compose usando o plug-in do Gradle do Compose Compiler.

Observação: se não for possível usar o plug-in do Gradle do Compose Compiler, ative o Compose declarando uma dependência no Compose Compiler diretamente. Use a versão 1.5.4 ou mais recente do kotlinCompilerExtensionVersion.

Configurar

Para ativar a ferramenta, siga estas etapas:

Adicione o plug-in com.android.compose.screenshot, versão 0.0.1-alpha10, ao projeto.

Adicione o plug-in ao arquivo de catálogos de versões:

[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"}

No arquivo build.gradle.kts do módulo, adicione o plug-in no bloco plugins {}:
```
plugins {
    alias(libs.plugins.screenshot)
}
```

Ative a propriedade experimental no arquivo gradle.properties do projeto.
```
android.experimental.enableScreenshotTest=true
```
No bloco android {} do arquivo build.gradle.kts do módulo, ative a flag experimental para usar o conjunto de origem screenshotTest.
```
android {
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

Adicione as dependências screenshot-validation-api e ui-tooling.

Adicione-os aos catálogos de versões:

[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"}

Adicione-as ao arquivo build.gradle.kts do módulo:

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

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

Para designar as visualizações combináveis que você quer usar nos testes de captura de tela, marque as visualizações com a anotação @PreviewTest. As visualizações precisam estar localizadas no novo conjunto de origem screenshotTest, por exemplo, app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt.

É possível adicionar mais elementos combináveis e/ou visualizações, incluindo várias visualizações, neste arquivo ou em outros arquivos criados no mesmo conjunto de origem.

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

Gerar imagens de referência

Depois de configurar uma classe de teste, você precisa gerar imagens de referência para cada visualização. Essas imagens de referência são usadas para identificar mudanças mais tarde, depois que você faz mudanças no código. Para gerar imagens de referência para seus testes de captura de tela de visualização combináveis, 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, encontre as imagens de referência em app/src/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/reference).

Gerar um relatório de teste

Depois que as imagens de referência forem criadas, execute a tarefa de validação para fazer uma nova captura de tela e compará-la 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 em {module}/build/reports/screenshotTest/preview/{variant}/index.html.

Problemas conhecidos

Confira a lista atual de problemas conhecidos no componente de rastreador de problemas da ferramenta. Informe outros feedbacks e problemas pelo Issue Tracker.

Atualizações de versão

Notas da versão e mudanças para versões em andamento.

0.0.1-alpha10

Esta versão inclui:

A partir dessa versão, é necessário marcar todas as funções de visualização com a anotação @PreviewTest. As prévias sem a anotação não serão executadas.
O diretório de imagem de referência foi alterado de {module}/src/{variant}/screenshotTest/reference para {module}/src/screenshotTest{Variant}/reference. Isso serve para garantir que essas imagens de referência geradas não façam parte do código de produção e estejam alinhadas com a estrutura de diretório de outros tipos de teste.
A tarefa {variant}PreviewScreenshotRender é removida. A renderização de imagens é migrada para o JUnit Test Engine.
A tarefa update{Variant}ScreenshotTest vai comparar novas imagens de renderização com imagens de referência antes da atualização. Ele só vai atualizar imagens que têm diferenças maiores que um limite especificado. A flag de linha de comando --updateFilter foi removida.

0.0.1-alpha06