1. Testes E2E em
Cypress com JS

2. ● Mãe da Luíza
● Engenheira de Qualidade - Itaú
● Founder do QALadies
● Formada em Bacharel em Ciência da Computação
pela UNINOVE
● Apaixonada por Coordenação de Eventos e Palestras
● 11 anos de experiência em Desenvolvimento e 5 de
QA
I am Nàtali Cabral

3. Qaladies.com

4. É uma metodologia
utilizada para testar se o
fluxo de um aplicativo
está sendo executado
conforme o projeto do
início ao fim
É um forma de realizar
testes nas quais visam
provar o sistema de uma
forma mais completa
simulando o ambiente
real
O que é testes E2E ?
Como por exemplo
automatizar os testes
regresivos.

5. Na piramide de testes

6. Cypress a solução
para muitos problemas

7. “O Cypress.io é um framework de
testes automatizados end-to-end
usando JavaScript! Mas não vai
achando que é mais um framework
"modinha" que surgiu por aí, ele é
surpreendente porque suas
características e também pelo seu
principalmente mecanismo
. Vamos entender um pouco mais?

8. Para utilizar JS para fazer uma automação E2E,
tínhamos que escolher :
● Um framework como (mocka, Jasmine, JUnit)
● Uma biblioteca que faça uma boa integração
(Chai, Expect.js)
● Usar o Selenium para poder fazer a comunicação
com os elementos do DOM enviando comandos de
forma remota e isso tudo envelopado (wrapper)
pelo Protractor ou Webdriver, etc.
Antes do Cypress

9. …Resumindo o slide anterior
Cyprees faz tudo isso e muito mais sem Selenium.

10. O quanto
tudo isso é
custoso?

11. 02Número de ferramentas a
ser utilizado
Curva de aprendizado
01
Sem limitação para aplicação
04Serialização de objeto
03

12. ● É open source O/
● É executado no mesmo ciclo de execução da
aplicação
● Atrás do Cypress é um processo do servidor
Node.js
● O Cypress é o processo Node.js comunicam,
sincroniza e executa tarefas constantemente.
● Ter acesso a ambas as partes (back e front)
Arquitetura do
Cypress

13. ● Testes em Javascript.
● Continuous Integration.
● Time Travel.
● Real time reloads.
● Automatic waiting.
● Spies, stubs e clocks.
● Controle do tráfego de rede.
● Screenshots e vídeos.
● Testar responsividade em web apps.
Principais pontos do
Cypress

14. … Como funciona

15. Hora da Automação O/

16. ViewPorts com Cypress
Teste a responsividade sem se preocupar
https://docs.cypress.io/api/commands/viewport.html#Arguments

17. Plugins do Cypress
https://docs.cypress.io/plugins/

18. Iniciando um projeto com Cypress
do zero
1. Crie um diretório
2. De npm init -y para criar seu package.json
3. Depois de npm install cypress --save
4. Npx cypress open
5. Veja os exemplos que o cypress já trás pronto para
você

19. Iniciando um projeto com Cypress
do zero
Fixtures: É onde seus mocks são armazenados podendo ser
utilizados em qualquer teste.
Integrations: Aqui é o diretório onde criará seus arquivos de
teste exemplo : app_spec.js ou .js .jsx .coffee .cjsx.
Plugins: Com eles é possível trocar, modificar ou estender o
comportamento interno do Cypress.
Support: Neste diretório é possível criar comandos que podem
ser executados dentro dos testes ou sobrescrever comandos já
existentes.
Exemplo de comandos:
- Comando para login ( Evitar duplicação de código)
- Comando para logout

20. Iniciando um projeto com Cypress
do zero

21. Materiais para estudo
https://docs.cypress.io/examples/examples/recipes.html#Fundamentals
https://bit.ly/2Y90rMK
https://testautomationu.applitools.com/cypress-tutorial/

22. THANKS!
/in/natali-cabral/
natalicabral95@gmail.co
m
github.com/naascabral/
medium.com/@Naascabr
al