Teste de modo escuro, outros idiomas, outras telas: um único teste para todas as variações
Teste de modo escuro sem copiar o teste: mantenha um único teste que passa no modo claro e escuro, em cada idioma e em cada tela.
Para testar o modo escuro, outros idiomas e outras telas sem copiar o teste, mantenha um único teste cujas asserções tenham uma versão por variação.Uma execução escolhe a variação, e as etapas continuam as mesmas.
É um dos problemas mais comuns da automação de testes.Um teste passa no modo claro na sua máquina e depois falha no modo escuro, em francês ou no notebook de um colega, sem que nada esteja quebrado.
Por que um teste falha no modo escuro quando nada está quebrado?
Definição
Um teste faz duas coisas: faz o que um usuário faz e verifica o que a tela mostra.
- O que ele faz é igual em todas as variações.
O que ele verifica não, porque uma tela correta tem outro visual no modo escuro, em outro idioma ou em outra tela, e uma asserção que espera um único visual reprova os outros.
No GUI Test Studio, o que uma asserção espera é o alvo visual de uma Asserção visual, o texto esperado de uma Asserção textual, o formato de uma Asserção textual dinâmica ou a disposição de uma Asserção de layout.A gravação dá a cada asserção o seu primeiro visual esperado, chamado de padrão.
Modo escuro, outro idioma, outra tela: o que muda em uma tela correta
A mesma tela pode, com razão, ter outro visual.O aplicativo não está quebrado, ele é exibido em outra variação, e uma asserção com uma única versão não consegue perceber a diferença.
| Variação | O que muda em uma tela correta |
|---|---|
| Modo escuro e alto contraste | Cada fundo, cor de texto e ícone muda, então cada imagem difere do visual claro. |
| Outro idioma | As palavras ficam mais longas ou mais curtas, os botões crescem, as linhas quebram, e um idioma da direita para a esquerda espelha o layout. |
| Outra tela | Um notebook com escala de 150 % e um monitor 4K com 100 % desenham o mesmo botão com outros pixels. |
| Outra versão do Windows | Fontes, cantos, sombras e barras de rolagem diferem entre o Windows 10 e o Windows 11. |
| Outra edição do seu aplicativo | As cores e o logotipo de um cliente white label, ou um recurso que só alguns planos mostram. |
Por que copiar o teste para cada variação não se sustenta
Quando uma tela correta continua falhando em uma variação, as equipes costumam recorrer a um de três atalhos.
Uma cópia por variação
Uma mudança no fluxo é feita quatro vezes.
Um único teste
Teste de checkout
Uma mudança no fluxo é feita uma única vez.
| O atalho | O que ele custa |
|---|---|
| Uma cópia do teste por variação | Cada mudança no fluxo de trabalho é feita duas, três ou cinco vezes, e as cópias vão se distanciando. |
| Uma asserção mais frouxa | Uma asserção frouxa o bastante para aceitar o visual escuro também aceita um ícone ausente ou uma cor errada no claro. |
| Nenhuma asserção visual nessa variação | O teste ainda clica em tudo, mas um texto preto sobre um fundo escuro é lançado sem que ninguém perceba. |
Uma asserção mais frouxa não distingue um novo visual intencional de um bug.Só um visual esperado para essa variação consegue.
Por que um teste aprovado ainda pode deixar passar o que os usuários veem é o tema de bugs visuais que os seus testes automatizados deixam passar.Por que uma asserção que falha sem motivo é pior do que nenhuma asserção está em testes instáveis e falsos positivos.
O que é preciso em um framework de testes com código
Em um framework com código como Playwright, Selenium ou Cypress, cabe a você construir e manter as variações no código.
| O que você mantém | Em um framework com código | No GUI Test Studio |
|---|---|---|
| As imagens esperadas | Uma pasta de capturas de referência para cada tema, idioma e navegador, guardada ao lado do código dos testes. | Dentro do único arquivo do teste, como uma versão por variação de cada asserção. |
| Trocar de variação | Uma configuração ou código que se ramifica conforme o tema ou o idioma. | Um perfil escolhido para a execução. |
| As palavras digitadas em cada idioma | Dados de teste por idioma, ligados ao código dos testes. | Uma versão da etapa Texto digitado para esse idioma. |
| Um novo visual após uma mudança intencional | Uma execução com uma opção como --update-snapshots e depois uma revisão dos arquivos alterados. | Aceitar o novo visual no relatório, com um clique, e depois Salvar. |
A ideia é a mesma: uma variação, um conjunto de expectativas.O que muda é quanto você escreve e mantém para chegar lá.
Um único teste para todas as variações: os perfis de linha de base
O GUI Test Studio, que automatiza testes de ponta a ponta no Windows sem código, guarda cada versão dentro do teste.Você nomeia suas variações como perfis de linha de base, por exemplo Modo escuro, Francês, Monitor 4K ou Windows 10.Cada asserção pode então guardar uma versão do que espera por perfil, ao lado da padrão.
Uma asserção visual
Padrão
como foi gravado
Modo escuro
um perfil que você adiciona
Francês
um perfil que você adiciona
Comum a todas as versões
| Termo | Significado |
|---|---|
| Padrão | O que foi gravado.Ele pode ser renomeado, mas nunca removido, e toda execução o usa, a menos que você escolha um perfil. |
| Perfil de linha de base | Uma variação com nome que você adiciona ao teste.Ela é só um nome até que as asserções tenham suas versões. |
| Versão | O visual esperado de uma asserção para um perfil: uma imagem, um texto, um formato ou uma disposição. |
Todo tipo de asserção pode guardar versões: asserções visuais, asserções textuais, asserções textuais dinâmicas e asserções de layout.Em uma asserção de grupo, cada membro guarda as suas.Veja o guia de linhas de base para todas as janelas envolvidas.
O que muda de uma variação para outra, e o que nunca muda
Um perfil muda o que uma asserção espera.Ele nunca muda a maneira como a asserção procura isso.
| Asserção | A versão de um perfil guarda | Comum a todas as versões |
|---|---|---|
| Asserção visual | O alvo visual dela, a imagem que ela procura. | A área de busca, o tempo limite e o rigor da verificação. |
| Asserção textual | O texto esperado, a precisão dele e a diferenciação de maiúsculas e minúsculas. | A área de busca e o tempo limite. |
| Asserção textual dinâmica | O formato do texto que ela aguarda. | A área de busca e o tempo limite. |
| Asserção de layout | Os elementos e a disposição deles. | A área de busca e o tempo limite. |
Testar um aplicativo em vários idiomas: as etapas também mudam
Um teste em outro idioma muitas vezes precisa de mais do que outras imagens.Ele digita outras palavras, abre outro endereço ou envia outro arquivo.Por isso, cada etapa do teste pode guardar a versão de um perfil para o que ela faz, enquanto o lugar dela na tela e o momento dela continuam comuns.
| Etapa | Padrão | Perfil Francês |
|---|---|---|
| Texto digitado | Hello, I need help | Bonjour, j'ai besoin d'aide |
| Pressionamento de tecla | Ctrl+B | Ctrl+G |
| Abrir aplicativo web | shop.example.com/en | shop.example.com/fr |
| Enviar arquivo | invoice.pdf | facture.pdf |
| Executar aplicativo | Setup.exe | Setup.exe /lang=fr |
Um atalho também pode mudar: no Microsoft Word em francês, o negrito é Ctrl+G em vez de Ctrl+B, então a etapa Pressionamento de tecla guarda uma versão em francês.
O padrão digita uma mensagem em inglês e espera a confirmação em inglês.No perfil Francês, a mesma etapa Texto digitado digita a mensagem em francês, e a asserção textual espera a confirmação em francês.Um teste, dois idiomas, e uma mudança no fluxo de trabalho é feita uma única vez.
Como uma asserção textual lê e compara um texto é explicado em Asserções textuais.
Como adicionar o modo escuro a um teste existente, passo a passo
A maneira mais rápida de preencher um perfil é uma execução nele.As asserções com aparência diferente falham, você as revisa e fica com as que estão certas.
Executar
No perfil
Revisar
Cada asserção reprovada
Aceitar
Para esse perfil
Salvar
No teste
- 1
Dê nome ao perfil
Em Configurações, Configurações do projeto, adicione um perfil de linha de base chamado Modo escuro no cartão Perfis de linha de base.Um perfil é apenas um nome até que as asserções dele recebam as suas versões.
- 2
Execute o teste no perfil
Coloque o seu aplicativo no modo escuro.Na página do teste no GUI Test Runner-Recorder, escolha Modo escuro na linha Linha de base e depois clique em Executar teste.
A linha Linha de base escolhe o perfil da próxima execução, e a escolha fica lembrada para esse teste. - 3
Revise cada asserção reprovada
As asserções ainda comparam com o visual claro, então as que têm aparência diferente falham.Abra cada uma no Relatório de confiança e decida se o visual escuro está certo.
- 4
Aceite os visuais escuros que estão certos
Clique em Aceitar o obtido como linha de base para Modo escuro em cada asserção que você revisou.O visual claro padrão continua como estava.
Em uma execução em um perfil, o botão Aceitar arquiva o novo visual nesse perfil. - 5
Salve e execute de novo
Salve as mudanças do relatório no teste e execute-o mais uma vez no Modo escuro.Agora cada asserção compara com a sua própria versão escura.
Ou capture a versão no GUI Test Studio
Selecione uma asserção, abra a guia Linhas de base e selecione o perfil.Todos os campos do painel Propriedades passam a mostrar a versão desse perfil, e uma edição do que a asserção espera vai para ela.Capturar... inicia uma captura de tela com a região da asserção desenhada onde ela estava, e Capturar a mesma região obtém a imagem do perfil exatamente desse lugar.
Você também pode pedir ao seu assistente de IA para adicionar um perfil ou capturar uma versão, com Criar um teste a partir de um prompt.
Quando o aplicativo muda de propósito: aceite o novo visual com um clique
Um novo visual é aceito quando o aplicativo muda de propósito.Aceite só o que você revisou e mantenha um caminho de volta.
| Quando | O que fazer no GUI Test Studio |
|---|---|
| Uma asserção falhou e o novo visual está certo | Aceite o resultado obtido no Relatório de confiança.Ctrl+Z desfaz isso até você salvar. |
| O elemento não foi encontrado | Aceite a região mais parecida dele, o lugar mais próximo encontrado, como o novo visual esperado. |
| Um texto mudou de propósito | Edite o texto esperado no relatório.Em um perfil, a edição é salva como a versão desse perfil. |
| O novo visual passa a ser o principal | Definir como padrão transforma a versão de um perfil no padrão e guarda o padrão antigo nesse perfil. |
| Um perfil é renomeado ou removido | Faça isso em Configurações do projeto: todas as asserções do teste acompanham. |
Atualizar um teste após uma mudança mostra passo a passo como aceitar no relatório, e o Relatório de confiança explica tudo o que ele mostra.
Executar cada variação em CI/CD
Esta execução
Linha de base: Modo escuro
Botão Salvar · Asserção visual
a versão dela para Modo escuro
Total do pedido · Asserção textual
a versão dela para Modo escuro
Logotipo da empresa · Asserção visual
ainda sem versão para Modo escuro: o padrão é usado, e o relatório informa isso
Uma execução usa um perfil.No GUI Test Runner-Recorder, ele é escolhido na linha Linha de base da página do teste.Em um agente de build, o gtr-cli recebe --baseline-profile seguido do nome do perfil.
gtr-cli run tests\Checkout.GTS --junit results\default.xml
gtr-cli run tests\Checkout.GTS --baseline-profile "Dark mode" --junit results\dark.xml
gtr-cli run tests\Checkout.GTS --baseline-profile "French" --junit results\french.xml- Uma asserção sem versão para o perfil compara com o seu padrão, e o relatório diz qual perfil a execução usou e quantas asserções tinham uma versão para ele.
- Um nome de perfil que o teste não tem executa o padrão, e o gtr-cli avisa isso e lista os perfis que o teste tem.
- O histórico de execuções guarda o perfil que cada execução usou.
Executar testes no seu pipeline lista todas as opções do gtr-cli.
Navegadores e dispositivos são tratados de outra forma
Um teste web não precisa de um perfil por navegador ou dispositivo: o GUI Test Runner-Recorder gera uma versão do teste gravado para o Chrome, o Edge, o Firefox e celulares e tablets emulados, com imagens recortadas de cada um.Veja testes entre navegadores a partir de uma gravação.
Os perfis de linha de base servem para o que muda o visual do mesmo aplicativo no mesmo tipo de tela: um tema, um idioma, uma escala, uma versão do Windows ou uma edição do seu aplicativo.Isso funciona igualmente para aplicativos de desktop, aplicativos web, jogos e celulares.
O que saber antes de começar
| Limite | O que significa |
|---|---|
| Um perfil por execução | Duas variações são duas execuções.Um pipeline executa o teste uma vez por perfil. |
| Uma área de busca comum | Não existe área de busca por perfil.Se um elemento fica bem longe em uma variação, amplie a área de busca da asserção. |
| Nenhum conjunto por branch de código | Não há conjuntos separados de visuais esperados por branch de código.Para preparar um novo visual antes de lançá-lo, preencha um perfil a partir de execuções e depois use Definir como padrão no lançamento. |
Principais conclusões
- 1Um teste que espera um único visual reprova uma tela correta no modo escuro, em outro idioma, em outra escala ou em outra versão do Windows.
- 2Cópias e asserções mais frouxas não se sustentam: as cópias se distanciam, e uma asserção mais frouxa esconde bugs reais.
- 3O GUI Test Studio guarda cada variação dentro de um único teste, uma versão por perfil de linha de base, para cada asserção e cada etapa.
- 4Onde procurar, quanto tempo aguardar e quão rigorosa ser continuam compartilhados, então nenhuma variação deixa o teste mais tolerante.
- 5Uma execução escolhe uma variação, e um novo visual vem de aceitar um resultado revisado no Relatório de confiança.
Perguntas
Por que meu teste automatizado falha no modo escuro?
Porque ele espera o visual claro.Cada asserção que compara uma imagem da tela vê outras cores no modo escuro e falha, embora o aplicativo funcione.A solução não é uma asserção mais frouxa, mas uma versão escura do que cada asserção espera.
Como testar o modo escuro e o modo claro com o mesmo teste?
Mantenha um único teste e dê a ele um perfil de linha de base Modo escuro.Execute-o uma vez com o padrão e uma vez com Modo escuro: as etapas são as mesmas, e cada asserção compara com o visual da variação em execução.
Como testar um aplicativo em vários idiomas sem copiar o teste?
Dê ao teste um perfil por idioma.No perfil Francês, uma Asserção textual espera as palavras em francês, uma Asserção visual a imagem em francês, e uma etapa Texto digitado digita a entrada em francês.Uma mudança no fluxo é então feita uma única vez para todos os idiomas.
Por que meus testes falham em outra resolução de tela ou escala?
Um notebook com escala de 150 % e um monitor 4K a 100 % desenham o mesmo botão com outros pixels, então uma imagem tirada em um não corresponde exatamente ao outro.Adicione um perfil para essa tela e aceite o visual dela uma vez, a partir de uma execução que você revisou.
O que acontece quando uma asserção não tem versão para a variação que executo?
Ela compara com o seu padrão, o visual que foi gravado.O Relatório de confiança diz qual perfil a execução usou e quantas asserções tinham uma versão para ele, então uma falha causada por uma versão ausente é fácil de reconhecer.
Como atualizo o visual esperado após uma mudança intencional?
Revise primeiro a asserção que falhou e aceite o novo visual só se a mudança foi intencional.No GUI Test Studio, o botão Aceitar do Relatório de confiança faz isso para uma asserção, de forma reversível, e Salvar grava no teste, no perfil que a execução usou.
Posso executar cada variação em um pipeline de CI/CD?
Sim, uma execução por perfil.O gtr-cli recebe --baseline-profile seguido do nome do perfil, então um pipeline executa o teste uma vez com o padrão e uma vez por perfil, cada uma com os seus próprios resultados.
Devo criar um perfil para cada navegador?
Não para um teste web.O GUI Test Studio gera uma versão de um teste web gravado para o Chrome, o Edge, o Firefox e celulares e tablets emulados, com imagens recortadas de cada um.Os perfis de linha de base servem para o que muda o visual do mesmo aplicativo: um tema, um idioma, uma tela ou uma versão do Windows.
Playwright, Selenium, Cypress, Microsoft Word e Windows são marcas de seus respectivos proprietários.
Continue lendo
Todos os artigos
Testes visuais
Teste de capturas de tela pixel perfect: por que ele falha e o que pega os bugs visuais reais
12 min de leitura
Testes visuais
Bugs visuais que os seus testes automatizados deixam passar: como testar o que os usuários veem
10 min de leitura
Automação de testes
Teste manual vs. teste automatizado: por que o teste manual fica aquém nos testes de ponta a ponta
15 min de leitura