Seu site precisa funcionar como foi planejado quando você o construiu pela primeira vez. Caso contrário, seus usuários acabarão perdendo a confiança em sua marca, resultando em perda de receita e leads. 67% dos consumidores citam experiências ruins como motivo para a evasão. 4% dos clientes reclamam diretamente para uma empresa sobre uma experiência ruim, e 91% dos clientes insatisfeitos simplesmente irão embora sem expressar suas reclamações.

O Instituto de Ciências de Sistemas na IBM relatou que “o custo para corrigir um erro encontrado após o lançamento do produto era quatro a cinco vezes maior do que um descoberto durante o design, e até 100 vezes mais do que um identificado na fase de manutenção.”

O World Quality Report recomendou que as empresas mantenham o orçamento de QA em 25% dos custos de desenvolvimento. Sua recomendação universal vem de um entendimento do que é "razoável" para manter a qualidade, segurança e melhorar a experiência do cliente sem prejudicar o potencial para novos desenvolvimentos.

Seja o seu site um site afiliado, um negócio local, SaaS ou um simples site em HTML, quando as pessoas veem erros, elas clicarão alegremente no botão de voltar e você nunca mais as verá.

Com este artigo, aprenderemos sobre o conceito de garantia de qualidade de site, sua importância, como ele difere dos testes, como garantir que seu site seja de alta qualidade, algumas melhores práticas a seguir e uma lista de verificação de QA que você pode adotar para facilitar seu trabalho.

O que é QA de site?

Website QA (Quality Assurance) pode ser definido como o processo de testar um site a fim de descobrir erros, falhas ou omissões que podem não ter sido notados durante o desenvolvimento ou design da web antes de ser lançado ao vivo. Também é conhecido como teste de QA. Note que o QA começa muito antes, mesmo antes do início do desenvolvimento. Ele começa assim que os requisitos para o site são estabelecidos e culmina em testes. Sua preocupação abrangente é a qualidade do site como um todo, o que vai muito além de apenas corrigir bugs.

teste de site

Como o QA difere de outros tipos de teste?

Como mencionamos, o QA é um processo, não uma tarefa única. Aqui está como ele difere de outros tipos de teste:

QA vs teste de usuário

É importante diferenciar entre testes de garantia de qualidade e testes de usuário. Ambos podem ter os mesmos objetivos (ótima experiência do usuário - UX e funcionalidade adequada do site), mas existem várias diferenças entre eles.

O teste de usuário é simplesmente observar e analisar como os usuários realmente usam e interagem com o site e suas opiniões sobre a experiência que eles têm ao usá-lo. Também envolve encontrar o que é pouco claro e o que pode ser confuso para o usuário. Em última análise, há uma comparação entre a experiência do usuário e o uso real do site e o uso pretendido pelo desenvolvedor, bem como a experiência do usuário imaginada pelo webmaster.

QA difere do teste de usuário no sentido de que é feito antes do site ser publicado, e que é realizado por um testador de QA (não usuários). O testador simula diferentes ações do usuário no site para ver se elas funcionam conforme o planejado.

Os dois (QA e teste de usuário) são, no entanto, complementares, e os dados ou feedback coletados de ambos os processos são essenciais para garantir que o site funcione conforme o pretendido e que os padrões de UX tenham sido alcançados.

QA vs teste funcional

Testes funcionais podem ser definidos como um processo de QA baseado nos requisitos de design especificados do componente particular que está sendo testado. Envolve inserir, ou alimentar, entrada e depois analisar a saída.

QA, por outro lado, não se limita a um componente específico ou a requisitos de design especificados. O QA garante que todo o site seja de boa qualidade, desde o seu funcionamento até o quão atraente ele é para o usuário. Ele também incorpora testes antes do site ser publicado.

QA vs teste de requisitos

O teste de requisitos envolve o uso de requisitos e expectativas do cliente para avaliar o layout de um site, protótipo ou versão alpha. O QA entra em cena para decompor as especificações e requisitos do usuário conforme estabelecidos nos documentos de design aprovados pelo cliente, bem como outros requisitos de outra forma expressos. As especificações são então simplificadas e integradas em diferentes fases de desenvolvimento e, por fim, usadas no teste de requisitos.

QA vs teste de design

O teste de design examina como o site parece e se sente. O QA entra em cena para verificar se a aparência e a sensação estão de acordo com o layout e o design documentados.

Outros tipos de teste:

Teste de regressão - avaliando se fazer alterações no seu site afeta outras partes do site. Ele verifica se alguma mudança no código, por exemplo, quebra o site.

Teste de integração - este é o teste de se os serviços ou fontes de terceiros estão funcionando conforme o esperado quando integrados ao seu site. Esses serviços podem incluir APIs.

Teste de desempenho - este teste verifica se o site pode lidar com picos e surtos de tráfego. Este teste também pode incluir a rapidez com que o site carrega.

Existem muitos mais testes que você poderia fazer no seu teste de QA. Saiba mais sobre tipos de teste de sites aqui.

Por que é importante?

O QA de sites é voltado para garantir que a interface do usuário (UI) do site funcione conforme o pretendido (não há bugs). Ele também garante que uma ótima experiência do usuário seja alcançada. Aqui estão outros benefícios do teste de QA:

  • Destaca sua marca como confiável. Quando tudo em seu site funciona como deveria, os clientes associam sua marca à excelência. Eles vão, portanto, querer comprar seus produtos, pagar pelos seus serviços e estar associados à sua marca.
  • Isso pode revelar problemas que podem ter consequências graves, por exemplo, uma vulnerabilidade crítica de segurança.
  • Permite a entrega de um site confiável. Você tem certeza de como seu site irá se comportar, então há preocupações mínimas sobre inconsistências.
  • Isso acaba economizando dinheiro e tempo para o negócio que teriam sido perdidos corrigindo bugs muito tempo depois de o site ter sido publicado. Também é mais barato corrigir um bug antes de o site ser publicado do que depois. Não haverá usuários afetados, você não precisará que seu suporte ao cliente explique aos usuários por que o site não funciona como esperado, e você não precisará "fechar o site" para correções, perdendo tráfego e negócios.

Como realizar testes de QA em websites

QA não é uma tarefa fácil. Tempo e dinheiro precisam ser investidos para garantir que um site de alta qualidade seja entregue aos usuários. Dependendo da complexidade do site e das especificidades do projeto, o QA pode precisar de até 50% da alocação do orçamento.

Para realizar efetivamente o QA de um site, você precisa definir um processo que será seguido durante toda a fase de teste. Esse processo é comumente referido como fluxo do processo de QA. O fluxo do processo detalha a quantidade de tempo necessária por fase de teste, dependendo do orçamento disponível e da prioridade.

estratégia

Fatores a considerar ao projetar um fluxo de processo de QA

Há vários fatores que você precisa considerar ao projetar um fluxo de processo de QA. Estes incluem:

Público

Antes de começar a pensar no site, você precisa pensar para quem você está construindo. Isso ajudará você a definir as plataformas corretas que seu público mais utiliza. E isso será útil para restringir os ambientes de teste, por exemplo, os navegadores a serem usados e dispositivos para teste.

Tipo de Aplicativo

teste de dispositivos móveis

Você precisa considerar o tipo de aplicação que está testando, pois as abordagens de teste diferem dependendo do tipo de site. O seu site é estático ou dinâmico? Você vai testar um site móvel?

Especificidade do teste

O teste precisa ser bem definido e descrito, e cobrir um cenário com o resultado sendo claramente definido. Defina as suposições e pré-condições. Use o máximo de ‘dados reais’ (aqueles que são o mais próximo possível da entrada do usuário) que você puder.

Nível de risco

Você está construindo um site de alto ou baixo risco? O nível de risco aqui é determinado pela funcionalidade do site e pela indústria. Por exemplo, se o seu site coleta informações dos usuários, então você precisa testar se as informações inseridas estão corretas. Além disso, você precisa testar a privacidade das informações. Se transações financeiras são realizadas por meio do seu site, então você precisa testar minuciosamente a segurança.

Por outro lado, para um site estático, a ênfase deve estar na UI (interface do usuário) e na funcionalidade.

Número estimado de usuários

Trabalhar com um número estimado de usuários ajuda no teste de desempenho. Isso verifica o estresse e a carga (ou o tráfego) que o site pode suportar de uma vez durante um pico de tráfego.

Ferramentas para usar

Você precisa pensar nas ferramentas de teste que irá usar. Pode ser necessário usar diferentes ferramentas para diferentes tipos ou fases de teste. Você pode precisar de ferramentas diferentes para teste em diferentes navegadores e outras para teste de desempenho. Determine quanto de automação você precisa usar. Você pode usar ferramentas que automatizam partes do seu teste, por exemplo, como a ferramenta CloudQA que automatiza o teste de regressão.

A plataforma pela qual o site é acessado

Se o site deve ser acessado em várias plataformas ou navegadores, você precisa considerar os testes de compatibilidade entre plataformas.

Melhores práticas de QA

Existem várias coisas que você precisa fazer para implementar seu fluxo de processo de QA de forma eficaz. Nesta seção, vamos olhar para as melhores práticas de QA:

  • Defina os usuários que utilizarão o produto final.
  • Siga sua lista de verificação para cada fase ou tipo de teste.
  • Teste usando um site de teste (um site que simula o site real).
  • Agende a quantidade de tempo que cada fase de teste precisa durar.
  • Teste o mais cedo possível - teste novas funcionalidades assim que elas forem adicionadas.
  • Utilize uma abordagem de QA ágil (teste no final de diferentes estágios do desenvolvimento).
  • Priorize correções de bugs, dependendo do quão críticos eles são para a funcionalidade do seu site.
  • Automatize onde for possível, especialmente as partes de alto risco do site. Não automatize demais, no entanto. Priorize testar as partes onde a automação se encaixaria melhor.
  • Esforce-se para estabelecer uma abordagem colaborativa entre sua equipe de QA e a equipe de design/desenvolvimento.
  • Crie um mapa mental, um visual que ajudará você a ver a estrutura do seu site para ter uma ideia do escopo do trabalho e identificar as partes que você precisa priorizar.

Quais ferramentas você pode usar para o QA do seu site?

ferramentas

QA pode ser um processo assustador se feito manualmente. Como já mencionamos, você precisa automatizar onde for necessário e possível. É fácil testar seu site no seu navegador e PC e pensar que ele terá uma ótima aparência e funcionará conforme o esperado em todos os navegadores e dispositivos, e que os usuários saberão intuitivamente o que fazer. Você pode precisar usar um conjunto de ferramentas para ajudá-lo a testar diferentes fases do seu processo de QA. Aqui estão as ferramentas que você pode usar para tornar seus testes de QA mais fáceis:

TestRail

TestRail é um software de teste totalmente baseado na web com insights em tempo real para ajudá-lo a acompanhar seu progresso. Você pode usá-lo na nuvem ou baixá-lo. A ferramenta se integra facilmente com ferramentas de automação de teste.

Teste Cross-Browser

Esta ferramenta baseada na nuvem é usada para executar testes tanto em navegadores móveis quanto de desktop. Mais de 2050 navegadores estão disponíveis para testes. Será útil para testes de compatibilidade e regressão. Acompanha um teste gratuito.

Preenchedor de Formulário de Desenvolvedor Web

Se você usa algum formulário em seu site, mesmo que seja tão simples quanto um formulário de contato, você precisa testar se o formulário permite apenas o tipo especificado de entrada de usuário, se ele envia as informações corretas, ou mesmo se as informações compartilhadas (especialmente se forem informações pessoais do usuário) são exibidas na URL do navegador. Confira a extensão do chrome para preenchimento de formulários.

A ferramenta Preenchedor de Formulários de Desenvolvedor Web permite que você teste a funcionalidade de um formulário. Tudo o que você precisa fazer é preencher os valores que deseja nos seus campos de entrada, e a ferramenta irá automaticamente preenchê-los para você. Dessa forma, você pode testar seus formulários mais rapidamente.

Ranorex Webtestit

Esta ferramenta é ideal para testes de UI em diferentes navegadores e Sistemas Operacionais (Mac, Android, Windows e Linux). Com Ranorex, você pode realizar todos os testes no seu PC ou Desktop local. Ela vem com um período de teste gratuito e relatórios de teste integrados.

Redimensionador de Janela

Window Resizer é uma Extensão do Chrome que ajuda você a visualizar como o seu site parece em diferentes tamanhos de janela. Esta ferramenta permite que você teste os tamanhos mais comumente usados tanto para desktop quanto para dispositivos móveis. Você também pode adicionar tamanhos de tela personalizados. A ferramenta oferece uma visão sobre o conteúdo que deve estar acima da dobra, e sugestões para fazer sua tela parecer melhor em diferentes tamanhos de tela.

CloudQA

CloudQA é uma ferramenta adequada para uso por testadores de todos os níveis, mesmo aqueles sem habilidades técnicas de desenvolvimento ou design. Você pode usá-la para testes de regressão e ela oferece feedback instantâneo. É capaz de executar centenas de testes ao mesmo tempo em diferentes navegadores. Seu modelo de precificação é que você só paga pelo que usa. Você pode até usar a ferramenta como uma extensão de navegador para ajudá-lo a gravar seus testes.

SEOptimer

Esta ferramenta é útil para testes de SEO. Ela realiza uma auditoria do site para ajudar você a identificar o que está fazendo certo quando se trata de SEO, e os aspectos que precisam de melhoria para que seu site tenha um melhor posicionamento nos resultados dos motores de busca.

É simples de usar, mesmo que você não tenha muito conhecimento em SEO. Ele fornece uma atualização do desempenho do seu site e permite que você personalize seu relatório para se adequar à sua marca. Você também pode escolher o idioma em que deseja que seu relatório esteja.

Também é integrado com CRMs como MailChimp e Salesforce para melhor gerenciamento de leads.

Lista de verificação de QA de Website

Nesta seção, exploramos uma lista de verificação que você pode usar ao realizar o QA do seu site. Aqui está um resumo:

teste de site

Fonte da imagem

Teste funcional

Aqui, você testa os recursos do seu site. É mais fácil testar esses recursos se você tiver um mapa mental que detalhe como seu site deve funcionar e parecer. Mesmo que você não tenha um mapa mental, aqui estão os aspectos a serem observados:

Verifique se estes funcionam conforme o esperado. Que eles realmente colem o tipo correto de informações e as enviem (para formulários) ou direcionem as pessoas adequadamente. A validação do seu formulário deve incluir:

  • Campos obrigatórios não podem ser deixados em branco.
  • Texto de espaço reservado para facilitar aos usuários a visualização do tipo de conteúdo que você gostaria que eles preenchessem, além de instruções claras sobre o tipo de entrada que você espera deles, por exemplo, senhas com pelo menos 8 caracteres, com dígitos, letras maiúsculas e caracteres especiais.
  • Que as informações coletadas sejam armazenadas de forma segura (senhas são criptografadas, por exemplo, antes de serem armazenadas no banco de dados).

Fluxo de processo do seu site

Qual é a jornada do usuário pelo seu site? Você tem uma jornada ideal que eles deveriam seguir? A maioria das jornadas de usuários começa com a página inicial. Se você vende roupas, por exemplo, a jornada do usuário pode ser a partir da:

página inicial >> categorias >> produto específico >> adicionar ao carrinho >> cadastre-se >> finalizar compra

Essa é a jornada que seus usuários realmente fazem? Ou eles desistem assim que chegam em 'inscrever-se'? O que isso diz sobre onde 'inscrever-se' deve estar no processo do site?

verificador de links quebrados seoptimer

Verifique se todos os links estão funcionando e direcionando as pessoas para os locais pretendidos. Uma ferramenta para verificar links quebrados será útil aqui. Certifique-se de que não há páginas sem saída (páginas sem chamadas para ação ou links para outras páginas - elas não indicam aos usuários o que fazer em seguida) e que os links de e-mail realmente enviam e-mails para os destinatários corretos.

Leia nosso artigo sobre Links Quebrados para saber mais sobre como você pode consertá-los.

Cookies

Cookies são criados por um navegador quando você visita um site. Eles contêm informações como preferências do usuário e seu status de login. Aqui está o que seu QA deve verificar quando se trata de cookies:

  • Que eles não estejam ativos após o período definido de 'expiração'.
  • Que eles sejam criptografados antes de serem salvos no dispositivo de um usuário.
  • Que eles funcionem corretamente - para fazer isso, teste quando os cookies estão habilitados versus quando estão desabilitados.
  • O impacto deles na segurança do seu site - exclua-os e verifique como isso afeta a segurança do seu site.

Outros testes funcionais

  • Verifique se há erros de sintaxe.
  • Verifique a existência de um sitemap e se ele está implementado corretamente.

Teste de desempenho

verificando a velocidade da sua página da web

Aqui, você testa se o seu site é capaz de lidar com picos intensos de tráfego e ainda assim funcionar conforme o esperado. Aqui está o que procurar:

Como o site se comporta durante:

  • Picos de tráfego (teste de estresse).
  • Aumento da carga de trabalho (teste de carga).
  • Carga de trabalho normal (teste de estabilidade).
  • Vários logins de usuários (teste de concorrência).
  • Aumento no volume de dados do banco de dados (teste de volume).
  • Aumento contínuo da carga de trabalho (teste de resistência).

Outros testes de desempenho:

  • Velocidade de carregamento da página (quanto tempo leva para o seu site carregar). Uma ferramenta de teste de desempenho seria útil aqui.
  • Como o seu site se comporta quando o usuário tem uma conexão lenta com a internet.

Teste de segurança

teste de segurança Fonte da Imagem

Aqui está o que verificar em termos de segurança:

  • As senhas podem ser 'crackeadas'?
  • Os usuários são redirecionados para páginas SSL criptografadas?
  • Os seus formulários possuem captchas? Eles estão funcionando como esperado?
  • Um usuário pode fazer login sem uma senha ou com uma senha incorreta?
  • Autorização - apenas usuários autorizados podem acessar partes específicas do site.
  • Arquivos restritos são baixáveis apenas por usuários autorizados e acessíveis?
  • Autenticação - apenas um usuário verificado tem permissão para fazer login e, em seguida, acessar certas partes ou recursos no seu site (aqui está a diferença entre autenticação e autorização).
  • A sessão do usuário é encerrada se levar um tempo específico, por exemplo, um pagamento que leva mais de 10 minutos?
  • Você também pode definir como seria uma violação de segurança e simular para ver como seu site lidaria com isso (teste de penetração).

Teste de compatibilidade

CÓDIGO CSS

Seus usuários acessarão seu site em diferentes dispositivos e plataformas - navegadores e sistemas operacionais. Aqui você pode verificar como seu site aparece e se comporta em diferentes dispositivos e plataformas. Você deve verificar:

  • Como estão as imagens?
  • Seu NAP (nome do site ou da empresa, endereço e número de telefone) está facilmente acessível?
  • Responsividade (está bom no celular versus desktop/pc? Em diferentes tamanhos de tela? O usuário tem espaço adequado para clicar nos links e botões? - lembre-se de que em uma tela menor, o usuário tocará em um botão para 'clicar' nele. Os itens no seu site estão bem espaçados em telas menores?
  • Seu site está ótimo e funciona conforme o esperado em diferentes navegadores e resoluções de tela?

Teste de conteúdo

relatório de rastreamento seoptimer

Aqui, você avalia o conteúdo do seu site. Este teste será mais útil se você já tiver definido seu público.

  • Que as cores usadas combinem.
  • Que os tamanhos de fonte utilizados são ideais.
  • Que as informações fluam logicamente.
  • Você tem páginas com conteúdo fraco?
  • Seu conteúdo atende à intenção do usuário?
  • Verifique se há erros de digitação e gramaticais.
  • Que as imagens estão otimizadas com tags alt.
  • Inclui sua palavra-chave principal?
  • A informação mais importante está sendo exibida primeiro?
  • Que nenhum conteúdo fictício ainda esteja presente no site.
  • Que o conteúdo destinado a estar acima da dobra seja exibido no local correto.
  • Verifique as imagens e vídeos. Eles estão sendo exibidos corretamente? Eles têm alguma violação de direitos autorais?

Use nossa lista de verificação de QA do site para suas necessidades e adicione à sua própria lista e personalize-a como achar melhor.

Em conclusão

Website QA é um processo que começa quando os requisitos do site são estabelecidos e continua mesmo após o site ter sido lançado e estar em uso. Coisas que precisam ser corrigidas continuarão a surgir ao longo do tempo, então é importante testar seu site rotineiramente. É importante definir e estruturar o processo de QA antes que os testes comecem, a fim de tornar os testes mais fáceis, mais focados e perspicazes. Por último, registre os bugs e armazene-os para referência futura quando você começar a corrigir os bugs ou erros encontrados.