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
, comouiMode
oufontScale
, e várias visualizações. para ajudar você a escalonar os testes. - Modularize seus testes com o novo conjunto de origem
screenshotTest
.
![](https://developer.android.com/static/studio/images/compose-screenshot-testing.png?authuser=19&hl=pt)
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:
- Adicionar o plug-in
com.android.compose.screenshot
, versão0.0.1-alpha01
ao 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 na Blocoplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Ative a propriedade experimental no arquivo
gradle.properties
.android.experimental.enableScreenshotTest=true
- No bloco
android {}
do nível do módulo,build.gradle.kts
, ative a sinalização experimental para usar oscreenshotTest
conjunto de origem e garantir quekotlinCompilerExtensionVersion
está definido como 1.5.4 ou mais recente.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Certifique-se de que você adicionou o
ui-tooling
.- Adicione-o aos seus 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 aos seus catálogos de versões:
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.