Testes de GUI: Casos de teste e exemplos de interface do usuário

Para entender os testes de interface gráfica (GUI), vamos primeiro entender o que é uma GUI.

O que é GUI?

Existem dois tipos de interfaces para um aplicativo de computador. Interface de linha de comando é onde você digita texto e o computador responde a esse comando. GUI significa Interface Gráfica do Usuário, onde você interage com o computador usando imagens em vez de texto.

A seguir estão os elementos GUI que podem ser usados ​​para interação entre o usuário e a aplicação:

O teste de GUI é uma validação dos elementos acima.

O que é teste de GUI?

Teste de GUI é um tipo de teste de software que verifica a interface gráfica do usuário do software. O objetivo do teste de interface gráfica do usuário (GUI) é garantir que as funcionalidades do aplicativo de software funcionem de acordo com as especificações, verificando telas e controles como menus, botões, ícones, etc.

A interface gráfica do usuário (GUI) é o que o usuário vê. Visite guru99.com e a página inicial que aparece é a GUI do site. O código-fonte permanece oculto; apenas a interface é visível. Portanto, os testes de GUI se concentram na estrutura do design e na renderização correta das imagens.

Na captura de tela acima, o teste da interface gráfica começa confirmando que todas as imagens estão completamente visíveis em diferentes navegadores. As verificações restantes nessa mesma página são:

• Os links estão disponíveis e cada botão funciona ao ser clicado.
• Redimensionar a tela nunca faz com que as imagens ou o texto diminuam, sejam cortados ou se sobreponham.
• Nada no layout se desfaz quando a janela do navegador é reduzida.

💡 Dica: Execute a mesma página nas resoluções 1920×1080, 1366×768 e 375×812 antes de registrar qualquer defeito. Muitos relatórios de "layout quebrado" são simplesmente pontos de interrupção não testados.

Necessidade de teste de GUI

Agora que o conceito básico de teste de GUI está claro, as poucas perguntas que surgirão em sua mente serão:

• Por que fazer testes de GUI?
• É realmente necessário?
• Testar a funcionalidade e a lógica de um aplicativo não é suficiente por si só? E por que gastar tempo extra na interface?

Para obter a resposta, pense como um usuário e não como um testador. Um usuário não tem conhecimento de como o aplicativo foi construído. É a interface que decide se o usuário continua usando o aplicativo ou o abandona.

Um usuário comum observa primeiro o design e a aparência do aplicativo, bem como a facilidade de compreensão da interface. Se um usuário não se sentir confortável com a interface ou achar o aplicativo complexo de entender, ele nunca mais voltará. Portanto, a interface gráfica do usuário (GUI) é um ponto crucial, e testes adequados devem ser realizados para garantir que ela esteja livre de erros.

Tipos de Teste de GUI

Entender por que a interface é importante é apenas metade da história. Os testes de interface gráfica (GUI) são uma família de cinco tipos, e cada um responde a uma pergunta diferente sobre a mesma tela.

• Testes funcionais de interface gráfica do usuário (GUI): Confirma que cada controle cumpre o que promete. Estreitamente relacionado a teste funcionalEle pergunta se um botão envia o conteúdo, se um menu suspenso filtra e se um campo aceita entradas válidas.
• Testando usabilidade: Mede a facilidade com que uma pessoa real completa uma tarefa. Testando usabilidade Analisa a profundidade da navegação, a legibilidade e se as mensagens de erro são realmente úteis.
• Teste de compatibilidade: Repete as mesmas telas em diferentes navegadores, sistemas operacionais e tamanhos de tela. Teste de navegador cruzado Detecta falhas de renderização que aparecem apenas em um dos motores.
• Testes de acessibilidade: Verifica a navegação por teclado, os rótulos do leitor de tela e o contraste de cores em relação às diretrizes WCAG. Teste de acessibilidade Agora é um requisito de conformidade em muitos mercados, e não um extra opcional.
• Testes visuais e de desempenho: Compara capturas de tela renderizadas com uma linha de base e mede a velocidade com que a interface é renderizada e responde, além da sobreposição.ping com as teste de performance.

A maioria das equipes utiliza todos os cinco recursos, mas atribui pesos diferentes a eles: um site público prioriza a compatibilidade e a acessibilidade, enquanto um painel interno se concentra em verificações funcionais.

O que você verifica nos testes de interface gráfica?

A lista de verificação a seguir garantirá testes de GUI detalhados em testes de software.

• Verifique todos os elementos da GUI quanto ao tamanho, posição, largura, comprimento e aceitação de caracteres ou números. Por exemplo, você deve ser capaz de fornecer entradas para os campos de entrada.
• Verifique se você pode executar a funcionalidade pretendida do aplicativo usando a GUI
• Verifique se as mensagens de erro são exibidas corretamente
• Verifique a demarcação clara de diferentes seções na tela
• Verifique se a fonte usada em um aplicativo é legível
• Verifique se o alinhamento do texto está correto
• Verifique se a cor da fonte e as mensagens de aviso são esteticamente agradáveis
• Verifique se as imagens têm boa clareza
• Verifique se as imagens estão devidamente alinhadas
• Verifique o posicionamento dos elementos da GUI para diferentes resoluções de tela.

Técnicas de teste de GUI

Uma vez que a lista de verificação esteja pronta, a próxima decisão é como executá-la. Técnicas de teste de GUI pode ser categorizado em três partes:

Teste Baseado Manual

Sob esta abordagem, as telas gráficas são verificadas manualmente pelos testadores em conformidade com os requisitos estabelecidos no documento de requisitos de negócios.

Gravar e reproduzir

O teste de interface gráfica do usuário (GUI) pode ser realizado usando ferramentas de automação. Isso é feito em duas partes. Durante a gravação, as etapas de teste são capturadas pela ferramenta de automação. Durante a reprodução, as etapas de teste gravadas são executadas no aplicativo em teste. Exemplos de tais ferramentas incluem: QTP.

Teste Baseado em Modelo

Um modelo é uma descrição gráfica do comportamento de um sistema. Ele nos ajuda a entender e prever o comportamento do sistema. Os modelos auxiliam na geração de casos de teste eficientes, utilizando os requisitos do sistema. O diagrama abaixo mostra como um modelo orienta a geração de testes:

Os seguintes aspectos devem ser considerados para este teste baseado em modelo:

• Construa o modelo
• Determinar entradas para o modelo
• Calcule a saída esperada para o modelo
• Execute os testes
• Compare o resultado real com o resultado esperado
• Uma decisão sobre ações futuras no modelo

Algumas das técnicas de modelagem das quais os casos de teste podem ser derivados:

• Gráficos – Descreve o estado de um sistema e verifica o estado após alguma entrada.
• Tabelas de Decisão – Tabelas usadas para determinar resultados para cada entrada aplicada

O teste baseado em modelo é uma técnica em evolução para gerar casos de teste a partir dos requisitos. Sua principal vantagem, em comparação com os dois métodos acima, é que ele pode determinar estados indesejáveis ​​que sua GUI pode atingir.

Testes de GUI manuais versus automatizados

Duas dessas três técnicas são manuais e uma é automatizada, o que levanta a questão prática de onde cada uma se encaixa. Teste manual Coloca um ser humano em frente à tela, então detecta fluxos de trabalho desajeitados, frases mal formuladas e animações que parecem erradas — julgamentos que nenhum roteiro consegue fazer.

Teste automatizado A repetição das mesmas interações milhares de vezes sem fadiga torna essa a solução ideal para caminhos de regressão estáveis ​​e para replicar um conjunto de testes em diversos navegadores. A desvantagem é a manutenção: scripts de interface gráfica automatizados podem apresentar problemas sempre que um localizador ou layout é alterado. Portanto, a maioria das equipes mais experientes adota uma abordagem híbrida, automatizando as tarefas repetitivas e reservando pessoas para as atividades que envolvem interação.

Fator	Teste manual de GUI	Teste automatizado de interface gráfica do usuário
Melhor para	Novas telas, verificações exploratórias, aparência e sensação.	Conjuntos de testes de regressão estáveis, execuções em vários navegadores.
Velocidade por ciclo	Lento, limitado pelas horas de teste	Rápido, funciona sem supervisão durante a noite.
Custo inicial	Baixo	Alto (configuração de scripts e frameworks)
Manutenção	Nenhuma além de atualizar a lista de verificação.	Isso é significativo quando a interface muda.
Identifica questões subjetivas	Sim	Não

Exemplo de casos de teste de teste de GUI

O teste de GUI envolve basicamente

1. Testando o tamanho, posição, largura, altura dos elementos.
2. Teste das mensagens de erro que estão sendo exibidas.
3. Testando as diferentes seções da tela.
4. Teste da fonte, seja ela legível ou não.
5. Teste da tela em diferentes resoluções com a ajuda de aumentar e diminuir o zoom como 640 x 480, 600×800, etc.
6. Testar o alinhamento dos textos e outros elementos como ícones, botões, etc. estão no lugar adequado ou não.
7. Testando as cores das fontes.
8. Testando as cores das mensagens de erro, mensagens de aviso.
9. Testando se a imagem tem boa clareza ou não.
10. Testando o alinhamento das imagens.
11. Teste de ortografia.
12. O usuário não deve ficar frustrado ao usar a interface do sistema.
13. Testando se a interface está emtracativo ou não.
14. Teste das barras de rolagem de acordo com o tamanho da página, se houver.
15. Teste dos campos desabilitados, se houver.
16. Teste do tamanho das imagens.
17. Testar os títulos se estão devidamente alinhados ou não.
18. Teste da cor do hiperlink.

Demonstração: como fazer teste de GUI

A lista acima fica muito mais clara quando aplicada a uma tela real, portanto, aqui usaremos alguns exemplos de casos de teste para a seguinte caixa de diálogo.

A seguir, apresentamos um exemplo de casos de teste, que consiste em cenários de teste de interface do usuário e usabilidade. Se você é iniciante na criação de casos de teste, consulte [link para o guia]. Como escrever casos de teste em primeiro lugar.

Caso de teste 01 – Verifique se a caixa de texto com o rótulo “Pasta de origem”está alinhado corretamente.

Caso de teste 02 – Verifique se a caixa de texto com o rótulo “Pacote”está alinhado corretamente.

Caso de teste 03 – Verifique se a etiqueta contém o nome “Explorar”É um botão localizado no final do TextoBox com o nome “Pasta de origem. "

Caso de teste 04 – Verifique se a etiqueta contém o nome “Explorar”É um botão localizado no final do TextoBox com o nome “Pacote. "

Caso de teste 05 – Verifique se a caixa de texto com o rótulo “Nome”está alinhado corretamente.

Caso de teste 06 – Verifique se o rótulo “Modificadores”consiste em 4 botões de opção com o nome público, padrão, privado, protegido.

Caso de teste 07 – Verifique se o rótulo “Modificadores”Consiste em 4 botões de opção que estão alinhados corretamente em uma fileira.

Caso de teste 08 – Verifique se o rótulo “Superclasse”sob o rótulo“Modificadores”Consiste em um menu suspenso que deve estar devidamente alinhado.

Caso de teste 09 – Verifique se o rótulo “Superclasse”consiste em um botão com o rótulo“Explorar”Nele, que deve estar devidamente alinhado.

Caso de teste 10 – Verifique se, ao clicar em qualquer botão de opção, o ponteiro padrão do mouse é alterado para o ponteiro de mão.

Caso de teste 11 – Verificar se o usuário não pode digitar na lista suspensa de “Superclasse. "

Caso de teste 12 – Verificar se um erro apropriado deve ser gerado caso algo tenha sido escolhido incorretamente.

Caso de teste 13 – Verifique se o erro deve ser gerado na cor VERMELHA sempre que necessário.

Caso de teste 14 – Verifique se os rótulos corretos estão sendo usados ​​nas mensagens de erro.

Caso de teste 15 – Verifique se os botões de opção individuais devem estar selecionados por padrão em todas as ocasiões.

Caso de teste 16 – Verifique se a tecla TAB está funcionando corretamente durante o salto.ping em outro campo ao lado do anterior.

Caso de teste 17 – Verifique se todas as páginas contêm o título correto.

Caso de teste 18 – Verifique se o texto da página está devidamente alinhado.

Caso de teste 19 – Verifique se, após a atualização de qualquer campo, uma mensagem de confirmação adequada é exibida.

Caso de teste 20 – Verifique se apenas um botão de opção deve ser selecionado e se mais de uma caixa de seleção pode ser marcada.

Desafios em testes de GUI

Redigir esses casos é simples; mantenhaping Eles continuam ativos por várias versões, não. Em Engenharia de Software, o problema mais comum ao fazer isso é... Teste de regressão é que a GUI do aplicativo muda com frequência. É muito difícil testar e identificar se é um problema ou uma melhoria. O problema se manifesta quando você não possui nenhum documento relacionado às alterações da GUI.

⚠️ Aviso: Scripts que localizam elementos por coordenadas de tela ou por IDs gerados automaticamente falharão na próxima compilação. Trate uma estratégia de localização como parte do design, não como uma solução posterior.

Ferramentas de teste de GUI

As ferramentas certas absorvem grande parte dessa turbulência. A seguir, uma lista das mais populares. Ferramentas de teste de GUI :

1. Selenium
2. QTP
3. Cucumber
4. Teste de Seda
5. TestComplete
6. Testador de GUI Squish

Clique aqui para aprender Selenium, QTP & Cucumber.

A seguir estão as ferramentas de código aberto disponíveis para conduzir testes de UI automatizados.

Produto	Licenciado sob
AutoHotkey	GLP
Selenium	apache
Sikuli	MIT
Estrutura do robô	apache
Água	BSD
Kit de ferramentas Dojo	BSD

Sikuli É baseado em imagens, útil quando o controle não possui um localizador confiável; Selenium continua sendo o padrão para teste de aplicação web.

Perguntas Frequentes