GUI Testing Tutorial: a Complete User Interface (UI) Testing Guide

A Complete Guide to GUI Testing: User Interface Testing Tutorial

What is GUI Testing?

GUI Testing é um processo de teste da interface gráfica do usuário da aplicação para garantir a funcionalidade adequada conforme as especificações. Ele envolve a verificação dos componentes da aplicação como botões, ícones, checkboxes, cor, menu, windows etc.

a dinâmica Visual de uma aplicação web desempenha um papel fundamental na aceitação de uma aplicação com o utilizador.

consequentemente, esta aceitação rende em trazer uma longa escravidão de clientes com a aplicação do cliente. Nesta era de digitalização, a Interface do usuário está mudando rapidamente e possui uma fortaleza chave para atrair a nova multidão de possíveis clientes.

User Interface Testing

To ensure visual aesthetic of web application is well accepted, UI and Usability testing become a key aspect of the overall QA practice. Qualquer aplicação que possa ser acessada através de uma URL é uma aplicação baseada na Web. Em tais aplicações, testamos principalmente a extremidade dianteira da aplicação que deve ser usada pelo usuário final.

cada navegador exibe páginas web de forma diferente, por isso é importante que a página seja igual em navegadores diferentes. Se uma página web é exibida distorcida e não gerenciada, então isso levará os telespectadores a sair da página web. Assim, um site deve submeter-se a testes UI para obter melhores resultados.

o teste do navegador inclui dois tipos abaixo:

teste de funcionalidade

teste de diferentes funções ao longo da aplicação. Envolve a validação de todas as navegações, bem como todos os valores de campo que estão presentes nas primeiras páginas usando todos os cenários positivos e negativos.

UI Testing

Testing the look and feel factor of the web page. O factor aparência e comportamento inclui o tipo de ecrã, tipo de letra, alinhamento, botão de rádio, opção, etc.

• as áreas abrangidas pelos testes da IU são usabilidade, aparência & toque, controles de navegação/barras de navegação, instruções e estilo de informação técnica, imagens, tabelas, acessibilidade, etc.
• para testar a acessibilidade, temos de verificar com as orientações de acessibilidade de conteúdo W3C-Web.

Clique aqui para obter a diretriz W3C.

Approach for UI testing

we select a subset of test cases from functional test cases which covers all functionalities of the application.

a segunda etapa consiste em alterar esses casos de ensaio de acordo com os requisitos de ensaio da IU.

o próximo passo será executar esses casos de teste; comparar o resultado com os resultados esperados, e se houver alguma diferença, então levantar a questão para o mesmo. Não é possível testar em todos os navegadores. Normalmente o cliente decide em que navegador há a exigência de testar.

como sabemos que cada navegador exibe a página web de forma diferente, então não podemos esperar que todos os navegadores exibam a página web exatamente semelhante.

por exemplo, a queda no Windows-firefox será diferente do mac-firefox. Estas questões são aceitáveis, uma vez que se trata de serviços de Utilidade Pública do sistema operativo e temos de As aceitar como tal.

Navegador De Base: Normalmente a aplicação é desenvolvida visando um navegador que é esperado para ser usado principalmente pelos usuários finais, é chamado de navegador de base.

que Ocorrem Comumente UI Defeitos

• Botão de problemas de alinhamento
• Inconsistente espaço entre as etiquetas ou caixas de texto
• Quebrado etiquetas i.e. único rótulo de linha chegando exibido em duas linhas
• Desalinhamento entre caixas de texto, informações de ícones, etiquetas ou listas suspensas
• Sobreposição de campos
• Incompleta campos
• Dados na página que está desalinhado; algum tempo deslocado para cima ou para baixo
• Em qualquer navegador, enquanto estiver selecionando alguns ação, a ação correspondente não está acontecendo
• Redimensionamento não funcionar como esperado
• Sessão de tempo de validade muito curto ou muito longo para alguns navegadores
• Navegador de questões específicas de Alguns campos não são editáveis depois de introduzir dados em um navegador, mas editável em outro navegador

Chave de INTERFACE e de Usabilidade Requisitos de Teste

A chave de teste de UI requisitos da aplicação web são:

1. Disponibilidade de vários componentes em uma INTERFACE de usuário
2. Vários estados da INTERFACE do usuário do componente

Componente:

Um componente é um bloco de construção, que pode ser usado em combinação com vários outros componentes para formar um aplicativo. Os componentes podem ser reutilizados através da aplicação.

exemplos de um componente incluem botão, campo de texto, Autosuggest, Checkbox, Dropdown etc.

alguns componentes básicos

Checkbox: uma ou mais opções podem ser selecionadas a partir do componente checkbox

botões de rádio: Quando apenas uma opção Precisa de ser seleccionada, os botões de rádio são úteis

alguns componentes avançados

1. Acordeão: vários itens podem ser empilhados verticalmente usando este componente. Cada item pode ser expandido para ver o conteúdo nele. Mais de um item pode ser expandido também.

2. Pão ralado: este é um componente muito útil que ajuda na navegação do site. O usuário pode identificar sua localização atual dentro do site a partir deste componente.

3. Carrossel: Múltiplos conjuntos de itens de informação podem ser incorporados em um componente de carrossel. Os localizadores de maneira na parte inferior indicam que mais itens estão presentes. As setas ajudam na navegação dentro do carrossel. Normalmente, a navegação do carrossel é configurada como um loop contínuo.

Clique aqui para obter informações mais úteis sobre componentes IU

estados de componentes IU

a disponibilidade de componentes baseia-se exclusivamente nas Orientações relativas aos requisitos do projecto. Irá variar de um projecto para outro.

os vários estados-membros DA UE para um componente básico são::

1. não preenchidas Estado
2. Preenchido Estado e No Foco
3. Estado Normal e o Estado Padrão
4. Estado de Foco
5. Desativada Estado
6. Mascarado Estado

não preenchidas Estado:

Antes de introduzir qualquer valor em um componente, ele é dito ser um não preenchidas estado. O estado não preenchido mostra o texto da substituição, se existir. O abaixo é um componente de campo de texto.

estado preenchido:

um componente com um valor assinalado pelo Utilizador está preenchido.

Estado de foco:

o utilizador revisita um componente que já está preenchido. O componente deve exibir o cursor, indicando que o componente específico em foco

Estado Normal:

A exibição de um componente com o valor introduzido pelo utilizador no ecrã é descrito o estado normal.

estado predefinido:

um componente que mostra o valor auto-povoado do servidor / infra-estrutura. Este valor também pode ser editado pelo usuário em alguns cenários.

Hover State:

Mouse hover over the component highlights the component indicating the hover action.

Antes de Passe:

Em Foco:

Desativada Estado:

O componente estiver desactivada e o utilizador não é possível editar os campos.

Habilitado Estado

Desativada Estado

Mascarado Estado:Dados sensíveis como a senha podem ser escondidos usando este componente.

os principais requisitos de teste de usabilidade da aplicação web são::

1. família de tipos de Letra
2. Tamanho da Fonte
3. Cor
4. espaçamento de Letra
5. altura da Linha
6. Fundo de validação
7. Fill/Opacidade
8. Medições dos componentes, como comprimento, largura, e a largura
9. Localização/Espaçamento entre os elementos em uma tela de

acima recursos de Usabilidade pode ser testado no código ou usar o inspecionar elemento no aplicativo. Outra maneira mais fácil é usar add-ons. Os Add-ons podem variar com base no navegador no qual a aplicação deve ser testada.

Detalhes de vários Add-ons do Browser

Vantagens de Add-Ons:

• Economiza tempo
• Fácil de usar
• é rentável

Limitação de Add-Ons:

• erro de Paralaxe, enquanto usando de medição
• Compatível através de aplicações
• Compatível com vários navegadores

Referências para Add-Ons:

• Inspetor Web: Apple Dev Ferramentas
• Firebug: Firebug Wiki

ELE

• Colorzilla

GUI de Ferramentas de Teste

Várias ferramentas estão disponíveis no mundo da tecnologia, que iria ajudar os testadores na INTERFACE do usuário de teste.

• Selênio
• PS Unificação de Testes Funcionais
• Pepino
• INTERFACE do usuário Codificada
• Sahi

Uma lista detalhada de ferramentas GUI está disponível em softwaretestinghelp.com em si! Por favor, Clique aqui.

Exemplo de GUI Casos de Teste

1) Verifique o funcionamento do carrossel setas e forma finders
2) Certifique-se de que o campo de palavra-passe está a aceitar apenas valores em um mascarado estado
3) Verifique se o botão ‘salvar’ permanece inativo até que todos os campos necessários estão inseridos
4) Verifique se o usuário tem permissão para navegar para o topo da página, usando o “Topo” da barra de
5) Verifique que a própria mensagem é apresentada quando da aplicação de filtros de não obter qualquer resultado
6) Verificar a navegação a partir de links disponíveis em Cabeçalhos e rodapés
7) Verifique o alinhamento dos botões de rádio é precisas
8) Verificar que várias opções em caixas de seleção podem ser selecionados em um tempo
9) Certifique-se de que o título de cada seção está em negrito
10) Verificar a mudança de cor de links para clicar em

Conclusão

Um site é a alma de muitos negócios. É muito necessário ter certeza de que ele parece bem e funciona similarmente em diferentes navegadores & plataformas. Assim, o teste IU é muito importante e irá garantir uma grande base de clientes e adição em valor de Negócio.