O teste de capturas de tela é uma maneira eficaz de verificar a aparência da IU para os usuários. A ferramenta de teste de captura de tela da visualização do Compose combina a simplicidade e os recursos das visualizações que podem ser compostas com os ganhos de produtividade da execução de testes de captura de tela no lado do 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 de composição.
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 visualização do Compose, você pode:
- Identifique um número de visualizações combináveis novas ou atuais que você quer usar para testes de captura de tela.
- Gere imagens de referência com base nessas visualizações de composição.
- Gere um relatório HTML que identifique as mudanças nessas visualizações depois de fazer alterações no código.
- Use parâmetros
@Preview
, comouiMode
oufontScale
, e várias visualizações para escalonar seus testes. - Modularize seus testes com o novo conjunto de origem
screenshotTest
.
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:
- Adicione o plug-in
com.android.compose.screenshot
, versão0.0.1-alpha01
, ao seu projeto. - 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"}
- No arquivo
build.gradle.kts
do módulo, adicione o plug-in no blocoplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Ative a propriedade experimental no arquivo
gradle.properties
do projeto.android.experimental.enableScreenshotTest=true
- No bloco
android {}
do arquivobuild.gradle.kts
do módulo, ative a flag experimental para usar o conjunto de origemscreenshotTest
e verifique sekotlinCompilerExtensionVersion
está definido como 1.5.4 ou mais recente.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Verifique se você adicionou a
dependência
ui-tooling
.- Adicione o item aos catálogos de versões:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Adicione-o ao arquivo
build.gradle.kts
do módulo:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Adicione o item aos catálogos de versões:
Designar visualizações combináveis para usar em testes de captura de tela
Para designar as visualizações de composição que você quer usar para 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
).
É possível adicionar mais elementos combináveis e/ou visualizações, incluindo várias visualizações, nesse arquivo ou em outros 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, você precisa gerar imagens de referência para cada visualização. Essas imagens de referência são usadas para identificar alterações posteriormente, depois que você fizer alterações no código. Para gerar imagens de referência para os testes de captura de tela de visualização de elementos 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/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Gerar um relatório de teste
Quando as imagens de referência existirem, 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
- Se uma visualização no conjunto de origem
screenshotTest
compartilhar o nome do método totalmente qualificado com uma visualização emmain
, a visualização no elemento principal será usada incorretamente para o teste em vez do teste de captura de tela.