Em alguns testes, você terá a opção de relatar bugs visuais. Bugs visuais se referem às interfaces gráficas de usuário de sites ou aplicativos, por exemplo:
Problemas de estrutura de layout, como textos/elementos desalinhados
Um problema de Design Responsivo, por exemplo, um elemento é exibido em um dispositivo móvel, mas não em outro
Textos/elementos que se sobrepõem involuntariamente
Textos/elementos que são cortados
Qualquer coisa que possa ser corrigida nos arquivos HTML ou CSS
Problemas repetitivos
Quando um problema visual ocorre repetidamente, ele só pode ser enviado uma vez, mesmo que cada ocorrência tenha um URL, link, imagem, etc. diferentes. Isso também vale se as ocorrências estiverem na mesma página ou em páginas diferentes. Um único relatório de bug deve indicar que outros URLs, links, imagens, etc., também estão envolvidos.
Relatórios de bugs individuais para cada ocorrência do problema não devem ser enviados já que serão rejeitados. O cliente só precisa de uma única referência para ser informado do problema visual. Eles investigarão o problema e o resolverão para todas as ocorrências.
Exemplos:
Alguns elementos apresentam o mesmo problema gráfico, como texto ou imagens maiores do que suas caixas.
Os campos de entrada não são grandes o suficiente para conter seus textos padrão, que por sua vez não são completamente visíveis.
Itens de conteúdo que se sobrepõem a outras partes da página.
Atualização para bug funcional
Assim que um bug visual impedir uma funcionalidade, ele deve ser relatado como um bug funcional, mesmo que não seja a própria função que esteja defeituosa.
Suponha que a funcionalidade possa ser alcançada de forma intuitiva e fácil por meio de um caminho ou opção diferente. Nesse caso, os usuários não são efetivamente impedidos de usar a funcionalidade, então o problema não pode ser enviado como um bug funcional. Ele permanece como um problema visual.
Documentação de problemas visuais
Relatórios visuais devem conter capturas de tela. Pode ser necessário uma gravação de tela adicional se uma ação causar o problema visual. Para obter mais informações sobre como os relatórios de bug devem ser documentados, visite nosso artigo Requisitos de Relatório de Bugs.
Conteúdo Responsivo vs. Não Responsivo: Os Bugs Visuais Ocultos
Bugs de responsividade podem gerar dúvidas quanto à sua categorização entre bugs de conteúdo e bugs visuais: tratam-se de problemas criados pelo design responsivo do site.
Esses problemas são menos perceptíveis quando navegamos rapidamente pelo site, até que, de repente, encontramos uma página com todas as informações necessárias, mas exibidas de forma estranha ou desalinhada. Se for esse o caso, podemos acabar deixando passar – e perder a oportunidade de reportar um bug!
Exemplo de Caso
Ao testar o design responsivo, você pode se deparar com uma situação em que uma página é exibida perfeitamente em um smartphone (como uma página de “Gêneros Populares de Séries e Filmes”), mas ao navegar para uma página de categoria (como “COMÉDIA”), o conteúdo se torna quase invisível porque os elementos ficam muito pequenos.
Como Identificar
Observe a existência de escalonamento inconsistente entre páginas
Verifique se o texto fica ilegível no tamanho da sua tela
Note se os elementos de navegação ficam pequenos demais para serem tocados
Preste atenção se o rolamento horizontal aparece em algumas páginas, mas não em outras
Teste Responsivo Online Gratuito
O Google Chrome Lighthouse (anteriormente conhecido como Google Mobile Friendly Test) pode ser uma ferramenta valiosa para garantir que as páginas da web estejam otimizadas para dispositivos móveis. Essa ferramenta pode ajudar os testadores a identificar problemas visuais em páginas da web, avaliando fatores de usabilidade móvel, como tamanho da fonte, áreas de toque (tap targets) e configuração de viewport (seção de SEO). Se você encontrar um bug visual, essa ferramenta pode ajudar a determinar se a causa raiz está relacionada à responsividade da página. Diferente do antigo Google Mobile-Friendly Test, que era executado em um site separado, o Google Chrome Lighthouse precisa ser adicionado ao navegador Google Chrome e executado diretamente no site que está sendo testado.O processo de instalação e um tutorial detalhado estão disponíveis aqui.