Skip to main content

Visbug

VisBug

🔗 Extensão: https://chromewebstore.google.com/detail/VisBug/cdockenadnadldjbbgcallicgledbeoc

Finalidade da ferramenta

O VisBug é uma extensão de navegador utilizada pela DBSeller como ferramenta de apoio para testes de front-end, permitindo ao QA inspecionar visualmente layouts, espaçamentos, alinhamentos, estilos e acessibilidade diretamente na aplicação em execução.

A ferramenta atua como uma camada visual sobre o sistema, permitindo analisar a interface no estado real de uso, sem necessidade de acessar código ou depender exclusivamente das ferramentas de desenvolvedor.

O VisBug é especialmente útil durante:

  • testes exploratórios de front-end

  • validações visuais pós-ajuste

  • análise de responsividade e acessibilidade

Casos de uso comuns em QA

  • identificação de desalinhamentos visuais

  • verificação de espaçamentos inconsistentes

  • análise de layout em diferentes resoluções

  • inspeção rápida de estilos aplicados

  • apoio à validação de acessibilidade visual

Funcionalidades principais e como utilizar

🎯 Selecionar e inspecionar elementos

Permite apontar e selecionar qualquer elemento da página para análise visual.

Como usar:

  1. Clique no ícone do VisBug na barra de extensões.

    EP0rEbOni9.png

  2. Ative a ferramenta de seleção.

    image.png

  3. Passe o mouse sobre o elemento desejado.

  4. Clique para selecionar.

Uso em QA:

  • identificar elementos fora do padrão visual

  • verificar se o componente correto está sendo exibido

  • analisar comportamento visual em estados específicos da tela

📐 Medir espaçamentos e distâncias

Permite medir distâncias entre elementos, margens e espaçamentos internos.

Como usar:

  1. Com o VisBug ativo, selecione a opção de medição.

  2. Passe o mouse entre dois elementos.

  3. O VisBug exibirá automaticamente as distâncias.

    chrome_soaxBYtnsx.png

Uso em QA:

  • validar espaçamentos inconsistentes

  • identificar desalinhamentos entre campos, botões e textos

  • apoiar validação de layout conforme padrão visual esperado

📦 Mover e redimensionar elementos (modo visual)

Permite mover e redimensionar elementos diretamente na tela, de forma visual.

Como usar:

  1. Selecione o elemento desejado.

  2. Utilize os controles visuais para mover ou redimensionar.

    chrome_mkZe8NROqd.png

Uso em QA:

  • simular problemas de layout

  • identificar pontos onde o layout quebra

  • demonstrar visualmente um problema ao reportar um bug

⚠️ Importante:
Essas alterações são apenas visuais e temporárias. Elas não alteram o sistema real.

🎨 Editar texto e substituir imagens

Permite editar textos diretamente na tela e substituir imagens temporariamente.

Como usar:

  1. Selecione um texto ou imagem.

  2. Ative a opção de edição.

  3. Altere o conteúdo exibido.

    chrome_MyhL0QiywN.png

Uso em QA:

  • simular textos longos ou curtos

  • verificar quebra de layout com conteúdos maiores

  • validar comportamento visual com imagens diferentes

🧭 Analisar alinhamento e layout

Permite verificar alinhamento visual entre elementos da interface.

Como usar:

  1. Ative a ferramenta de alinhamento no VisBug.

  2. Selecione múltiplos elementos.

  3. Observe guias visuais e indicadores de alinhamento.

    chrome_81BEpSxP2w.png

Uso em QA:

  • validar alinhamento de formulários

  • identificar inconsistências entre componentes semelhantes

  • apoiar análise visual em telas complexas

♿ Análise básica de acessibilidade visual

Permite avaliar contraste de cores e legibilidade visual.

Como usar:

  1. Ative a opção de análise de acessibilidade.

  2. Selecione o elemento desejado.

  3. O VisBug exibirá informações de contraste.

    chrome_mqbghSjRIK.png

Uso em QA:

  • identificar textos com baixa legibilidade

  • validar contraste mínimo em botões e links

  • apoiar testes básicos de acessibilidade visual

📱 Testes de responsividade

Permite analisar o layout em diferentes tamanhos de tela.

Como usar:

  1. Utilize o redimensionamento da tela do navegador.

  2. Com o VisBug ativo, inspecione o comportamento dos elementos.

Uso em QA:

  • validar responsividade

  • identificar quebra de layout

  • analisar comportamento em resoluções menores

Limitações da ferramenta

  • não altera o código-fonte

  • alterações são temporárias

  • não valida regras de negócio

  • não substitui testes funcionais ou automatizados

O VisBug é uma ferramenta de análise visual, não de correção.

Boas práticas de uso

✔ Utilizar o VisBug como apoio visual durante testes de front-end.
✔ Sempre registrar evidências (prints ou vídeos) dos problemas identificados.
✔ Não assumir que ajustes feitos visualmente refletem o comportamento real do sistema.
✔ Utilizar em conjunto com testes funcionais e exploratórios.
✔ Evitar usar o VisBug como base para aprovação final de funcionalidades.

Papel do VisBug no processo de QA da DBSeller

O VisBug atua como uma ferramenta complementar dentro da arquitetura de QA da DBSeller, ajudando o QA a:

  • identificar problemas visuais mais rapidamente

  • comunicar falhas de layout com mais clareza

  • melhorar a qualidade das validações de front-end

Ele não substitui outras etapas do processo, mas aumenta a eficiência e a precisão da análise visual.

Back to top