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

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, você pode:

• Identifique um número de visualizações de elementos combináveis atuais ou novos que você quer usar para testes de captura de tela.
• 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 alterações 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.

Requisitos

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

• Android 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-alpha07, 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-alpha07"
   
   [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 no nível 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 aos catálogos de versões:

      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      

   2. Adicione ao arquivo build.gradle.kts no nível do módulo:

      dependencies {
        screenshotTestImplementation(libs.androidx.compose.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, 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, neste arquivo ou em outros arquivos criados no mesmo sourceset.

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 mudanças mais tarde, depois que você faz mudanças no código. Para gerar imagens de referência para os 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/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

A lista atual de problemas conhecidos está disponível no componente Issue Tracker 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 atuais

0.0.1-alpha06

Esta versão inclui:

Limite de diferença de imagem: essa nova configuração global de limite permite controlar melhor as comparações de capturas de tela. Para configurar, atualize o build.gradle.kts do módulo:

android {
    ...
    testOptions {
        ...
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

Esse limite será aplicado a todos os testes de captura de tela definidos no módulo.

• Correções de bugs: alguns bugs do Compose Renderer e adição de suporte para o Compose vazio
• Melhorias de desempenho: o algoritmo de comparação de imagens foi atualizado para ser mais rápido