---
# System prepended metadata

title: Tester Quasar

---

# Tester Quasar

Este é um documento com o objetivo de padronizar os testes em sites, APPs e Web APPs. 

## ASANA
O gerenciamento de projetos da quasar é feito pelo app [Asana](https://app.asana.com/) seguindo uma estrutura padronizada 
![enter image description here](https://i.imgur.com/9L6iWGo.png)

 - Na primeira coluna **Informações** temos três cards fixos **Acessos**, **Documentos** e **Servidor de deploy**.
 - Em **Acessos** terá as rotas do ambiente criado para teste, onde encontrará o link da versão para desenvolvimento.
 - Em **Documentos** podemos encontrar o design das paginas (normalmente usando , o fluxo de usuário 

# Testes
Os testes das aplicações serão feitos quando o card estiver na coluna **Testing**. Onde deverá ser comentado as correções a serem feitas. Caso tenha correções deve ser alterado o *Feedback* para **Mudanças Necessárias** e movido para a coluna **To Do**

## Primeira Avaliação
A primeira avaliação é feita visualmente, comparando a pagina, ou item do card, com o projeto de design (no card Documentos) 

- Verificar Fontes
   -   [ ]  Tamanho
    -   [ ] Cor
    -   [ ] Família da Fonte
    -   [ ] Peso da fonte
-   [ ] Espaçamento entre Textos
-   [ ] Espaçamento entre Componentes

Se encontrar algo diferente deve tirar print e circular ou apontar na imagem para melhor descrever no feedback. 

> Nota: Aconselho usar softwares que permitam marcar no print de forma rápida, por exemplo: [Lightshot](https://app.prntscr.com/pt-br/download.html) ou [Flameshot](https://flameshot.org/).

## Teste Especializado
Inspecionar os elementos do site (Ctrl + Shift + I), Assim pode se ver as configurações dos elementos 
Ao clicar no ícone de selecionar um elemento da pagina para inspecionar (ctrl + shift +C) e passar o mouse sobre um elemento, pode-se ver detalhes sobre ele como fonte, cor, tamanho e até classe.
Ao clicar sobre o elemento na guia Elements, e na subguia styles pode-se ver as formatações de classes.
![Inspecionar elemento](https://i.imgur.com/ZHVkTDL.png)

Ao descer até o final de Styles pode ver o tamanho, padding e margem. 
![Margem, borda, padding e tamanho](https://i.imgur.com/f7bSWRU.png)

Nesse modo de inspeção pode ser feito também a troca para o modo mobile e verificar a responsividade por meio do botão *toggle device toolbar* ou pelo atalho (Ctrl + Shift + M)

Nessa teste que devemos avaliar o que foi aplicado de fato pelo programador,  Responsividade e funcionalidade:

 - Design
	 -   [ ] Responsividade para mobile
	 -   [ ] Responsividade para Desk (chorme, Firefox, Edge, Safari)
	 -   Verificar Fontes
		    -   [ ] Tamanho
		    -   [ ] Cor
		    -   [ ] Fonte
	 -   [ ] Espaçamento entre Textos
	 -   [ ] Espaçamento entre Componentes
	 -   [ ] Tamanho de imagens
	 -   [ ] Tamanho de Caixas
	 -   [ ] Texto digitado
	 -   [ ] Alinhamento
 - **Funcionalidade**
	 -   [ ] Funcionamento de botões
	-   [ ] Funcionamento de Filtros
	-   [ ] Transições entre páginas
	-   [ ] Preenchimento
	-   [ ] Máscara de dinheiro (preenchimento de trás para frente)
	-   [ ] Máscara de banco (preenchimento de trás para frente ex.: Ag, conta, ...)
	-   [ ] Verificar se o que deve ser dinâmico está dinâmico
	-   [ ] Verificar se o que deve estar estático está estático

## Feedback
O feedback deve ser colocado no comentário do card no Asana de forma padrão da seguinte forma: 

 1. Marcar o programador responsável para fazer as alterações, ele está designado para o card. 
 2. Escrever a data do feedback (em negrito)
 3. Colocar o link da tela testada
 4. Enumerar as divergências ou bugs encontrados
 5. Anexar as imagens (de preferencia com as numerações da lista nelas para agilizar o entendimento do programador
 ![enter image description here](https://i.imgur.com/ih2d3hI.png)
 
 Após isso marcar em feedback **Mudanças necessária** E voltar o card para **To Do**
 ![enter image description here](https://i.imgur.com/5cH3yvZ.png)

Caso esteja conforme. Mudar o feedback para **Aceito** e Mover para a coluna seguinte de **Client Review**. Aonde será mostrado para o cliente. 

# Planos futuros
A parte de teste num software, site, ou até mesmo produto se trata do controle de qualidade da empresa. Sendo assim devemos ter em mente o lema da qualidade **MELHORIA CONTÍNUA**.
Para isso devemos buscar formas melhores, mais rápidas e mais eficientes de testar nossos produtos. 
Estamos em busca de testes automatizados, de preferencia com planos gratuitos. Sempre bom aprender mais:
 - https://www.cypress.io/

> "Jamais se acomode, busque sempre mais. Conhecimento é algo que você carrega consigo, é pessoal e enriquecedor !!"


# Dica Aprendizado de Programação
Ao inspecionar um elemento e ver as formatações nas classes na guia *styles* você tem a possibilidade de alterar esses valores, adicionar formatações CSS nas classes, ou remove-las, assim pode saber como deveria ser ou até dizer diretamente ao programador onde alterar (lembrando é claro de sugerir, caso não tenha 100% de certeza sobre o assunto) 

## Links úteis

 - [https://www.w3schools.com/](https://www.w3schools.com/)
 - [https://css-tricks.com/](https://css-tricks.com/)
 - https://paletton.com/
 - [Extensão do chrome colorzilla ](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=pt-BR)
 - [Extensão do chrome Perfect Pixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=pt-BR)
 - [https://blog.qaninja.io/](https://blog.qaninja.io/)