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

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, como uiMode ou fontScale, 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:

1. Adicione o plug-in com.android.compose.screenshot, versão 0.0.1-alpha01, ao seu 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 no bloco plugins {}:

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

2. Ative a propriedade experimental no arquivo gradle.properties do projeto.

   android.experimental.enableScreenshotTest=true
   

3. No bloco android {} do arquivo build.gradle.kts do módulo, ative a flag experimental para usar o conjunto de origem screenshotTest e verifique se kotlinCompilerExtensionVersion está definido como 1.5.4 ou mais recente.

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

4. Verifique se você adicionou a dependência ui-tooling.
   1. Adicione o item aos 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 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 em main, a visualização no elemento principal será usada incorretamente para o teste em vez do teste de captura de tela.