e2e-cypress-best-practices

Este projeto tem como objetivo servir como um template de boas práticas em testes e2e com o uso da ferramenta Cypress.

Algumas das melhores práticas a serem consideradas são:

Boas práticas relacionadas a escrita dos scripts de testes:

• Utilizar seletores que possuem interação com o usuário, exemplos como role, label, placeholder, text e display value, desta forma também validamos a acessibilidade. Para mais informações acesse o video da confência cypress no link: https://www.youtube.com/watch?v=QR72OPX6YGQ
• Utilizar a biblioteca test library Cypress para facilitar a escolha de seletores no DOM que possuem interação com o usuário.
• Utilizar plugins como step e log para deixar os testes mais explicativos e possível utilização de BDD sem Cucumber.
• Utilizar a funcionalidade cy.session para realizar o login na aplicação.
• Criar comandos customizados para automatizar tarefas comuns, utilizando a seguinte sugestão de serapação dos arquivos como util, comandos de API e sequencia de ações comuns
• Utilizar TypeScript com o uso de types para garantir a integridade e consistência dos testes e usufruir do benefício de auto complete.
• Criar quantas asserções forem necessárias.
• Utilize after, afterEach para limpar o estado antes da execução dos testes.
• Use aliases de rota ou asserções para proteger o Cypress de prosseguir até que uma condição explícita seja atendida.
• Não versionar dados sensíveis no projeto utilizando variáveis de ambiente com .cypress.env..
• Manter a independência entre os testes, garantindo que cada teste possa ser executado de forma isolada.

Boas práticas relacionadas a configuração do projeto:

• Configure uma baseUrl no arquivo de configuração cypress.config.ts.
• Realizar processo de testes em burn para identificar testes flakes.
• Utilizar TAGs com cypress-grep para organizar e categorizar os testes.
• Configurar reports com mochawesome
• Considerar o uso do serviço Cypress Cloud para executar os testes de forma distribuída e em diferentes ambientes e usufruir dos benefícios das funcionalidades de test replay e Flake tests.
• Ou Considerar o uso do serviço Cypress debug.
• Uso de ferramentas de análise estática como: ESlint Prettier.

Referências

• Site oficil do Cypress
• Curso de melhores práticas com Cypress

Como executar o projeto

- nvm use
- npm i
- npm run open

Como usar o Cypress Grep para adicionar tags

Estamos adicionando uma tag de smoke como exemplo, para adicionar uma tag você pode colocar a tag num bloco it ou em um describe, ao ser inserido no it apenas o teste com a tag irá ser executado com a tag, ao colocar no describe todos os testes dentro do bloco de describe irão herdar a tag

Para inserir basta fazer algo como o exemplo abaixo:

it("passes", { tags: "@smoke" }, () => { ... }

ou

describe("passes", { tags: "@smoke" }, () => { ... }

E para rodar de forma headless apenas os testes com a tag de smoke utilize:

npx cypress run --env grep=@smoke

Ou com o script que criamos:

npm run cy:run:smoke

Desenvolvido por Raquel