The web has evolved. Finally, testing has too. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You’ll write your first test in no time, and then you’ll discover how to write a full end-to-end test for a modern web application.

1. 1
How to start
with Cypress

2. - almost 7 years at Slido
- Mostly test automation
- Cypress ambassador
- filiphric.com - Cypress tips
- Workshops, presentations,
webinars, courses,
streaming, youtube,
consultations
👋 Filip Hric

3. filiphric.com/workshops

4. Workshop form
- 📚 Chapter overview
- 👀 Demo
- 󰠁 Practical challenge - try it at home!
- ❓ Q&A continually, use your mic, or in Q&A section

5. How well do you know Cypress?

6. 👀 Workshop form - demos
- code example, short presentation
- I’ll start in demo_start.js
- finished state in demo_end.js
- notes for everything I plan on saying
are in notes/notes.md
- I tend to improvise 😅

7. 󰠁 Workshop form - practical
challenges

8. 󰠁 Workshop form - practical challenges
- open your editor and go to
challenge.js
- run it in Cypress
- look at the solution in
challenge_solution.js

9. Important note:
you don’t need to finish all the practical challenges

10. 🔧 Tools we will be using

11. VS Code

12. Cypress

13. Trello app

14. Database seeding

15. 15
Cypress project &
GUI
Chapter #0:

16. 📚 What you’ll learn
- how to install Cypress
- how does a Cypress project look like
- what is the purpose of different project folders
- how to choose a different browser in Cypress

17. 👀 Demo

18. 18
Creating first test
Chapter #1:

19. 📚 What you’ll learn
- how to write your first test
- what kind of syntax does Cypress use
- how to setup url of the page we want to test
- what are the capabilities of Cypress app
- how to click, type
- what kind of checks does Cypress perform in the
background

20. 👀 Demo

21. 󰠁 Practical challenge

22. 22
Simple assertions
Chapter #2:

23. 📚 What you’ll learn
- how to use .should() command
- beforeEach() hook
- how to check visibility, state, class or number of elements
- what to look out for when making assertions

24. 👀 Demo

25. 󰠁 Practical challenge

26. 26
Chaining and
retrybility
Chapter #3:

27. 📚 What you’ll learn
- how does chaining commands work in Cypress
- how built-in retrying in Cypress works
- how to write effective command chains
- how to write your test if the app is flaky

28. 👀 Demo

29. 󰠁 Practical challenge

30. 30
Chai assertions
Chapter #4:

31. 📚 What you’ll learn
- how to use .then() function
- how to use expect() assertions
- how to make assertions on multiple elements
- how to make Cypress retry assertions on multiple
elements

32. 👀 Demo

33. 󰠁 Practical challenge

34. 34
Http requests
Chapter #5:

35. 📚 What you’ll learn
- how to send an http request
- how to test response from server
- how to set up different attributes
- how to reset Trello app

36. 👀 Demo

37. 󰠁 Practical challenge

38. 38
Intercepting
requests
Chapter #6:

39. 📚 What you’ll learn
- how to watch API requests that our app makes
- how to test those API requests
- how to stabilize a flaky test
- different ways of matching our requests

40. 👀 Demo

41. 󰠁 Practical challenge

42. 42
Installing plugins
Chapter #7:

43. 📚 What you’ll learn
- where to find Cypress plugins
- how to install and use a Cypress plugin

44. 👀 Demo

45. 󰠁 Practical challenge

46. filiphric.com/workshops