Curso

Qualidade de software

SLIDESMANIA.CO
 Qualidade de Software

Módulo 11
SLIDESMANIA.CO
 Automação de testes
com Cypress
Hands-on

Aula prática, com pouco material teórico

SLIDESMANIA.CO
 Por que Cypress

• Fácil instalação
• Fácil configuração
• Baixa curva de aprendizado
• Documentação completa
• Suporte a multi-browsers
• Dashboard amigável
• Fácil Depuração (debug)
• Tipos de testes: Unidade, Componentes,
Integração & Teste de Interface do
usuário (UI).

https://pt.wikipedia.org/wiki/Git

SLIDESMANIA.CO
 Popularidade

https://2020.stateofjs.com/en-US/technologies/testing/
https://2020.stateofjs.com/en-US/technologies/testing/
SLIDESMANIA.CO
 Preparação do ambiente

• Instalar Node.JS • Intalar Visual Studio Code

Verificar a instalação: Plugins recomendados:

• ES6 Mocha
• node --version
• Bracket Pair Colorizer
• Cypress Snippets
• Material Icon Theme
• Visual Studio IntelliCode

SLIDESMANIA.CO
 Preparação do ambiente

Criar o projeto node (package.json):

● npm init -y
Instalar o Cypress (na pasta do projeto)
● npm install cypress -D
● Suporte em: https://docs.cypress.io/guides/getting-started/installing-cypress

SLIDESMANIA.CO
 Abrir e criar os exemplos

• Após a instalação execute:

● npx cypress open

SLIDESMANIA.CO
 Estrutura do teste automatizado

Elemento Ação Resultado

Capturar elemento: Inserir uma ação Resultado esperado

Botão, Campo, para o elemento:
para o teste:
Formulário, Combo, Clicar, arrastar,
Check, Texto, etc. digitar, checar, etc. Deve fazer algo

SLIDESMANIA.CO
 Cenário ou rotina que roda antes
de todos os cenários

before
Hooks Teste 1
before
before(() => {
//trecho de código aqui
});
Teste 2

Exemplo: Carregar uma base

Teste 3 de dados para os testes

Teste N

SLIDESMANIA.CO
 Cenário ou rotina que roda antes
de cada teste

beforeEach

Hooks Teste 1
beforeEach
beforeEach(() => {
beforeEach //trecho de código aqui
Teste 2 });

beforeEach
Exemplo: Visitar a mesma URL
Teste 3 antes de cada teste
beforeEach
Teste N

SLIDESMANIA.CO
 Cenário ou rotina que roda depois
de todos os cenários

Teste 1

Hooks Teste 2 after(() => {

after //trecho de código aqui
});

Teste 3
Exemplo: Limpar uma base de
dados depois de executar os
Teste N testes

after

SLIDESMANIA.CO
 Cenário ou rotina que roda depois
de cada teste

Teste 1
Hooks afterEach
afterEach(() => {
afterEach Teste 2 //trecho de código aqui
});
afterEach
Teste 3
afterEach Exemplo: Limpar algum dado comum
depois de cada teste. Não é comum o
Teste N uso, porque o Cypress já limpa os
dados depois de cada teste.
afterEach

SLIDESMANIA.CO
 https://docs.cypress.io/guides/getting-started/installing-cypress
https://docs.cypress.io/
Referências
https://www.youtube.com/agilizei

SLIDESMANIA.CO