Teste de captura de tela

O teste de captura de tela é uma maneira muito eficaz de verificar a interface do app. Os testes de captura de tela podem existir em testes de componentes, recursos e aplicativos.

É possível usar ferramentas de terceiros para criar testes de captura de tela instrumentados e locais. Se você usa o Compose, pode utilizar a ferramenta oficial de teste de captura de tela da visualização do Compose.

Definição

Os testes de captura de tela fazem uma captura de tela de uma interface e a comparam com uma imagem aprovada anteriormente, chamada "reference" ou "golden":

Um teste de captura de tela compara duas imagens, uma nova e outra de referência.
Figura 1. Um teste de captura de tela compara duas imagens

Se as imagens forem as mesmas, o teste será aprovado. Se houver diferenças entre elas, a ferramenta criará um relatório:

Um relatório de teste de captura de tela mostrando a referência e a nova captura de tela em ambos os lados e a diferença no meio.
Figura 2. Um relatório de teste de captura de tela mostrando a referência e a nova captura de tela em ambos os lados e a diferença no meio.

Com o relatório, você tem duas respostas possíveis:

  • Perceba que há um erro no novo código e corrija-o.
  • Aprove a nova captura de tela e substitua a imagem de referência pela nova.

Os testes de captura de tela têm um fluxo de trabalho diferente dos testes normais, porque um teste falho nem sempre significa que há um erro.

Vantagens

As vantagens ou testes de captura de tela são:

  • Um teste de captura de tela faz várias declarações por teste. Por exemplo, um único teste pode verificar cores, margens, tamanhos e fontes.
  • Um teste de captura de tela é muito mais fácil de programar, entender e manter do que um teste de comportamento equivalente.
  • Elas são especialmente úteis ao verificar e detectar regressões em tamanhos de tela diferentes.

Desvantagens

No entanto, os testes de captura de tela também podem ter desvantagens:

  • Lidar com as imagens de referência pode ser complicado, já que um projeto grande pode terminar com milhares de PNGs.
  • Plataformas diferentes (Linux, Max e Windows) produzem capturas de tela um pouco diferentes.
  • Eles são mais lentos que testes de comportamento equivalentes.
  • Ter um grande número de testes de captura de tela pode causar problemas, por exemplo, quando uma única mudança afeta milhares de capturas de tela.

As seções a seguir oferecem recomendações para resolver esses problemas.

Manter os testes de captura de tela no mínimo

É preciso minimizar o número de testes de captura de tela e, ao mesmo tempo, maximizar o feedback e a cobertura para regressões.

Combinações de diferentes estados da interface podem aumentar o número de testes muito rapidamente. Confira a seguir algumas maneiras de verificar uma parte da interface do app:

  • Sobre temas diferentes
  • Usar tamanhos de fonte diferentes
  • Em diferentes tamanhos ou limites de tela

Se você fizer isso para cada componente, layout e tela do app, você terá milhares de arquivos de captura de tela, a maioria dos quais não oferece nenhum feedback extra.

Por exemplo, se você quiser testar um botão personalizado com temas claros e escuros e com três tamanhos de fonte, não é necessário criar combinações de todos eles. Em vez disso, escolha apenas um dos temas. Isso ocorre porque a maneira como o botão reage a palavras longas não afeta o tema.

Você pode omitir algumas combinações de propriedades da interface.
Figura 3. É possível omitir algumas combinações de propriedades da interface.

Armazenar imagens de referência

As imagens de referência (ou douradas) geralmente são arquivos PNG que podem ser verificados no controle de origem. No entanto, o Git e a maioria dos gerenciadores de controle de origem são otimizados para arquivos de texto, não para arquivos binários grandes.

Você tem três opções para gerenciar esses arquivos:

  • Continuar usando o git, mas tentando minimizar o uso de armazenamento.
  • Use o Git LFS.
  • Use um serviço de nuvem para gerenciar as capturas de tela.

Diferenças de plataforma

Os testes de captura de tela dependem de APIs de plataforma de baixo nível para desenhar recursos específicos, como texto ou sombras, e as plataformas podem implementá-los de maneiras diferentes. Se você desenvolver em um Mac e salvar novas capturas de tela tiradas localmente, talvez os testes fiquem corrompidos em uma máquina de CI do Linux.

Há duas maneiras de contornar o problema:

  • Tolerar pequenas mudanças
  • Fazer capturas de tela em um servidor

Tolerar pequenas mudanças

É possível configurar a maioria das bibliotecas de teste de capturas de tela para permitir pequenas diferenças ao comparar duas capturas de tela.

Há duas abordagens para isso:

  • Configure uma tolerância com base em uma porcentagem de pixels modificados ou em uma porcentagem da diferença total nos valores de pixels.
  • Use uma diferença inteligente, o algoritmo que compara as capturas de tela, para verificar semelhança estrutural e semântica em vez de pixels.

A desvantagem dessa abordagem é que ela pode criar falsos positivos e não detectar erros abaixo do limite ou considerados erroneamente semelhantes o suficiente.

Fazer capturas de tela em um servidor

Para usar um comparador de captura de tela perfeito, você precisa garantir que seus testes façam capturas de tela nas mesmas condições. Para fazer isso, use seu sistema de integração contínua (CI) ou um serviço de nuvem.

Por exemplo, é possível criar uma etapa no fluxo de trabalho de CI que faça o seguinte:

  1. Executa os testes de captura de tela (somente necessário quando não se usa a correspondência perfeita de pixels).
  2. Registra novas capturas de tela se a etapa anterior falhar.
  3. Confirma os novos arquivos na ramificação.
Alt Text: Diagrama mostrando como fazer capturas de tela no CI
Figura 4. Diagrama mostrando como fazer capturas de tela no CI

Com essa abordagem, os testes de captura de tela nunca falham no CI, mas modificam a mudança para você. Dessa forma, você e os revisores de mudanças podem aceitar as novas capturas de tela mesclando a mudança.

Ferramentas de teste de capturas de tela

Considere as seguintes diferenças entre as ferramentas e bibliotecas disponíveis para testes de captura de tela:

  • Ambiente: testes locais executados no host ou testes instrumentados executados em um emulador ou dispositivo.
  • Motor de renderização: as soluções de captura de tela do host podem usar o Layoutlib, o mecanismo de renderização do Android Studio para visualizações, ou o Robolectric Native Graphics (RNG).
    • Os frameworks baseados em Layoutlib se concentram na renderização de componentes estáticos, usando estados diferentes para mostrar comportamentos distintos. Eles geralmente são mais fáceis de usar.
    • Frameworks que se integram ao RNG podem usar todos os recursos do Robolectric, permitindo testes com um escopo maior.