Testar um recurso antes que ele exista
Importe imagens da sua ferramenta de design e prepare o teste enquanto o recurso ainda está sendo desenvolvido.
Por que testar antes que exista
Desenvolvimento orientado a testes a partir do design, no Figma ou em qualquer outra ferramenta: o teste existe antes da funcionalidade.As imagens que os designers já fizeram mostram como a tela deve ficar, e uma asserção só precisa de uma imagem do que esperar.
Assim, o teste fica pronto no dia em que a funcionalidade é construída.A primeira execução diz à equipe, elemento por elemento, se o que foi construído corresponde ao que foi projetado.
A ideia em quatro etapas
Exportar
Botões, ícones e telas da ferramenta de design, como imagens
Importar
Para os Arquivos de conteúdo do teste
Compor
Distribua as imagens na faixa Referência visual
Verificar
Adicione uma asserção para cada elemento que importa
Importe as imagens do design
Exporte os elementos de qualquer ferramenta de design, como Figma, Sketch, Adobe XD ou Photoshop, como imagens PNG: uma tela inteira, ou elementos isolados como um botão, um ícone ou um logotipo.Exporte-os no tamanho que terão na tela.
- 1
Clique em Importar mídia
Na barra de ferramentas do GUI Test Studio, ou em Arquivo, Importar mídia.Escolha as imagens: elas aparecem em Imagens nos Arquivos de conteúdo.
- 2
Dê nomes claros a elas
Clique com o botão direito em uma imagem e escolha Renomear..., ou pressione F2: “Botão Finalizar compra”, “Ícone do carrinho”.Os nomes acompanham o teste.
Monte a tela na Referência visual
A faixa Referência visual é o que você vê na visualização em cada momento.Normalmente ela contém uma gravação, mas contém imagens da mesma forma.Arraste uma imagem dos Arquivos de conteúdo para ela: a imagem vira um clipe que você pode mover e esticar, como um slide em uma apresentação.
Coloque várias imagens uma depois da outra para contar a história da futura funcionalidade como uma colagem: a tela da lista, depois a caixa de diálogo que se abre, depois a confirmação.
Adicione as asserções
- 1
Arraste uma asserção até o momento da imagem dela
Da paleta Asserções para a faixa Asserções, sob a imagem a que ela pertence.
- 2
Mostre a ela o que buscar
Abra o editor da asserção.O quadro que ele mostra é a imagem do design: desenhe um retângulo em volta do elemento para uma asserção visual, ou marque as palavras para uma asserção textual.No Editor de alvo visual, também é possível arrastar a imagem de um único elemento direto dos Arquivos de conteúdo para dentro do editor.
- 3
Adicione as ações entre elas
Arraste cliques e digitação da paleta Eventos, ou grave-os mais tarde, quando a tela existir, com Gravar novo cenário.
O designer compartilha a imagem do novo botão Exportar e da mensagem “Exportação concluída”.Você importa as duas, coloca-as na Referência visual e adiciona uma asserção visual no botão e uma asserção textual na mensagem.O teste fica esperando no repositório.No dia em que um desenvolvedor, ou um agente de programação com IA, termina a funcionalidade, o pipeline executa o teste e informa se o botão ficou como no design.
Quando a funcionalidade estiver pronta
| O que a primeira execução mostra | O que fazer |
|---|---|
| Tudo é aprovado | A funcionalidade corresponde ao design.A partir de agora, o teste a protege contra regressões. |
| Um elemento aparece diferente | Uma diferença real entre o design e o que foi construído.Crie um relatório de bug, ou aceite a nova aparência se o design mudou no caminho. |
| Um elemento não é encontrado | Verifique o tamanho: uma imagem de design exportada em uma escala diferente da tela não é encontrada.Aceite a região mais parecida que o relatório oferece, ou capture o elemento de novo na tela real. |
Teste preparado a partir do design
Funcionalidade construída
Primeira execução
Aceitar a aparência real
Uma vez
Ainda com problemas?Conte o que você estava tentando fazer, e respondemos em até um dia útil.Ask our team